crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-17 06:56:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Wrap product card with chackra card

Browse Source
This commit is contained in:
Daniele Pancottini 2023-02-11 11:14:31 +01:00
parent 5a4c48c378
commit af4b0cea03
2 changed files with 127 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

238
site/components/product/ProductCard/ProductCard.tsx
View File

@ -6,7 +6,7 @@ import s from './ProductCard.module.css'
import Image, { ImageProps } from 'next/image' import Image, { ImageProps } from 'next/image'
import WishlistButton from '@components/wishlist/WishlistButton' import WishlistButton from '@components/wishlist/WishlistButton'
import usePrice from '@framework/product/use-price' import usePrice from '@framework/product/use-price'
import { Stack, Text, Heading, Box, useColorModeValue } from '@chakra-ui/react' import { Stack, Text, Heading, Box, useColorModeValue, Card, CardBody } from '@chakra-ui/react'
interface Props { interface Props {
className?: string className?: string
@ -42,132 +42,136 @@ const ProductCard: FC<Props> = ({
const fontColor = useColorModeValue("black", "black"); const fontColor = useColorModeValue("black", "black");
return ( return (
<Link href={`/product/${product.slug}`}> <Card>
<a className={rootClassName} aria-label={product.name} onMouseOut={() => setIsHover(false)} onMouseOver={() => setIsHover(true)}> <CardBody>
{variant === 'slim' && !isHover && ( <Link href={`/product/${product.slug}`}>
<> <a className={rootClassName} aria-label={product.name} onMouseOut={() => setIsHover(false)} onMouseOver={() => setIsHover(true)}>
<div className={s.header}> {variant === 'slim' && !isHover && (
<span>{product.name}</span> <>
</div> <div className={s.header}>
{product?.images && ( <span>{product.name}</span>
<div>
<Image
quality="85"
src={product.images[0]?.url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
layout="fixed"
{...imgProps}
/>
</div>
)}
</>
)}
{variant === 'simple' && !isHover && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0]}
/>
)}
<div className={s.imageContainer}>
{product?.images && (
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div> </div>
)}
</div>
</>
)}
{variant === 'default' && !isHover && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0] as any}
/>
)}
<div className={s.imageContainer}>
{product?.images && (
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
</div>
</>
)}
{isHover && (
<>
<Box
role={'group'}
p={6}
w={'full'}
bg={hoverCardBgColor}
zIndex={1}>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0] as any}
/>
)}
<div className={s.imageContainer}>
{product?.images && ( {product?.images && (
<div> <div>
<Image <Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85" quality="85"
layout="responsive" src={product.images[0]?.url || placeholderImg}
alt={product.name || 'Product Image'}
height={320}
width={320}
layout="fixed"
{...imgProps} {...imgProps}
/> />
</div> </div>
)} )}
</div> </>
<Stack backgroundColor={"white"} pt={10} align={'center'}> )}
<Heading color={fontColor} fontSize={'lg'} fontFamily={'body'} fontWeight={500} textAlign={"center"}>
{product.name}
</Heading>
<Stack direction={'row'} align={'center'}>
<Text color={fontColor} fontWeight={800} fontSize={'xl'}>
{`${price} ${product.price?.currencyCode}`}
</Text>
</Stack>
</Stack>
</Box>
</>
)}
</a> {variant === 'simple' && !isHover && (
</Link> <>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0]}
/>
)}
<div className={s.imageContainer}>
{product?.images && (
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
</div>
</>
)}
{variant === 'default' && !isHover && (
<>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0] as any}
/>
)}
<div className={s.imageContainer}>
{product?.images && (
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
</div>
</>
)}
{isHover && (
<>
<Box
role={'group'}
p={6}
w={'full'}
bg={hoverCardBgColor}
zIndex={1}>
{process.env.COMMERCE_WISHLIST_ENABLED && (
<WishlistButton
className={s.wishlistButton}
productId={product.id}
variant={product.variants[0] as any}
/>
)}
<div className={s.imageContainer}>
{product?.images && (
<div>
<Image
alt={product.name || 'Product Image'}
className={s.productImage}
src={product.images[0]?.url || placeholderImg}
height={540}
width={540}
quality="85"
layout="responsive"
{...imgProps}
/>
</div>
)}
</div>
<Stack backgroundColor={"white"} pt={10} align={'center'}>
<Heading color={fontColor} fontSize={'lg'} fontFamily={'body'} fontWeight={500} textAlign={"center"}>
{product.name}
</Heading>
<Stack direction={'row'} align={'center'}>
<Text color={fontColor} fontWeight={800} fontSize={'xl'}>
{`${price} ${product.price?.currencyCode}`}
</Text>
</Stack>
</Stack>
</Box>
</>
)}
</a>
</Link>
</CardBody>
</Card>
) )
} }

10
site/pages/contact.tsx
View File

@ -6,10 +6,12 @@ import { Text as TextUI } from '@components/ui'
export default function Contact() { export default function Contact() {
return ( return (
<div className="max-w-2xl mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit"> <div className="max-w-2xl mx-8 sm:mx-auto py-20 flex flex-col items-center justify-center fit">
<TextUI className='mb-5' variant="heading">Contatti</TextUI> <Box textAlign="center" mb={"10"}>
<TextUI className=""> <TextUI className='mb-5' variant="heading">Contatti</TextUI>
Puoi contattarci usando i recapiti che trovi qui sotto... <TextUI className="">
</TextUI> Puoi contattarci usando i recapiti che trovi qui sotto!
</TextUI>
</Box>
<Stack direction={['column', 'row']} spacing='24px'> <Stack direction={['column', 'row']} spacing='24px'>
<Box textAlign="center" py={10} px={6}> <Box textAlign="center" py={10} px={6}>
<AtSignIcon boxSize={'40px'} color={'orange.300'} /> <AtSignIcon boxSize={'40px'} color={'orange.300'} />