From d5868fae02566673ebb81d37e478a5270ef538f5 Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Mon, 12 Oct 2020 10:46:17 -0300 Subject: [PATCH] Product View --- .../ProductCard/ProductCard.module.css | 2 +- .../product/ProductView/ProductView.tsx | 30 +++++++++---------- pages/index.tsx | 4 +-- pages/product/[slug].tsx | 21 ++----------- 4 files changed, 20 insertions(+), 37 deletions(-) diff --git a/components/product/ProductCard/ProductCard.module.css b/components/product/ProductCard/ProductCard.module.css index b361c527d..509aaabb0 100644 --- a/components/product/ProductCard/ProductCard.module.css +++ b/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; } diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index 09b224d0f..ec97c6b19 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/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 = ({ product, productData, className }) => { +const ProductView: FC = ({ product, className }) => { const addItem = useAddItem() const { openSidebar } = useUI() const [choices, setChoices] = useState({ @@ -50,19 +41,28 @@ const ProductView: FC = ({ product, productData, className }) => { const activeSize = choices.size const activeColor = choices.color + console.log(product, product.images.edges) return (

- {productData.name} + {product.name}

- {productData.prices} + {product.prices.price.value} + {` `} + {product.prices.price.currencyCode}
-
-
+
+
+ +
+
@@ -102,7 +102,7 @@ const ProductView: FC = ({ product, productData, className }) => {
-

{productData.description}

+