diff --git a/components/icons/Star.tsx b/components/icons/Star.tsx new file mode 100644 index 000000000..d98f55e1d --- /dev/null +++ b/components/icons/Star.tsx @@ -0,0 +1,16 @@ +const Star = ({ ...props }) => { + return ( + + + + ) +} + +export default Star diff --git a/components/icons/index.ts b/components/icons/index.ts index eb44f5e95..58e3f9b0a 100644 --- a/components/icons/index.ts +++ b/components/icons/index.ts @@ -13,6 +13,7 @@ export { default as RightArrow } from './RightArrow' export { default as Info } from './Info' export { default as Vercel } from './Vercel' export { default as MapPin } from './MapPin' +export { default as Star } from './Star' export { default as CreditCard } from './CreditCard' export { default as ChevronUp } from './ChevronUp' export { default as ChevronLeft } from './ChevronLeft' diff --git a/components/product/ProductSlider/ProductSlider.module.css b/components/product/ProductSlider/ProductSlider.module.css index e1d18c7d0..8db6561a7 100644 --- a/components/product/ProductSlider/ProductSlider.module.css +++ b/components/product/ProductSlider/ProductSlider.module.css @@ -43,8 +43,9 @@ } .thumb { - @apply transition-transform transition-colors ease-linear duration-75 overflow-hidden - inline-block cursor-pointer h-full; + @apply transition-transform transition-colors + ease-linear duration-75 overflow-hidden inline-block + cursor-pointer h-full; width: 125px; width: calc(100% / 3); } @@ -53,6 +54,10 @@ @apply bg-white; } +.thumb img { + height: 85% !important; +} + .album { @apply bg-violet-dark; overflow-y: hidden; @@ -72,7 +77,7 @@ } .album { - height: 235px; + height: 182px; } .thumb { width: 235px; diff --git a/components/product/ProductView/ProductView.module.css b/components/product/ProductView/ProductView.module.css index ff3d834aa..80c534924 100644 --- a/components/product/ProductView/ProductView.module.css +++ b/components/product/ProductView/ProductView.module.css @@ -50,15 +50,10 @@ @apply absolute z-30 top-0 right-0; } -@screen md { - .button { - max-width: 300px; - } -} - @screen lg { .root { @apply grid-cols-12; + min-height: 900px; } .main { @@ -75,10 +70,10 @@ } .sidebar { - @apply col-span-4 py-12; + @apply col-span-4 py-6; } .imageContainer { - height: 600px; + max-height: 600px; } } diff --git a/components/product/ProductView/ProductView.tsx b/components/product/ProductView/ProductView.tsx index f24073fe1..50b84eb69 100644 --- a/components/product/ProductView/ProductView.tsx +++ b/components/product/ProductView/ProductView.tsx @@ -12,7 +12,8 @@ import { useAddItem } from '@framework/cart' import Collapse from '@components/ui/Collapse' import ProductCard from '@components/product/ProductCard' import WishlistButton from '@components/wishlist/WishlistButton' - +import rangeMap from '@lib/range-map' +import { Star } from '@components/icons' interface Props { children?: any product: Product @@ -97,8 +98,8 @@ const ProductView: FC = ({ product, relatedProducts }) => { className={s.img} src={image.url!} alt={image.alt || 'Product Image'} - width={1050} - height={1050} + width={600} + height={600} priority={i === 0} quality="85" /> @@ -148,10 +149,26 @@ const ProductView: FC = ({ product, relatedProducts }) => { ))} -
+
+
+ {/** + * TODO make component Rate stars={} + */} +
+ {rangeMap(4, (i) => ( + + + + ))} + + + +
+
36 reviews
+
@@ -182,7 +200,7 @@ const ProductView: FC = ({ product, relatedProducts }) => {
Related Products -
+
{relatedProducts.map((p) => (
= ({ product, relatedProducts }) => { product={p} key={p.path} variant="simple" - className="animated fadeIn w-12" + className="animated fadeIn" imgProps={{ - width: 275, - height: 275, + width: 182, + height: 182, }} />