crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-23 04:36:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Continue Migration, almost done

Browse Source
This commit is contained in:
Daniele Pancottini
2022-12-20 19:15:40 +01:00
parent 15faacc7de
commit e5ebf60e83
11 changed files with 290 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

115
site/components/product/ProductCardRoom/ProductCardRoom.tsx
View File

@@ -7,83 +7,89 @@ import {
Text,
Stack,
Link,
} from '@chakra-ui/react';
import NextLink from "next/link"
import { Product } from '@commerce/types';
} from '@chakra-ui/react'
import NextLink from 'next/link'
import { Product } from '@commerce/types'
import style from './ProductCardRoomStyle.module.css';
import style from './ProductCardRoomStyle.module.css'
export default function ProductCardRoom(props: {
product: Product.Product,
product: Product.Product
decade: string
}) {
let historicDescription = props.product.metafields
.filter(meta => meta.key == 'descrizione_storica')
.map(meta => meta.value);
let technicalDescription = props.product.metafields
.filter(meta => meta.key == 'descrizione_tecnica')
.map(meta => meta.value);
let nationOrigin = props.product.metafields
.filter(meta => meta.key == 'nazionalit_')
.map(meta => meta.value);
let historicDescription =
props.product.metafields!.custom.descrizione_storica.value
let technicalDescription =
props.product.metafields!.custom.descrizione_tecnica.value
let nationOrigin = props.product.metafields!.custom.nazionalit_.value
return (
<Flex w="full" alignItems="center" justifyContent="center" direction={'row'}>
<Flex
w="full"
alignItems="center"
justifyContent="center"
direction={'row'}
>
<Box
maxW={'445px'}
w={'full'}
boxShadow={'2xl'}
rounded={'md'}
overflow={'hidden'}
className={style.cardBody}>
className={style.cardBody}
>
<Image
className={style.flagIcon}
src={'http://purecatamphetamine.github.io/country-flag-icons/3x2/' + nationOrigin + '.svg'}
alt={`Picture of Flag`}
rounded={'lg'}
className={style.flagIcon}
src={
'http://purecatamphetamine.github.io/country-flag-icons/3x2/' +
nationOrigin +
'.svg'
}
alt={`Picture of Flag`}
rounded={'lg'}
/>
<Image
className={style.decadeIcon}
src={'/assets/polygons/colorized/' + props.decade + '.svg'}
alt={`Picture of Decade`}
className={style.decadeIcon}
src={'/assets/polygons/colorized/' + props.decade + '.svg'}
alt={`Picture of Decade`}
/>
<Box
className={style.imageContainer}
w={'full'}
height={'220px'}
>
<NextLink href={'/product/' + props.product.slug} passHref>
<Link style={{textDecoration: 'none', height: 'inherit'}}>
<Image
src={
props.product.images[0].url
}
objectFit={'cover'}
margin={'auto'}
height={'inherit'}
/>
</Link>
</NextLink>
<Box className={style.imageContainer} w={'full'} height={'220px'}>
<NextLink href={'/product/' + props.product.slug} passHref>
<Link style={{ textDecoration: 'none', height: 'inherit' }}>
<Image
src={props.product.images[0].url}
objectFit={'cover'}
margin={'auto'}
height={'inherit'}
/>
</Link>
</NextLink>
</Box>
<Box
p={5}
className={style.captionContainer}>
<Box p={5} className={style.captionContainer}>
<Stack align={'center'}>
<Heading fontSize={'2xl'} textAlign={'center'} fontFamily={'body'} fontWeight={500}>
{props.product.name}
</Heading>
<Heading
fontSize={'2xl'}
textAlign={'center'}
fontFamily={'body'}
fontWeight={500}
>
{props.product.name}
</Heading>
</Stack>
<Stack mt={6} align={'center'}>
<Divider borderColor={'blackAlpha.600'} />
{historicDescription.pop()?.split('\n').map((line, index) => (
<Text key={index} padding={0} color={'gray.500'} fontSize={'sm'} align={'center'}>
{historicDescription.split('\n').map((line, index) => (
<Text
key={index}
padding={0}
color={'gray.500'}
fontSize={'sm'}
align={'center'}
>
{line}
</Text>
))}
@@ -93,8 +99,7 @@ export default function ProductCardRoom(props: {
</Text>
</Stack>
</Box>
</Box>
</Flex>
);
}
)
}