feat: added the button component

[Aarif5435]

Feature: Button Component Implementation Based on Figma Design

Description

This PR introduces a new Button component built based on the Figma design provided in issue #13. The component has been added to Storybook for ease of visualization and testing. The design follows the guidelines outlined in the issue, including support for various states and styling derived from design tokens.

Key Features

• Basic UI Implementation: Button layout and style closely mirror the Figma design.
• Prop Support: Props introduced for better flexibility and adherence to Figma specifications:
  • variant: Defines the button style (e.g., primary, secondary, warning, etc.).
  • size: Supports different sizes (xs, sm, md, lg).
  • asChild: Allows rendering the button as another component (e.g., Link).
  • theme: Supports light and dark themes.
• Dynamic Styling: Uses Tailwind CSS for consistent, responsive styles and design-token-based color variables.
• State Management:
  • Normal: Default state of the button.
  • Hover: Adds hover effects per Figma design.
  • Active: Highlights the active button state for better UX.

Screenshorts

[ahmadshaheer]

closing in favor of #48