feat: label component

.storybook/preview.ts

@@ -1,5 +1,7 @@
 import type { Preview } from '@storybook/nextjs-vite'
 
+import "../src/app/globals.css";
+
 const preview: Preview = {
   parameters: {
     controls: {

src/components/label_component.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from "react";
+
+interface ILabelProps {
+  children: ReactNode;
+  disabled?: boolean;
+  htmlFor?: string;
+  size?: 'small' | 'medium' | 'large';
+  onClick?: () => void;
+}
+
+const Label = ({ 
+  children, 
+  disabled = false, 
+  htmlFor,
+  size = 'medium',
+  onClick,
+}: ILabelProps) => {
+  const getSizeClasses = () => {
+    switch (size) {
+      case 'small':
+        return 'text-xs';
+      case 'large':
+        return 'text-base';
+      default:
+        return 'text-sm';
+    }
+  };
+
+  const colorClass = disabled ? 'text-gray-400' : 'text-gray-700';
+  const cursorClass = disabled ? 'cursor-not-allowed' : 'cursor-pointer';
+
+  return (
+    <label
+    htmlFor={htmlFor}
+    onClick={disabled ? undefined : onClick}
+    className={`${getSizeClasses()} ${colorClass} ${cursorClass}`}
+    >
+      {children}
+    </label>
+  );
+};
+
+export default Label;

src/stories/Label.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+
+import { fn } from 'storybook/test';
+
+import Label from '../components/label_component';
+
+const meta = {
+  title: 'Components/Label',
+  component: Label,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    disabled: { control: 'boolean' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+  args: { onClick: fn() },
+} satisfies Meta<typeof Label>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Enabled: Story = {
+  args: {
+    children: 'Label',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Label',
+    disabled: true,
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    children: 'Label',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    children: 'Label',
+  },
+};