Add Storybook Stories for Existing React Components

📚 Description

We are building a React project and want to integrate Storybook to help us visualize and document our UI components in isolation.

This issue is perfect for first-time contributors and those new to open-source. You'll be helping us create *.stories.tsx or *.stories.jsx files for our React components so they can be showcased in Storybook.

---

🛠️ Task Details

• Locate components inside the src/components/ directory
• For each component, create a corresponding Storybook story file in src/stories/ (or alongside the component if our project prefers that)
• Follow the Component Story Format (CSF) to write your stories
• Add multiple variations of the component, such as:
  • Default / Primary
  • Secondary
  • Disabled
  • Loading (if applicable)

---

🧪 Example

If we have a Button.tsx component:

// src/components/Button.tsx
import React from 'react';

type ButtonProps = {
  label: string;
  onClick: () => void;
};

export const Button = ({ label, onClick }: ButtonProps) => (
  <button onClick={onClick}>{label}</button>
);