Logout Button Component implementation

.editorconfig

+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false
\ No newline at end of file

db.json

@@ -90,19 +90,19 @@
       "selected": [
         {
           "row": 4,
-          "seat": 7
+          "seat": 3
         },
         {
-          "row": 4,
-          "seat": 8
+          "row": 2,
+          "seat": 6
         },
         {
-          "row": 4,
-          "seat": 5
+          "row": 6,
+          "seat": 6
         },
         {
-          "row": 4,
-          "seat": 6
+          "row": 5,
+          "seat": 1
         }
       ]
     },

src/App.jsx

-import "./App.css";
-import Navigates from "./Navigates";
+import { Routes, Route, Navigate } from 'react-router-dom';
+import Login from './pages/LoginPage/Index';
+import BookingPage from './pages/BookingPage/Index';
+import { getItem } from '../src/lib/localStorage';
 function App() {
+  const RequireAuth = ({ children }) => {
+    const isAuthenticated = getItem('user') ? true : false;
+    return isAuthenticated ? children : <Navigate to="/login" replace />;
+  };
+
   return (
-    <Navigates />
+    <Routes>
+      <Route path="/login" element={<Login />} />
+      <Route
+        path="/"
+        element={
+          <RequireAuth>
+            <BookingPage />
+          </RequireAuth>
+        }
+      />
+    </Routes>
   );
 }
 

src/Navigates.jsx

-import { Routes, Route, Navigate } from 'react-router-dom';
-import Login from './pages/LoginPage/Index';
-import BookingPage from './pages/BookingPage/Index';
-import { getItem } from '../src/lib/localStorage';
-
-const Navigates = () => {
-  const RequireAuth = ({ children }) => {
-    const isAuthenticated = getItem('user') ? true : false;
-    return isAuthenticated ? children : <Navigate to="/login" replace />;
-  };
-
-  return (
-    <Routes>
-      <Route path="/login" element={<Login />} />
-      <Route
-        path="/"
-        element={
-          <RequireAuth>
-            <BookingPage />
-          </RequireAuth>
-        }
-      />
-    </Routes>
-  );
-};
-
-export default Navigates;

src/components/Base/Legend/Index.jsx

-import styles from './styles.module.css';
 import PropTypes from 'prop-types';
+import styles from './styles.module.css';
 
 const Legend = ({ children, type = 'available' }) => {
   return (

src/components/Layout/BookingWrapper/Index.jsx

-import Seat from './Seat';
 import PropTypes from 'prop-types';
+import Seat from './Seat';
 import styles from './styles.module.css';
 
 const BookingWrapper = ({

src/components/Layout/BookingWrapper/Seat.jsx

-import styles from './styles.module.css';
 import PropTypes from 'prop-types';
+import styles from './styles.module.css';
 
 const Seat = ({ id, status, ...rest }) => {
   return <div {...rest} className={` ${styles[status]} ${styles.seat} `}></div>;

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

@@ -16,20 +16,6 @@
   width: 50%;
   min-width: 300px;
 }
-.clipped-glow {
-  width: 500px;
-  height: 150px;
-  background: linear-gradient(
-    to bottom,
-    #9c6ad5 40%,
-    #9c6ad5aa 20%,
-    transparent 100%
-  );
-  clip-path: path('M 30 70 Q 240 20 450 70 L 500 150 L -20 150 Z');
-  -webkit-clip-path: path('M 30 70 Q 240 20 450 70 L 500 150 L -20 150 Z');
-  position: relative;
-  z-index: 0;
-}
 
 @media screen and (min-width: 768px) {
   .title {

src/components/Shared/LogoutButton/Index.jsx

+import img from '../../../assets/images/power-button_12080802.png';
+import styles from './styles.module.css';
+
+const LogoutButton = ({ onLogout }) => {
+  return (
+    <div className={styles['logout-wrapper']}>
+      <img src={img} width={30} onClick={onLogout} title="Logout" />
+    </div>
+  );
+};
+
+export default LogoutButton;

src/components/Shared/LogoutButton/LogoutButton.stories.jsx

-import img from '../../../assets/images/power-button_12080802.png';
-
+import LogoutButton from './Index';
 export default {
-  title: 'component/Shared/LogoutButton'
-  //   tags: ['autodocs']
+  title: 'component/Shared/LogoutButton',
+  tags: ['autodocs'],
+  component: LogoutButton,
+  argTypes: {
+    onLogout: {
+      action: 'hello'
+    }
+  }
 };
 
 export const Default = {
-  args: {},
-  render: () => (
-    <>
-      <img src={img} title="logout" width={50} />
-    </>
-  )
+  args: {}
 };

src/components/Shared/LogoutButton/styles.module.css

+.logout-wrapper {
+  display: flex;
+  justify-content: end;
+  padding-top: 0.5rem;
+  padding-right: 1rem;
+  cursor: pointer;
+  box-sizing: border-box;
+}

src/components/TopLevel/LegendWrapper/Index.jsx

-import styles from './styles.module.css';
 import Legend from '../../Base/Legend/Index';
+import styles from './styles.module.css';
 const LegendWrapper = (props) => {
   return (
     <div className={styles.LegendWrapper}>

src/components/TopLevel/SeatSelectionContent/Index.jsx

+import { useState } from 'react';
+import PropTypes from 'prop-types';
 import Input from '../../Base/Input/Index';
 import Button from '../../Base/Button/Index';
 import Modal from '../../Shared/Modal/Index';
 import styles from './styles.module.css';
-import PropTypes from 'prop-types';
-import { useState } from 'react';
 
 const Index = ({ onChange, onConfirm, disabled }) => {
   const [isDisabled, setIsDisabled] = useState(true);

src/components/TopLevel/SuccessModal/Index.jsx

+import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import Lottie from 'lottie-react';
-import animationData from '../../../successSvg.json';
 import Modal from '../../Shared/Modal/Index';
 import Button from '../../Base/Button/Index';
+import animationData from '../../../assets/successSvg.json';
 import styles from './styles.module.css';
-import { useEffect, useState } from 'react';
+
 const SuccessModal = ({ onConfirm }) => {
   const [showMessage, setShowMessage] = useState(false);
 

src/lib/localStorage.js

@@ -4,7 +4,6 @@ export const setItem = (key, value) => {
 
 export const getItem = (key) => {
   const item = sessionStorage.getItem(key);
-  console.log(item, 'item');
   return item ? JSON.parse(item) : null;
 };
 

src/pages/BookingPage/Index.jsx

 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { getItem, reset, setItem } from '../../lib/localStorage';
-import { appConstants } from '../../lib/AppConstants';
-import {
-  getSelectedSeatsApi,
-  editSeatsApi,
-  createSeatApi
-} from '../../lib/api';
+
 import BookingWrapper from '../../components/Layout/BookingWrapper/Index';
 import Header from '../../components/Layout/Header/Index';
 import ConfirmSeatContent from '../../components/TopLevel/ConfirmSeatContent/Index';
@@ -14,8 +8,19 @@ import SeatSelectionContent from '../../components/TopLevel/SeatSelectionContent
 import SuccessModal from '../../components/TopLevel/SuccessModal/Index';
 import Button from '../../components/Base/Button/Index';
 import LegendWrapper from '../../components/TopLevel/LegendWrapper/Index';
+import LogoutButton from '../../components/Shared/LogoutButton/Index';
+
+import { getItem, reset, setItem } from '../../lib/localStorage';
+import { appConstants } from '../../lib/AppConstants';
+import {
+  getSelectedSeatsApi,
+  editSeatsApi,
+  createSeatApi
+} from '../../lib/api';
+
 import img from '../../assets/images/power-button_12080802.png';
 import styles from './styles.module.css';
+
 const data = [
   ['*', 1, 2, 3, '*', 4, 5, 6, '*'],
   [1, 2, 3, 4, '*', 5, 6, 7, 8],
@@ -26,6 +31,7 @@ const data = [
   [1, 2, 3, 4, '*', 5, 6, 7, 8],
   ['*', 1, 2, 3, '*', 4, 5, 6, '*']
 ];
+
 const BookingPage = () => {
   let userId = getItem(appConstants.USER);
   const navigate = useNavigate();
@@ -168,13 +174,14 @@ const BookingPage = () => {
 
   return (
     <div className={styles['seat-booking-wrapper']}>
-      <img
+      {/* <img
         src={img}
         className={styles['logout']}
         width={30}
         onClick={() => logout()}
         title="Logout"
-      />
+      /> */}
+      <LogoutButton />
       <div className={styles['screen-wrapper']}>
         <Header>Choose Seats</Header>
         <BookingWrapper

src/pages/BookingPage/styles.module.css

@@ -9,7 +9,7 @@
   width: 100%;
 }
 .screen-wrapper {
-  padding: 1em 0;
+  padding: 0.5em 0;
 }
 
 .btn-wrapper {