Merge branch 'master' of https://github.com/okbel/e-comm-example

components/core/Navbar/Navbar.tsx

@@ -20,7 +20,7 @@ const Navbar: FC<Props> = ({ className }) => {
               <Logo />
             </a>
           </Link>
-          <nav className="space-x-4 ml-6 sm:hidden lg:block">
+          <nav className="space-x-4 ml-6 hidden lg:block">
             <Link href="/">
               <a className={s.link}>All</a>
             </Link>
@@ -33,7 +33,7 @@ const Navbar: FC<Props> = ({ className }) => {
           </nav>
         </div>
 
-        <div className="lg:flex flex-1 justify-center sm:hidden">
+        <div className="flex-1 justify-center hidden lg:flex">
           <Searchbar />
         </div>
 
@@ -48,7 +48,7 @@ const Navbar: FC<Props> = ({ className }) => {
         </div>
       </div>
 
-      <div className="sm:flex pb-4 lg:px-6 lg:hidden">
+      <div className="flex pb-4 lg:px-6 lg:hidden">
         <Searchbar />
       </div>
     </div>

components/core/UserNav/UserNav.module.css

@@ -15,3 +15,12 @@
     @apply mr-0;
   }
 }
+
+.dropdownMenu {
+  @apply absolute right-0 mt-2 w-screen max-w-xs sm:px-0 z-50 border border-accents-1;
+  max-width: 160px;
+
+  & .link {
+    @apply px-6 py-3 block space-y-1 hover:bg-accents-1 transition ease-in-out duration-150 text-base leading-6 font-medium text-gray-900;
+  }
+}

components/core/UserNav/UserNav.tsx

@@ -1,4 +1,4 @@
-import { FC } from 'react'
+import { FC, useState } from 'react'
 import cn from 'classnames'
 import useCart from '@lib/bigcommerce/cart/use-cart'
 import { Avatar } from '@components/core'
@@ -17,6 +17,7 @@ const countItems = (count: number, items: any[]) =>
 
 const UserNav: FC<Props> = ({ className }) => {
   const { data } = useCart()
+  const [displayDropdown, setDisplayDropdown] = useState(false)
   const { openSidebar, closeSidebar, displaySidebar } = useUI()
   const itemsCount = Object.values(data?.line_items ?? {}).reduce(countItems, 0)
 
@@ -39,10 +40,33 @@ const UserNav: FC<Props> = ({ className }) => {
             <Heart />
           </li>
         </Link>
-        <li className={s.item}>
+        <li
+          className={s.item}
+          onClick={() => {
+            setDisplayDropdown((i) => !i)
+          }}
+        >
           <Avatar />
         </li>
       </ul>
+
+      {displayDropdown && (
+        <div className={s.dropdownMenu}>
+          <div className="shadow-lg overflow-hidden">
+            <nav className="relative grid bg-primary py-2">
+              <Link href="#">
+                <a className={s.link}>My Purchases</a>
+              </Link>
+              <Link href="#">
+                <a className={s.link}>My Account</a>
+              </Link>
+              <Link href="#">
+                <a className={cn(s.link, 'mt-4')}>Logout</a>
+              </Link>
+            </nav>
+          </div>
+        </div>
+      )}
     </nav>
   )
 }

components/product/ProductCard/ProductCard.module.css

@@ -65,23 +65,40 @@
   @apply transform absolute inset-0 z-0 bg-secondary;
 }
 
-.squareBg.gray {
+.simple {
-  @apply bg-gray-300 !important;
+  & .squareBg {
+    @apply bg-gray-300 !important;
+  }
+
+  & .productTitle {
+    width: 18vw;
+    margin-top: -7px;
+    font-size: 1rem;
+  }
+
+  & .productPrice {
+    @apply text-sm;
+  }
 }
 
 .productTitle {
-  line-height: 40px;
+  @apply pt-4 leading-8;
-  width: 18vw;
+  width: 400px;
+  font-size: 2rem;
+  letter-spacing: 0.4px;
 
   & span {
-    @apply inline text-2xl leading-6 p-4 bg-primary text-primary font-bold;
+    @apply inline p-4 bg-primary text-primary font-bold;
+    font-size: inherit;
+    letter-spacing: inherit;
     box-decoration-break: clone;
     -webkit-box-decoration-break: clone;
   }
 }
 
 .productPrice {
-  @apply px-3 py-1 pb-2 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  @apply py-4 px-4 bg-primary text-base font-semibold inline-block text-sm leading-6;
+  letter-spacing: 0.4px;
 }
 
 .wishlistButton {

components/product/ProductCard/ProductCard.tsx

@@ -31,19 +31,21 @@ const ProductCard: FC<Props> = ({ className, product: p, variant }) => {
 
   return (
     <Link href={`product${p.path}`}>
-      <a className={cn(s.root, className)}>
+      <a
+        className={cn(s.root, { [s.simple]: variant === 'simple' }, className)}
+      >
         <div className="absolute z-10 inset-0 flex items-center justify-center">
           <img
             className="w-full object-cover"
             src={p.images.edges?.[0]?.node.urlXL}
           />
         </div>
-        <div className={cn(s.squareBg, { [s.gray]: variant === 'simple' })} />
+        <div className={s.squareBg} />
         <div className="flex flex-row justify-between box-border w-full z-10 relative">
-          <div className="">
+          <div className="absolute top-0 left-0">
-            <p className={s.productTitle}>
+            <h3 className={s.productTitle}>
               <span>{p.name}</span>
-            </p>
+            </h3>
             <span className={s.productPrice}>${p.prices?.price.value}</span>
           </div>
           <div className={s.wishlistButton}>

components/product/ProductView/ProductView.module.css

@@ -37,7 +37,9 @@
   @apply absolute top-6 left-0 z-50;
 
   & .name {
-    @apply px-6 py-2 bg-primary text-primary font-bold text-3xl;
+    @apply px-6 py-2 bg-primary text-primary font-bold;
+    font-size: 2rem;
+    letter-spacing: 0.4px;
   }
 
   & .price {

components/ui/Container/Container.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 const Container: FC<Props> = ({ children, className, el = 'div' }) => {
-  const rootClassName = cn('mx-auto max-w-7xl px-6 md:px-12', className)
+  const rootClassName = cn('mx-auto max-w-7xl px-3 md:px-6', className)
 
   let Component: React.ComponentType<React.HTMLAttributes<
     HTMLDivElement

components/ui/Grid/Grid.module.css

@@ -20,7 +20,7 @@
 }
 
 .layoutNormal {
-  @apply gap-6;
+  @apply gap-3;
 
   & > * {
     min-height: 325px;

pages/search.tsx

@@ -59,7 +59,7 @@ export default function Search({
 
   return (
     <Container>
-      <div className="grid grid-cols-12 gap-8 mt-3 mb-20">
+      <div className="grid grid-cols-12 gap-4 mt-3 mb-20">
         <div className="col-span-2">
           <ul className="mb-10">
             <li className="py-1 text-base font-bold tracking-wide">
@@ -143,6 +143,7 @@ export default function Search({
             <Grid layout="normal">
               {data.products.map(({ node }) => (
                 <ProductCard
+                  variant="simple"
                   key={node.path}
                   className="animate__animated animate__fadeIn"
                   product={node}