Wishlist View

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'