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

add styles to product card, collection banner image view

Browse Source
This commit is contained in:
Meylis 2021-07-27 17:38:53 +05:00
parent 3cb83e3894
commit e027cc6483
2 changed files with 26 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/product/ProductCard/ProductCard.tsx
View File

@ -7,6 +7,7 @@ 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 ProductTag from '../ProductTag' import ProductTag from '../ProductTag'
interface Props { interface Props {
className?: string className?: string
product: Product product: Product
@ -53,6 +54,7 @@ const ProductCard: FC<Props> = ({
height={320} height={320}
width={320} width={320}
layout="fixed" layout="fixed"
objectFit="cover"
{...imgProps} {...imgProps}
/> />
)} )}

42
pages/index.tsx
View File

@ -38,27 +38,33 @@ export async function getStaticProps({
} }
export default function Home({ export default function Home({
products, categories products,
categories,
}: InferGetStaticPropsType<typeof getStaticProps>) { }: InferGetStaticPropsType<typeof getStaticProps>) {
return ( return (
<> <>
<div style={{ <div
display: 'flex', style={{
justifyContent: 'center' display: 'flex',
}}> justifyContent: 'center',
{categories.slice(0, 3).map((category: any, i: number) => ( overflowX: 'hidden',
<Link href={`/search/${category.slug}`}> height: '30%',
<a> }}
<Image >
quality="100" {categories.slice(0, 3).map((category: any, i: number) => (
src={category.assets[0].source} <Link href={`/search/${category.slug}`}>
height={category.assets[0].height} <a style={{ width: '33.33%' }}>
width={category.assets[0].width} <Image
layout="fixed" quality="100"
/> src={category.assets[0].source}
</a> height={category.assets[0].height}
</Link> width={category.assets[0].height}
))} layout="responsive"
objectFit="cover"
/>
</a>
</Link>
))}
</div> </div>
<Marquee variant="primary"> <Marquee variant="primary">
{products.slice(0, 3).map((product: any, i: number) => ( {products.slice(0, 3).map((product: any, i: number) => (