storybook implementation completed

src/App.jsx

 import './App.css'
-import Button from './components/Base/Button/Index'
+import Button from './components/Base/Button/Index';
 
 function App() {
 
   return (
     <>
      <h3> Booking APP</h3>
-      <Button>Confirm</Button>  
+      <Button>Confirm</Button> 
     </>
   )
 }

src/components/Base/Button/Button.stories.jsx

 import Button from './Index';
-
+import Space from '../../Layout/Space/Index'
 export default {
-    title: 'Component/Base/Button',
-    tags: ['autodocs'],
-    component: Button
+  title: 'Component/Base/Button',
+  tags: ['autodocs'],
+  component: Button
 }
 
-export const Primary = {
+export const Default = {
   args: {
     primary: true,
     label: 'Button',
   },
   render: () => {
-    return <Button>Confirm</Button>
+    return (
+      <>
+        <h2 style={{ fontFamily: "Poppins-Medium",color: 'white' }}>Button Size</h2>
+        <Space>
+          <Button size={"sm"}>Confirm </Button>
+          <Button size={"md"}>Confirm</Button>
+          <Button size={"lg"}>Confirm</Button>
+        </Space>
+        <h2 style={{ fontFamily: "Poppins-Medium",color: 'white' }}>Button Loader</h2>
+        <Space>
+          <Button size={"sm"} loading={true}>Confirm</Button>
+          <Button size={"md"} loading={true}>Confirm</Button>
+          <Button size={"lg"} loading={true}>Confirm</Button>
+        </Space>
+        <h2 style={{ fontFamily: "Poppins-Medium",color: 'white' }}>Button Disabled</h2>
+        <Space>
+          <Button size={"sm"} disabled={true}>Confirm</Button>
+          <Button size={"md"} disabled={true}>Confirm</Button>
+          <Button size={"lg"} disabled={true}>Confirm</Button>
+        </Space>
+      </>
+    )
   }
 };
\ No newline at end of file

src/components/Base/Button/Index.jsx

@@ -4,7 +4,7 @@ import styles from './styles.module.css';
 const Button = ({ loading, size, disabled, children, ...props }) => {
 
     return (
-        <button className={styles.button} {...props}>{children}</button>
+        <button className={`${styles.button} ${styles[size]} ${disabled ? styles['disabled'] : ''}`} {...props}>{loading ? <div className={styles.loader}></div> : null}{children}</button>
     )
 }
 

src/components/Base/Button/styles.module.css

@@ -4,8 +4,56 @@
     background-color: white;
     color: black;
     border-radius: 5px;
-    padding: 0.5rem 1.5rem;
     font-family: 'Poppins-Bold';
     cursor: pointer;
-    font-size: 18px;
+    text-overflow: ellipsis;
+    white-space: wrap;
+    display: flex;
+    gap: 1rem;
+    align-items: center;
+}
+
+.sm {
+    padding: 0.5rem 1.5rem;
+    font-size: 12px;
+}
+
+.md {
+    padding: 0.5rem 2rem;
+    font-size: 16px;
+}
+
+.lg {
+    padding: 0.9rem 2.5rem;
+    font-size: 20px;
+}
+
+
+.loader {
+    width: 20px;
+    height: 20px;
+    display: inline-block;
+    border: 2px solid rgba(159, 159, 159, 0.582);
+    border-radius: 50%;
+    border-top: 2px solid rgb(51, 51, 221);
+    animation: rotate 0.5s linear infinite;
+}
+
+.disabled{
+    background-color: rgb(168, 166, 166);
+    opacity: 0.5;
+    color: white;
+    cursor: not-allowed;
+}
+
+
+@keyframes rotate {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+
+    }
 }
\ No newline at end of file

src/components/Base/Legend/Index.jsx

 import styles from './styles.module.css';
 import PropTypes from 'prop-types';
 
-const Legend = ({ children, type="selected" }) => {
+const Legend = ({ children, type="available" }) => {
 
   return (
     <div className={styles['legend-wrapper']}>

src/components/Base/Legend/Legend.stories.jsx

@@ -3,32 +3,35 @@ import Legend from "./Index"
 export default {
     title: "Component/Base/Legend",
     tags: ["autodocs"],
-    component: Legend
-}
+    component: Legend,
+    argTypes: {
+        type: {
+            control: { type: 'select' },
+            options: ['available', 'reserved', 'selected'],
+            description: "Seat's status",
 
-export const Selected = {
-    args: {
-        type: 'selected'
+        },
     },
-    render: (args) => {
-       return <Legend type={args.type}>Selected</Legend>
+}
+
+const getStoryTitle = (type) => {
+    switch (type) {
+        case 'selected':
+            return "Selected";
+        case 'reserved':
+            return 'Reserved';
+        case 'available':
+            return 'Available';
+        default:
+            return "Available"
     }
-};
+}
+
+export const Default = {
 
-export const Reserved = {
-    args: {
-        type: 'reserved'
-    },
     render: (args) => {
-       return <Legend type={args.type}>Reserved</Legend>
+        return <Legend type={args.type}>{getStoryTitle(args.type)}</Legend>
     }
 };
 
-export const Available = {
-    args: {
-        type: 'available'
-    },
-    render: (args) => {
-       return <Legend type={args.type}>available</Legend>
-    }
-};
\ No newline at end of file
+

src/components/Layout/BookingWrapper/Index.jsx

-import PropTypes from 'prop-types';
+import styles from './styles.module.css';
 
 const BookingWrapper = () => {
-    const aisleIndex = 4;
-    const seatData = Array.from({ length: 10 }, (_, index) => ({
+    const aisleIndex = 5;
+    const seatData = Array.from({ length: 11 }, (_, index) => ({
         id: index + 1,
         status: 'available'
     }));
@@ -12,38 +12,38 @@ const BookingWrapper = () => {
 
     return (
         <div>
-            <div className='theatre'>
-                {Array.from({ length: 5 }, (_, row_index) => (
-                    <div className='seat-row'>
+            <div className={styles['theatre']}>
+                {Array.from({ length: 6 }, (_, row_index) => (
+                    <div className={styles['seat-row']}>
                         {seatData.map((_, column_index) => {
                             const isFirstRow = row_index === 0;
-                            const isLastRow = row_index === seatData.row - 1;
+                            const isLastRow = row_index === 6 - 1;
 
                             if (isLeftBlock(column_index) && column_index === 0 && (isFirstRow || isLastRow)) {
-                                return <div key={`gap-left-${row_index}-${column_index}`} className="seat-gap" />;
+                                return <div key={`gap-left-${row_index}-${column_index}`} className={styles["seat-gap"]} />;
                             }
 
                             if (
                                 isRightBlock(column_index) &&
-                                column_index === seatData.id - 1 &&
+                                column_index === seatData.length - 1 &&
                                 (isFirstRow || isLastRow)
                             ) {
-                                return <div key={`gap-right-${row_index}-${row_index}`} className="seat-gap" />;
+                                return <div key={`gap-right-${row_index}-${row_index}`} className={styles["seat-gap"]} />;
                             }
+
                             if (column_index == aisleIndex) {
                                 return (
-                                    <div className='aisle'></div>
+                                    <div className={styles['aisle']}></div>
                                 )
                             }
                             return (
-                                <div className='column'></div>
+                                <div className={styles['seat']}></div>
                             )
                         })}
                     </div>
                 ))}
             </div>
         </div>
-
     )
 }
 

src/components/Layout/BookingWrapper/Seat.stories.jsx

 import Seat from './Seat';
 
 export default {
-    tags: ["autodocs"],
-    title: "Component/Layout/BookingWrapper/Seat",
-    component: Seat
-}
-
-
-export const Available = {
-    args: {
-
+    title: 'Component/Layout/BookingWrapper/Seat',
+    component: Seat,
+    tags: ['autodocs'],
+    argTypes: {
+        status: {
+            control: { type: 'select' },
+            options: ['available', 'reserved', 'selected'], 
+        },
     },
+};
 
-    render: () => {
-        return <Seat status={"available"}/>
-    }
-}
-export const Selected = {
+export const Default = {
     args: {
-
+        status: 'available',
     },
-
-    render: () => {
-        return <Seat status={"selected"}/>
-    }
-}
-
-export const Reserved = {
-    args: {
-
-    },
-
-    render: () => {
-        return <Seat status={"reserved"}/>
-    }
-}
\ No newline at end of file
+};
\ No newline at end of file

src/components/Layout/BookingWrapper/styles.module.css

@@ -6,10 +6,74 @@
     cursor: pointer;
 }
 
-.reserved{
+
+
+.seat:hover {
+    background-color: aqua;
+}
+
+.reserved {
     background-color: gray;
+    pointer-events: none;
+
 }
 
-.selected{
+.selected {
     background-color: aqua;
+}
+
+
+.theatre {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.seat-row {
+    display: flex;
+    gap: 10px;
+}
+
+
+
+.aisle {
+    width: 30px;
+}
+
+.seat-gap {
+    width: 30px;
+    height: 20px;
+    margin: 0;
+    visibility: hidden;
+}
+
+
+
+@media screen and (min-width: 768px) {
+
+    .seat {
+        width: 30px;
+        height: 30px;
+    }
+
+    .aisle {
+        width: 40px;
+    }
+
+    .seat-gap {
+        width: 40px;
+        height: 30px;
+    }
+
+
+    .seat-row {
+        gap: 15px;
+    }
+
+    .theatre {
+        gap: 15px;
+    }
+
 }
\ No newline at end of file

src/components/Layout/Space/Index.jsx

+import styles from './styles.module.css';
+
+const Space = ({ children }) => {
+    return (
+        <div className={styles['wrapper']}>
+            {children}
+        </div>
+    )
+}
+
+export default Space;
\ No newline at end of file

src/components/Layout/Space/styles.module.css

+.wrapper{
+    display: flex;
+    gap: 2rem;
+    align-items: center;
+    flex-wrap: wrap;
+}
\ No newline at end of file