add solution

mate-academy · Nov 16, 2024 · cf5ed98 · cf5ed98
1 parent 58c4de5
commit cf5ed98
Show file tree

Hide file tree

Showing 19 changed files with 357 additions and 237 deletions.
diff --git a/src/App.scss b/src/App.scss
@@ -32,10 +32,18 @@ $font-weight-bold: 800;
 $font-weight-medium: 600;
 $font-weight-regular: 400;
 
+.app-container {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
 .main {
   max-width: 1136px;
   margin: 0 auto;
   font-family: $font-primary;
+  flex: 1 0 auto;
+  width: 100%;
 
   &__title {
     margin-bottom: 56px;

diff --git a/src/App.tsx b/src/App.tsx
@@ -29,23 +29,25 @@ export const App: React.FC = () => {
         <ThemeProvider>
           <FavoritesProvider>
             <CartProvider>
-              <Header ref={topRef} />
-              <main className="main">
-                <Routes>
-                  <Route path="/" element={<HomePage />} />
-                  <Route path="/phones" element={<PhonesPage />} />
-                  <Route path="/tablets" element={<TabletsPage />} />
-                  <Route path="/accessories" element={<AccessoriesPage />} />
-                  <Route
-                    path="/product/:category/:itemId"
-                    element={<ProductDetailsPage />}
-                  />
-                  <Route path="/favourites" element={<FavoritesPage />} />
-                  <Route path="/cart" element={<CartPage />} />
-                  <Route path="*" element={<h1>Page not found</h1>} />
-                </Routes>
-              </main>
-              <Footer topRef={topRef} />
+              <div className="app-container">
+                <Header ref={topRef} />
+                <main className="main">
+                  <Routes>
+                    <Route path="/" element={<HomePage />} />
+                    <Route path="/phones" element={<PhonesPage />} />
+                    <Route path="/tablets" element={<TabletsPage />} />
+                    <Route path="/accessories" element={<AccessoriesPage />} />
+                    <Route
+                      path="/product/:category/:itemId"
+                      element={<ProductDetailsPage />}
+                    />
+                    <Route path="/favourites" element={<FavoritesPage />} />
+                    <Route path="/cart" element={<CartPage />} />
+                    <Route path="*" element={<h1>Page not found</h1>} />
+                  </Routes>
+                </main>
+                <Footer topRef={topRef} />
+              </div>
             </CartProvider>
           </FavoritesProvider>
         </ThemeProvider>

diff --git a/src/components/BackButton/BackButton.tsx b/src/components/BackButton/BackButton.tsx
@@ -1,27 +1,27 @@
-import { useNavigate } from "react-router-dom";
-import  strokeLeft  from '../../../public/img/icons/StrokeLeft.svg';
+import { useNavigate } from 'react-router-dom';
+import strokeLeft from '../../../public/img/icons/StrokeLeft.svg';
 import styles from './BackButton.module.scss';
 
 export const BackButton = () => {
   const navigate = useNavigate();
   const handleBackClick = () => {
     navigate(-1);
-  }
+  };
 
   return (
     <div className={styles.backButton}>
-        <span className={styles.breadcrumbs__separator}>/</span>
-        <a
-          href="#"
-          onClick={handleBackClick}
-          aria-label="Go back"
-          className={styles.backButton__link}
-        >
-          <span className={styles.breadcrumbs__icon}>
-            <img src={strokeLeft} alt="Stroke left" />
-          </span>
-          <span className={styles.breadcrumbs__text}>Back</span>
-        </a>
-      </div>
-  )
-}
+      <span className={styles.breadcrumbs__separator}>/</span>
+      <a
+        href="#"
+        onClick={handleBackClick}
+        aria-label="Go back"
+        className={styles.backButton__link}
+      >
+        <span className={styles.breadcrumbs__icon}>
+          <img src={strokeLeft} alt="Stroke left" />
+        </span>
+        <span className={styles.breadcrumbs__text}>Back</span>
+      </a>
+    </div>
+  );
+};
diff --git a/src/components/Breadcrumbs/Breadcrumbs.tsx b/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -10,8 +10,10 @@ interface ProductDetailsPageProps {
   productDescription: Product | Product[];
 }
 
-export const Breadcrumbs: React.FC<ProductDetailsPageProps> =({ productDescription, categor = 'Favorites', }) => {
-
+export const Breadcrumbs: React.FC<ProductDetailsPageProps> = ({
+  productDescription,
+  categor = 'Favorites',
+}) => {
   const { category = categor, itemId } = useParams<{
     itemId: string;
     category?: string;
@@ -21,35 +23,38 @@ export const Breadcrumbs: React.FC<ProductDetailsPageProps> =({ productDescripti
 
   return (
     <nav className={styles.breadcrumbs}>
-        <Link to="/">
-          <img
-            src={homeIcon}
-            alt="Home"
-            className={`${styles.breadcrumbs__item} ${styles.breadcrumbs__itemHome}`}
-          />
-        </Link>
-        <span className={styles.breadcrumbs__separator}>/</span>
-
-        <img src={strokeRight} alt="Previous"></img>
-
-        <span className={styles.breadcrumbs__separator}>/</span>
-        <Link to={`/${categoryName}`}
-          className={`${styles.breadcrumbs__item} ${styles.itemCategory}`}>
-          {categoryName}
-        </Link>
-        <span className={styles.breadcrumbs__separator}>/</span>
-
-        {itemId && (
-          <>
-            <img src={strokeRight} alt="Previous"></img>
-            <span className={styles.breadcrumbs__separator}>/</span>
-            <Link to={`/product/${(productDescription as Product).id}`}
-              className={`${styles.breadcrumbs__item} ${styles.itemName}`}>
-              {(productDescription as Product).name}
-            </Link>
-          </>
-        )}
-      </nav>
-
-  )
-}
+      <Link to="/">
+        <img
+          src={homeIcon}
+          alt="Home"
+          className={`${styles.breadcrumbs__item} ${styles.breadcrumbs__itemHome}`}
+        />
+      </Link>
+      <span className={styles.breadcrumbs__separator}>/</span>
+
+      <img src={strokeRight} alt="Previous"></img>
+
+      <span className={styles.breadcrumbs__separator}>/</span>
+      <Link
+        to={`/${categoryName}`}
+        className={`${styles.breadcrumbs__item} ${styles.itemCategory}`}
+      >
+        {categoryName}
+      </Link>
+      <span className={styles.breadcrumbs__separator}>/</span>
+
+      {itemId && (
+        <>
+          <img src={strokeRight} alt="Previous"></img>
+          <span className={styles.breadcrumbs__separator}>/</span>
+          <Link
+            to={`/product/${(productDescription as Product).id}`}
+            className={`${styles.breadcrumbs__item} ${styles.itemName}`}
+          >
+            {(productDescription as Product).name}
+          </Link>
+        </>
+      )}
+    </nav>
+  );
+};
diff --git a/src/components/ErrorMessage/ErrorMessage.tsx b/src/components/ErrorMessage/ErrorMessage.tsx
@@ -5,9 +5,5 @@ interface ErrorMessageProps {
 }
 
 export const ErrorMessage: React.FC<ErrorMessageProps> = ({ message }) => {
-  return (
-    <div className={styles.errorMessage}>
-      {message}
-    </div>
-  )
-}
+  return <div className={styles.errorMessage}>{message}</div>;
+};
diff --git a/src/components/Pagination/Pagination.module.scss b/src/components/Pagination/Pagination.module.scss
@@ -32,17 +32,16 @@ $font-weight-regular: 400;
 
 .paginationContainer {
   position: relative;
-  max-width: 1136px;
+  width: 1136px;
   overflow-x: auto;
-  padding-bottom: 12px;
-  margin-bottom: 80px;
+  padding: 0 20px;
 }
 
 .paginationContainer::before,
 .paginationContainer::after {
   content: "›";
   position: absolute;
-  top: 40%;
+  top: 25%;
   font-size: 24px;
   color: rgba(154, 205, 50, 0.3);
   transform: translateY(-50%);
@@ -60,29 +59,30 @@ $font-weight-regular: 400;
 
 .pagination {
   display: flex;
-  flex-wrap: wrap;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   margin-bottom: 80px;
   max-width: 1136px;
   box-sizing: border-box;
-  overflow-x: auto;
   padding-bottom: 10px;
   scrollbar-color: #7aaf4c #1c1c1c;
   scrollbar-width: thin;
 
-
   &__controls {
     display: flex;
+    flex-wrap: wrap;
     gap: 10px;
-    max-width: 100%;
     justify-content: center;
+    padding: 10px 0;
+    max-width: 800px;
   }
 
   &__button {
     padding: 8px 12px;
     cursor: pointer;
     flex-shrink: 0;
+    margin: 5px;
   }
 }
 

diff --git a/src/components/ProductFilter/ProductFilter.tsx b/src/components/ProductFilter/ProductFilter.tsx
@@ -22,10 +22,17 @@ export const ProductFilter: React.FC<ProductFilterProps> = ({
           className={styles.sorting__select}
           id="sort-select"
           value={sort}
-          onChange={onSortChange}>
-          <option className={styles.sorting__option} value="age">Newest</option>
-          <option className={styles.sorting__option} value="title">Alphabetically</option>
-          <option className={styles.sorting__option} value="price">Cheapest</option>
+          onChange={onSortChange}
+        >
+          <option className={styles.sorting__option} value="age">
+            Newest
+          </option>
+          <option className={styles.sorting__option} value="title">
+            Alphabetically
+          </option>
+          <option className={styles.sorting__option} value="price">
+            Cheapest
+          </option>
         </select>
       </div>
     </div>
@@ -34,18 +41,29 @@ export const ProductFilter: React.FC<ProductFilterProps> = ({
       <p className={styles.itemsPerPage__label}>Items on page</p>
       <div className={styles.itemsPerPage__selectContainer}>
         <select
-          id='per-page'
+          id="per-page"
           className={styles.itemsPerPage__select}
           value={itemsPerPage}
           onChange={onItemsPerPageChange}
-          aria-label='Select number of items per page'>
-          <option className={styles.itemsPerPage__option} value={4}>4</option>
-          <option className={styles.itemsPerPage__option} value={8}>8</option>
-          <option className={styles.itemsPerPage__option} value={16}>16</option>
-          <option className={styles.itemsPerPage__option} value={Number.MAX_SAFE_INTEGER}>All</option>
+          aria-label="Select number of items per page"
+        >
+          <option className={styles.itemsPerPage__option} value={4}>
+            4
+          </option>
+          <option className={styles.itemsPerPage__option} value={8}>
+            8
+          </option>
+          <option className={styles.itemsPerPage__option} value={16}>
+            16
+          </option>
+          <option
+            className={styles.itemsPerPage__option}
+            value={Number.MAX_SAFE_INTEGER}
+          >
+            All
+          </option>
         </select>
       </div>
     </div>
   </div>
 );
-
diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx
@@ -20,5 +20,3 @@ export const Search: React.FC<SearchProps> = ({ value, onChange }) => {
     </div>
   );
 };
-
-