Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

spinner width height #24

Merged
merged 2 commits into from
May 21, 2024
Merged

spinner width height #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bbc30c8
💄 style(css): height를 fit-content로 변경
bh2980 May 21, 2024
c227e61
📝 docs(story): size story에 spinner 컴포넌트 중앙 정렬
bh2980 May 21, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/atoms/Spinner/Spinner.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const Default: Story = {

export const Size: Story = {
render: () => (
<div className="flex gap-md">
<div className="flex gap-md items-center">
<Spinner size="sm" />
<Spinner size="md" />
<Spinner size="lg" />
Expand Down
1 change: 1 addition & 0 deletions src/components/atoms/Spinner/Spinner.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { tv } from "@utils/customTV";

export const SpinnerVariants = tv({
base: "h-fit",
variants: {
size: {
sm: "w-[96rem]",
Expand Down
9 changes: 1 addition & 8 deletions src/components/atoms/Spinner/Spinner.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,7 @@ import { SpinnerProps } from "./Spinner.types";

const Spinner = ({ size, className, ...props }: SpinnerProps) => {
return (
<svg
width="200"
height="200"
strokeWidth={"24px"}
viewBox="0 0 400 400"
className={SpinnerVariants({ size, className })}
{...props}
>
<svg strokeWidth={"24"} viewBox="0 0 400 400" className={SpinnerVariants({ size, className })} {...props}>
<g className="animate-[spin_2s_linear_infinite] origin-center">
<path
d="M132.826 264.259C145.449 277.631 161.754 286.959 179.679 291.064C197.604 295.168 216.344 293.866 233.528 287.32C250.713 280.775 265.571 269.28 276.222 254.291C286.874 239.301 292.842 221.489 293.371 203.108C293.9 184.727 288.966 166.601 279.194 151.024C269.422 135.447 255.25 123.117 238.47 115.594C221.69 108.071 203.057 105.693 184.925 108.76C166.794 111.827 149.979 120.202 136.608 132.826"
Expand Down