added theme context

.prettierignore

@@ -0,0 +1 @@
+{}

.prettierrc

@@ -5,5 +5,5 @@
     "tabWidth": 2,
     "endOfLine": "auto",
     "semi": true,
-    "printWidth": 120
+    "printWidth": 130
 }

src/App.tsx

@@ -1,11 +1,15 @@
 import { RouterProvider } from 'react-router-dom';
+import { ThemeContextProvider } from './contexts';
 import { AppRouter } from './router';
+
 import 'bootstrap/dist/css/bootstrap.css';
 
 function App() {
   return (
     <>
-      <RouterProvider router={AppRouter} />
+      <ThemeContextProvider>
+        <RouterProvider router={AppRouter} />
+      </ThemeContextProvider>
     </>
   );
 }

src/components/CustomPagination/CustomPagination.tsx

@@ -52,7 +52,7 @@ export const CustomPagination: FC<customPaginationProps> = ({ page, setPageHandl
   );
   return (
     <div className={styles.paginationWrapper}>
-      <Pagination size="sm" className={styles["pagination-custom"]} >
+      <Pagination size="sm" className={styles['pagination-custom']}>
         {items}
       </Pagination>
     </div>

src/components/index.ts

@@ -1,2 +1,3 @@
-export * from './layout';
+export * from "./CustomPagination";
 export * from './Loader';
+export * from './layout';

src/components/layout/CustomOffcanvas/CustomOffcanvas.tsx

@@ -1,35 +1,43 @@
-import { FC } from "react";
-import { Offcanvas } from "react-bootstrap";
-import { Moon, Sun } from "react-feather";
-import ReactFocusLock from "react-focus-lock";
-import styles from "./customOffcanvas.module.css";
+import { FC, useContext } from 'react';
+import { Offcanvas } from 'react-bootstrap';
+import { Moon, Sun } from 'react-feather';
+import ReactFocusLock from 'react-focus-lock';
+import { ThemeContext } from '../../../contexts';
+import styles from './customOffcanvas.module.css';
 
-type OffcanvasProps = {
-    name:string
-    show:boolean
-    handleShow:()=>void
-    handleClose:()=>void
-
-}
+type CustomOffcanvasProps = {
+  name: string;
+  show: boolean;
+  handleShow: () => void;
+  handleClose: () => void;
+};
 
+export const CustomOffcanvas: FC<CustomOffcanvasProps> = ({ show, handleShow, handleClose, ...props }) => {
+  const { isDark, setIsDark } = useContext(ThemeContext);
 
-export const CustomOffcanvas:FC<OffcanvasProps> = ({  show, handleShow, handleClose, ...props }) => {
-
-
-    return (
-      <>
-        <Offcanvas show={show} onHide={handleClose} {...props} placement={"end"}>
-       <ReactFocusLock>
+  return (
+    <>
+        <ReactFocusLock>
+      <Offcanvas show={show} onHide={handleClose} className={styles.offcanvas} {...props} placement={'end'}>
           <Offcanvas.Header closeButton>
             <Offcanvas.Title>Menu:</Offcanvas.Title>
           </Offcanvas.Header>
           <Offcanvas.Body>
-
-           <button className={styles.button}  ><Moon size={36}/></button>
-           <button className={styles.button}><Sun size={36}/></button>
+            <div className={styles["menu-item"]}>
+              Toggle page theme:
+               {isDark ? (
+              <button className={styles.button}>
+                <Sun size={36} onClick={() => setIsDark(isDark)} />
+              </button>
+            ) : (
+              <button className={styles.button} onClick={() => setIsDark(isDark)}>
+                <Moon size={36} />
+              </button>
+            )}
+            </div>     
           </Offcanvas.Body>
+      </Offcanvas>
         </ReactFocusLock>
-        </Offcanvas>
-      </>
-    );
-  }
+    </>
+  );
+};

src/components/layout/CustomOffcanvas/customOffcanvas.module.css

@@ -2,3 +2,14 @@
   background: none;
   text-decoration: none;
 }
+
+.menu-item {
+  display: flex;
+  align-items: center;
+  gap: 25px;
+  font-size: 18px;
+}
+
+.offcanvas {
+  width: 200px;
+}

src/components/layout/CustomOffcanvas/index.ts

@@ -1 +1 @@
-export * from "./CustomOffcanvas";
+export * from './CustomOffcanvas';

src/components/layout/Header/Header.tsx

@@ -7,7 +7,7 @@ import styles from './header.module.css';
 
 export const Header: FC = () => {
   const [show, setShow] = useState(false);
-  
+
   const handleClose = () => setShow(false);
   const handleShow = () => setShow(true);
   return (
@@ -20,8 +20,8 @@ export const Header: FC = () => {
         <button className={styles.menuButton} onClick={handleShow}>
           <Menu className={styles.menu} color="#ffffff" />
         </button>
-        <CustomOffcanvas  name={"hamburger-menu"} show={show} handleClose={handleClose} handleShow={handleShow} />
       </header>
+        <CustomOffcanvas name={'hamburger-menu'} show={show} handleClose={handleClose} handleShow={handleShow} />
     </>
   );
 };

src/contexts/ThemeContext/ThemeContext.tsx

@@ -0,0 +1,43 @@
+import { FC, PropsWithChildren, createContext, useEffect, useState } from 'react';
+
+type ThemeContextType = {
+  isDark: boolean;
+  setIsDark: (isDark: boolean) => void;
+};
+
+export const ThemeContext = createContext<ThemeContextType>({
+  isDark: true,
+  setIsDark: (isDark: boolean) => {
+    return isDark;
+  },
+});
+
+export const ThemeContextProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [isDark, setIsDark] = useState(true);
+
+  useEffect(() => {
+    const theme = window.localStorage.getItem('theme');
+    if (theme) {
+      setIsDark(!(theme === 'light'));
+    }
+  }, []);
+
+  useEffect(() => {
+    document.body.setAttribute('data-bs-theme', `${isDark ? 'dark' : 'light'}`);
+  }, [isDark]);
+
+  const isDarkHandler = (isDark: boolean) => {
+    setIsDark(!isDark);
+  };
+
+  return (
+    <ThemeContext.Provider
+      value={{
+        isDark: isDark,
+        setIsDark: isDarkHandler,
+      }}
+    >
+      {children}
+    </ThemeContext.Provider>
+  );
+};

src/contexts/ThemeContext/index.ts

@@ -0,0 +1 @@
+export * from './ThemeContext';

src/contexts/index.ts

@@ -0,0 +1 @@
+export * from './ThemeContext';

src/hooks/useBeerDetails.ts

@@ -4,7 +4,7 @@ import { httpClient } from '../common';
 import { BeerType, beerDataDTO } from '../types';
 import { beerDetailsMapper } from './beerDetailsMapper';
 
-export const useBeerDetails = (id = '1') => {
+export const useBeerDetails = (id="1") => {
   const [beerDetails, setBeerDetails] = useState<BeerType>();
   const [isLoading, setIsLoading] = useState(false);
 

src/modules/BeerBrowser/BeerBrowser.tsx

@@ -2,14 +2,13 @@ import { AxiosResponse } from 'axios';
 import { FC, useEffect, useState } from 'react';
 import { Container } from 'react-bootstrap';
 import { httpClient } from '../../common';
-import { Loader } from '../../components';
-import { CustomPagination } from '../../components/CustomPagination';
+import { CustomPagination, Loader } from '../../components';
 import { BeerType, beerDataDTO } from '../../types';
 import { BeerCard } from './BeerCard';
 import styles from './beerBrowser.module.css';
 import { beerDataMapper } from './beerDataMapper';
 
- const BeerBrowser: FC = () => {
+const BeerBrowser: FC = () => {
   const [isLoading, setIsLoading] = useState(false);
   const [page, setPage] = useState(1);
   const setPageHandler = (page: number) => {
@@ -38,9 +37,7 @@ import { beerDataMapper } from './beerDataMapper';
         <div>
           <Container className={styles.beerCardsContainer}>
             {beerData?.map((beer) => {
-              return (
-                <BeerCard name={beer.name} tagline={beer.tagline} image={beer.imageUrl} id={beer.id} key={beer.id} />
-              );
+              return <BeerCard name={beer.name} tagline={beer.tagline} image={beer.imageUrl} id={beer.id} key={beer.id} />;
             })}
           </Container>
           <CustomPagination page={page} setPageHandler={setPageHandler} />
@@ -50,4 +47,4 @@ import { beerDataMapper } from './beerDataMapper';
   );
 };
 
-export default BeerBrowser
+export default BeerBrowser;

src/modules/BeerBrowser/BeerCard/BeerCard.tsx

@@ -10,12 +10,7 @@ type BeerCardProps = {
   id: number;
 };
 
-export const BeerCard: FC<BeerCardProps> = ({
-  image = '',
-  name = '',
-  tagline = '',
-  id,
-}) => {
+export const BeerCard: FC<BeerCardProps> = ({ image, name, tagline, id }) => {
   const navigate = useNavigate();
   const beerCardHandler = (id: number) => {
     navigate(`/details/${id}`);

src/modules/BeerBrowser/index.ts

@@ -1 +0,0 @@
-export * from './BeerBrowser';

src/modules/BeerDetails/BeerDetails.tsx

@@ -8,7 +8,7 @@ import { IngredientsInfo } from './IngredientsInfo';
 import styles from './beerDetails.module.css';
 
 const BeerDetails: FC = () => {
-  const { id } = useParams();
+  const { id} = useParams();
   const { beerDetails, isLoading } = useBeerDetails(id);
 
   if (!beerDetails) {
@@ -17,17 +17,20 @@ const BeerDetails: FC = () => {
 
   return (
     <>
-    {isLoading ? (
-      <Loader />
+      {isLoading ? (
+        <Loader />
       ) : (
         <div className={`${styles.wrapper} `}>
+       <div className={styles["flex-column"]}>
           <BeerInfo beerDetails={beerDetails} />
+
+          </div>
           <Card.Img variant="top" src={beerDetails?.imageUrl} className={styles.detailsImage} />
           <IngredientsInfo beerDetails={beerDetails} />
         </div>
       )}
-      </>
+    </>
   );
 };
 
-export default BeerDetails
+export default BeerDetails;

src/modules/BeerDetails/beerDetails.module.css

@@ -98,3 +98,9 @@ h3 {
   font-size: 16px;
   font-weight: bold;
 }
+
+.flex-column {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}

src/router/AppRouter.tsx

@@ -2,9 +2,8 @@ import { Suspense, lazy } from 'react';
 import { createBrowserRouter } from 'react-router-dom';
 import { Layout, Loader } from '../components';
 import { ErrorPage } from './ErrorPage';
-const BeerBrowser = lazy(()=> import ("../modules/BeerBrowser/BeerBrowser"))
-const BeerDetails = lazy(()=> import ("../modules/BeerDetails/BeerDetails"))
-
+const BeerBrowser = lazy(() => import('../modules/BeerBrowser/BeerBrowser'));
+const BeerDetails = lazy(() => import('../modules/BeerDetails/BeerDetails'));
 
 export const AppRouter = createBrowserRouter([
   {