spinner component

Author: jmgrd98

.storybook/main.ts

@@ -6,7 +6,6 @@ import path from "path";
 const config: StorybookConfig = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
-    "@storybook/addon-onboarding",
     "@storybook/addon-links",
     "@storybook/addon-essentials",
     "@chromatic-com/storybook",

src/components/atoms/Spinner/Spinner.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Spinner, { SpinnerProps } from './Spinner';
+
+const meta: Meta<typeof Spinner> = {
+    title: 'Components/Atoms/Spinner',
+    component: Spinner,
+    parameters: {
+        layout: 'centered',
+    },
+};
+
+export default meta;
+
+type SpinnerStory = StoryObj<SpinnerProps>;
+
+export const Small: SpinnerStory = {
+    render: (args) => <Spinner {...args} className="w-4 h-4" />
+};
+export const Medium: SpinnerStory = {
+    render: (args) => <Spinner {...args} className="w-8 h-8" />
+};
+export const Large: SpinnerStory = {
+    render: (args) => <Spinner {...args} className="w-12 h-12" />
+};

src/components/atoms/Spinner/Spinner.tsx

@@ -0,0 +1,15 @@
+import { cn } from "../../../utils";
+
+export type SpinnerProps = {
+    className?: string;
+};
+
+const Spinner = ({ className }: SpinnerProps) => {
+    return (
+        <div
+            className={cn('border-4 border-solid border-blue-500 border-t-transparent rounded-full animate-spin', className)}
+        ></div>
+    );
+};
+
+export default Spinner;