Merge pull request #45 from fe-may23-dreamTeam/dev-contacts-layout

add route for contacts, add breadcrumbs for ContactsPage and CartPage
fe-may23-dreamTeam · Sep 12, 2023 · d055a38 · d055a38
2 parents 4722ef3 + c4ae6f4
commit d055a38
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 16 deletions.
diff --git a/src/Root.tsx b/src/Root.tsx
@@ -5,6 +5,7 @@ import {
   Route,
   Routes,
 } from 'react-router-dom';
+import { Toaster } from 'react-hot-toast';
 import App from './App';
 import CatalogPage from './pages/CatalogPage';
 import NotFoundPage from './pages/NotFoundPage';
@@ -13,7 +14,7 @@ import ScrollToTop from './components/ScrollToTop';
 import FavouritesPage from './pages/FavouritesPage';
 import CartPage from './pages/CartPage';
 import HomePage from './pages/HomePage';
-import { Toaster } from 'react-hot-toast';
+import ContactsPage from './pages/ContactsPage';
 
 export const Root = () => (
   <BrowserRouter>
@@ -37,6 +38,7 @@ export const Root = () => (
         </Route>
         <Route path="favourites" element={<FavouritesPage />} />
         <Route path="cart" element={<CartPage />} />
+        <Route path="contacts" element={<ContactsPage />} />
         <Route path="*" element={<NotFoundPage />} />
       </Route>
     </Routes>

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -34,12 +34,12 @@ export const Footer = () => {
               </li>
 
               <li>
-                <a
+                <NavLink
                   className="duration-150 select-none uppercase text-secondary font-extrabold text-xs hover:text-primary active:text-primary focus:text-primary font-Mont"
-                  href="#"
+                  to="/contacts"
                 >
                   Contacts
-                </a>
+                </NavLink>
               </li>
 
               <li>

diff --git a/src/pages/CartPage.tsx b/src/pages/CartPage.tsx
@@ -1,18 +1,17 @@
 import classNames from 'classnames';
-import React, { useState } from 'react';
-import { FiChevronLeft } from 'react-icons/fi';
-import { NavLink, useNavigate } from 'react-router-dom';
+import { useState } from 'react';
+import { NavLink } from 'react-router-dom';
 import { Button } from '../components/Button';
 import CartItem from '../components/CartItem';
 import { CheckoutModal } from '../components/CheckoutModal';
 import { clearCart, useAppDispatch, useAppSelector } from '../redux';
 import { getTotalProductsCost } from '../utils/getTotalCost';
 import { getTotalItemsCount } from '../utils/getTotalItemsCount';
+import BreadCrumb from '../components/BreadCrumb';
 
 const CartPage = () => {
   const { items: cartItems } = useAppSelector((state) => state.cart);
   const [showModal, setShowModal] = useState<boolean>(false);
-  const navigate = useNavigate();
   const dispatch = useAppDispatch();
 
   const totalCost = getTotalProductsCost(cartItems);
@@ -36,17 +35,12 @@ const CartPage = () => {
       )}
       <main
         className={classNames(
-          'container mx-auto flex flex-col px-4 py-6 tablet:px-6 desktop:w-[1200px] desktop:px-8',
+          'container mx-auto flex flex-col p-4 pb-6 tablet:px-6 desktop:w-[1200px]',
           { 'blur pointer-events-none': showModal },
         )}
       >
-        <span
-          onClick={() => navigate(-1)}
-          className="select-none cursor-pointer flex items-center gap-1"
-        >
-          <FiChevronLeft />
-          Back
-        </span>
+        <BreadCrumb />
+
         <div className="mb-8">
           <h1 className="mb-2 text-[32px] font-extrabold leading-[41px] tracking-[0.32px] tablet:mt-10 tablet:text-5xl">
             Cart

diff --git a/src/pages/ContactsPage.tsx b/src/pages/ContactsPage.tsx
@@ -0,0 +1,77 @@
+import BreadCrumb from '../components/BreadCrumb';
+
+const ContactsPage = () => {
+  return (
+    <main
+      className="container mx-auto flex flex-col items-center
+        tablet:items-start p-4 pb-6 tablet:px-6 desktop:w-[1200px]"
+    >
+      <BreadCrumb />
+
+      <div className="mb-8">
+        <h1 className="mb-2 text-[32px] font-extrabold leading-[41px] tracking-[0.32px] tablet:mt-10 tablet:text-5xl">
+          Our Team
+        </h1>
+      </div>
+
+      <section className="grid grid-cols-1 gap-4 tablet:grid-cols-2 desktop:grid-cols-4">
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+        <article
+          className="card box-border p-8 relative
+            border border-secondary rounded-lg
+            min-w-[272px]  max-h-[440px]
+            bg-white
+            hover:shadow-card tablet:max-h-[506px]"
+        >
+          <h2>Olena Vats</h2>
+        </article>
+      </section>
+    </main>
+  );
+};
+
+export default ContactsPage;