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

6
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,6 +42,8 @@ const ProductCard: FC<Props> = ({
const fontColor = useColorModeValue("black", "black"); const fontColor = useColorModeValue("black", "black");
return ( return (
<Card>
<CardBody>
<Link href={`/product/${product.slug}`}> <Link href={`/product/${product.slug}`}>
<a className={rootClassName} aria-label={product.name} onMouseOut={() => setIsHover(false)} onMouseOver={() => setIsHover(true)}> <a className={rootClassName} aria-label={product.name} onMouseOut={() => setIsHover(false)} onMouseOver={() => setIsHover(true)}>
{variant === 'slim' && !isHover && ( {variant === 'slim' && !isHover && (
@ -168,6 +170,8 @@ const ProductCard: FC<Props> = ({
</a> </a>
</Link> </Link>
</CardBody>
</Card>
) )
} }

4
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">
<Box textAlign="center" mb={"10"}>
<TextUI className='mb-5' variant="heading">Contatti</TextUI> <TextUI className='mb-5' variant="heading">Contatti</TextUI>
<TextUI className=""> <TextUI className="">
Puoi contattarci usando i recapiti che trovi qui sotto... Puoi contattarci usando i recapiti che trovi qui sotto!
</TextUI> </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'} />