Wishlist View

components/core/UserNav/UserNav.tsx

@@ -5,7 +5,7 @@ import { Avatar } from '@components/core'
 import { Heart, Bag } from '@components/icon'
 import { useUI } from '@components/ui/context'
 import s from './UserNav.module.css'
-
+import Link from 'next/link'
 interface Props {
   className?: string
 }
@@ -34,9 +34,11 @@ const UserNav: FC<Props> = ({ className }) => {
             </span>
           )}
         </li>
-        <li className={s.item}>
-          <Heart />
-        </li>
+        <Link href="/wishlist">
+          <li className={s.item}>
+            <Heart />
+          </li>
+        </Link>
         <li className={s.item}>
           <Avatar />
         </li>

components/product/ProductView/ProductView.tsx

@@ -44,7 +44,7 @@ const ProductView: FC<Props> = ({ product, className }) => {
 
   return (
     <Container>
-      <div className="relative flex flex-row items-start overflow-hidden fit">
+      <div className="relative flex flex-row items-start overflow-hidden fit my-12">
         <div className="absolute top-0 left-0 z-50">
           <h1 className="px-6 py-2 bg-violet text-white font-bold text-3xl">
             {product.name}

components/product/Swatch/Swatch.module.css

@@ -1,7 +1,7 @@
 .root {
   @apply h-12 w-12 bg-primary text-primary rounded-full mr-3 inline-flex
   items-center justify-center cursor-pointer transition duration-75 ease-in-out
-  p-0 shadow-none border-gray-200 border;
+  p-0 shadow-none border-gray-200 border box-border;
 }
 
 .active.size {

components/wishlist/WishlistCard/WishlistCard.module.css

@@ -0,0 +1,21 @@
+.root {
+  @apply grid grid-cols-12 w-full gap-6 px-3 py-6 border-b border-primary-accent;
+
+  &:nth-child(3n + 1) {
+    & .productBg {
+      @apply bg-violet;
+    }
+  }
+
+  &:nth-child(3n + 2) {
+    & .productBg {
+      @apply bg-pink;
+    }
+  }
+
+  &:nth-child(3n + 3) {
+    & .productBg {
+      @apply bg-blue;
+    }
+  }
+}

components/wishlist/WishlistCard/WishlistCard.tsx

@@ -0,0 +1,41 @@
+import { FC } from 'react'
+import { Trash } from '@components/icon'
+import s from './WishlistCard.module.css'
+
+interface Props {
+  className?: string
+  children?: any
+  data?: ProductData
+}
+
+interface ProductData {
+  name: string
+  images: any
+  prices: any
+  path: string
+}
+
+const WishlistCard: FC<Props> = ({ className, data }) => {
+  return (
+    <div className={s.root}>
+      <div className={`col-span-3 ${s.productBg}`} />
+      <div className="col-span-7">
+        <h3 className="text-2xl mb-2">Jacket</h3>
+        <p className="mb-4">
+          Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
+        </p>
+        <button className="py-1 px-3 border border-secondary rounded-md shadow-sm">
+          Add to cart
+        </button>
+      </div>
+      <div className="col-span-2 flex flex-col justify-between">
+        <div className="flex justify-end font-bold">$ 50.00</div>
+        <div className="flex justify-end">
+          <Trash />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WishlistCard

components/wishlist/WishlistCard/index.ts

@@ -0,0 +1 @@
+export { default } from './WishlistCard'

components/wishlist/index.ts

@@ -0,0 +1 @@
+export { default as WishlistCard } from './WishlistCard'