Product View

components/product/ProductCard/ProductCard.module.css

@@ -79,5 +79,5 @@
 }
 
 .wishlistButton {
-  @apply w-10 h-10 flex items-center justify-center bg-white text-black font-semibold inline-block text-sm leading-6 cursor-pointer;
+  @apply w-10 h-10 flex items-center justify-center bg-white text-black font-semibold inline-block text-xs leading-6 cursor-pointer;
 }

components/product/ProductView/ProductView.tsx

@@ -8,18 +8,9 @@ import type { Product } from '@lib/bigcommerce/api/operations/get-product'
 import useAddItem from '@lib/bigcommerce/cart/use-add-item'
 import { useUI } from '@components/ui/context'
 
-interface ProductData {
-  name: string
-  images: any
-  prices: any
-  description: string
-  colors?: any[]
-  sizes?: any[]
-}
 interface Props {
   className?: string
   children?: any
-  productData: ProductData
   product: Product
 }
 
@@ -31,7 +22,7 @@ interface Choices {
 const COLORS: Colors[] = ['pink', 'black', 'white']
 const SIZES = ['s', 'm', 'l', 'xl', 'xxl']
 
-const ProductView: FC<Props> = ({ product, productData, className }) => {
+const ProductView: FC<Props> = ({ product, className }) => {
   const addItem = useAddItem()
   const { openSidebar } = useUI()
   const [choices, setChoices] = useState<Choices>({
@@ -50,19 +41,28 @@ const ProductView: FC<Props> = ({ product, productData, className }) => {
 
   const activeSize = choices.size
   const activeColor = choices.color
+  console.log(product, product.images.edges)
 
   return (
     <div className={cn(s.root, className)}>
       <div className="absolute">
         <h1 className="px-8 py-2 bg-violet text-white font-bold text-3xl">
-          {productData.name}
+          {product.name}
         </h1>
         <div className="px-6 py-2 pb-4 bg-violet text-white font-semibold inline-block">
-          {productData.prices}
+          {product.prices.price.value}
+          {` `}
+          {product.prices.price.currencyCode}
         </div>
       </div>
-      <div className="flex-1 h-48 p-24">
+      <div className="flex-1 h-48 p-24 relative min-h-screen overflow-hidden">
-        <div className="bg-violet h-48"></div>
+        <div className="absolute z-10 inset-0 flex items-center justify-center">
+          <img
+            className="w-full object-cover"
+            src={product.images.edges[0].node.urlSmall}
+          />
+        </div>
+        <div className=" absolute inset-24 z-0 bg-violet"></div>
       </div>
       <div className="flex-1 flex flex-col">
         <section className="pb-4">
@@ -102,7 +102,7 @@ const ProductView: FC<Props> = ({ product, productData, className }) => {
           </div>
         </section>
         <section className="pb-12">
-          <p>{productData.description}</p>
+          <div dangerouslySetInnerHTML={{ __html: product.description }} />
         </section>
         <section className="pb-4">
           <Button type="button" className={s.button} onClick={addToCart}>

pages/index.tsx

@@ -20,7 +20,7 @@ export default function Home({
   brands,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   return (
-    <>
+    <div className="mt-3">
       <Grid items={products.slice(0, 3)} wrapper={ProductCard} />
       <Marquee
         items={products.slice(0, 3)}
@@ -77,7 +77,7 @@ export default function Home({
           />
         </div>
       </div>
-    </>
+    </div>
   )
 }
 

pages/product/[slug].tsx

@@ -14,25 +14,9 @@ export async function getStaticProps({
     throw new Error(`Product with slug '${params!.slug}' not found`)
   }
 
-  const productData = {
-    name: 'T-Shirt',
-    description: `
-      Nothing undercover about this tee. Nope. This is the official Bad
-      Boys tee. Printed in white or black ink on Black, Brown, or Oatmeal.
-      Like everything in this collection, it is extremely limited edition
-      and available for 10 days only. This is a limited edition production
-      run. Printing starts when the drop ends. Reminder: Bad Boys For
-      Life. Shipping may take 10+ days due to COVID-19.
-    `,
-    images: null,
-    prices: '$50',
-    colors: ['black', 'white', 'pink'],
-    sizes: ['s', 'm', 'l', 'xl', 'xxl'],
-  }
   return {
     props: {
       product,
-      productData,
     },
     revalidate: 200,
   }
@@ -49,14 +33,13 @@ export async function getStaticPaths() {
 
 export default function Slug({
   product,
-  productData,
 }: InferGetStaticPropsType<typeof getStaticProps>) {
   const router = useRouter()
 
   return router.isFallback ? (
-    <h1>Loading...</h1>
+    <h1>Loading...</h1> // TODO (BC) Add Skeleton Views
   ) : (
-    <ProductView product={product} productData={productData} />
+    <ProductView product={product} />
   )
 }