forked from crowetic/commerce
Latest changes
This commit is contained in:
parent
59a7dc20cd
commit
b581b1902e
@ -8,6 +8,7 @@ interface Props {
|
|||||||
className?: string
|
className?: string
|
||||||
children?: any
|
children?: any
|
||||||
node: ProductData
|
node: ProductData
|
||||||
|
variant?: 'slim'
|
||||||
}
|
}
|
||||||
|
|
||||||
interface ProductData {
|
interface ProductData {
|
||||||
@ -17,28 +18,42 @@ interface ProductData {
|
|||||||
path: string
|
path: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const ProductCard: FC<Props> = ({ className, node: productData }) => {
|
const ProductCard: FC<Props> = ({ className, node: p, variant }) => {
|
||||||
const rootClassName = cn(s.root, className)
|
const rootClassName = cn(s.root, className)
|
||||||
|
|
||||||
|
if (variant === 'slim') {
|
||||||
|
return (
|
||||||
|
<div className="relative overflow-hidden box-border">
|
||||||
|
<img
|
||||||
|
className="object-scale-down h-24"
|
||||||
|
src={p.images.edges[0].node.urlSmall}
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 flex items-center justify-end mr-8">
|
||||||
|
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
|
||||||
|
{p.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Link href={`product${productData.path}`}>
|
<Link href={`product${p.path}`}>
|
||||||
<div className={rootClassName}>
|
<div className={rootClassName}>
|
||||||
<div className="absolute z-10 inset-0 flex items-center justify-center">
|
<div className="absolute z-10 inset-0 flex items-center justify-center">
|
||||||
<img
|
<img
|
||||||
className="w-full object-cover"
|
className="w-full object-cover"
|
||||||
src={productData.images.edges[0].node.urlSmall}
|
src={p.images.edges[0].node.urlSmall}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div className={s.squareBg} />
|
<div className={s.squareBg} />
|
||||||
<div className="flex flex-row justify-between box-border w-full z-10 relative">
|
<div className="flex flex-row justify-between box-border w-full z-10 relative">
|
||||||
<div className="flex flex-col flex-1 overflow-hidden">
|
<div className="flex flex-col flex-1 overflow-hidden">
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<h1 className={s.productTitle}>{productData.name}</h1>
|
<h1 className={s.productTitle}>{p.name}</h1>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex-0">
|
<div className="flex-0">
|
||||||
<div className={s.productPrice}>
|
<div className={s.productPrice}>${p.prices.price.value}</div>
|
||||||
${productData.prices.price.value}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={s.wishlistButton}>
|
<div className={s.wishlistButton}>
|
||||||
|
@ -1,14 +1,26 @@
|
|||||||
.root {
|
.root {
|
||||||
@apply w-full relative;
|
@apply w-full;
|
||||||
min-width: 100%;
|
min-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@apply flex flex-row;
|
@apply flex flex-row items-center;
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
@apply flex-1;
|
@apply flex-1 px-16 py-4;
|
||||||
min-width: 500px;
|
width: 460px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& > *:after {
|
||||||
|
content: ' ';
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
height: 100px;
|
||||||
|
background: #999;
|
||||||
|
width: 2px;
|
||||||
|
left: 20px;
|
||||||
|
top: calc(50% - 53px);
|
||||||
|
transform: rotate(25deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -18,7 +18,6 @@ const M: FC<Props> = ({
|
|||||||
items,
|
items,
|
||||||
wrapper: Component = DefaultWrapper,
|
wrapper: Component = DefaultWrapper,
|
||||||
variant = 'primary',
|
variant = 'primary',
|
||||||
// min = 'none',
|
|
||||||
}) => {
|
}) => {
|
||||||
const rootClassName = cn(
|
const rootClassName = cn(
|
||||||
s.root,
|
s.root,
|
||||||
@ -40,17 +39,17 @@ const M: FC<Props> = ({
|
|||||||
// )
|
// )
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Ticker>
|
<div className={rootClassName}>
|
||||||
{({ index }) => (
|
<Ticker>
|
||||||
<div className={rootClassName}>
|
{({ index }) => (
|
||||||
<div className={s.container}>
|
<div className={s.container}>
|
||||||
{items.map((p: any) => (
|
{items.map((p: any) => (
|
||||||
<Component {...p} key={index} />
|
<Component {...p} key={index} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)}
|
||||||
)}
|
</Ticker>
|
||||||
</Ticker>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -19,20 +19,8 @@ export default function Home({
|
|||||||
<>
|
<>
|
||||||
<Grid items={products.slice(0, 3)} wrapper={ProductCard} />
|
<Grid items={products.slice(0, 3)} wrapper={ProductCard} />
|
||||||
<Marquee
|
<Marquee
|
||||||
items={[...products.slice(3, 6)]}
|
items={products.slice(0, 3)}
|
||||||
wrapper={(p: any) => (
|
wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
|
||||||
<div className="relative overflow-hidden p-6 box-border">
|
|
||||||
<img
|
|
||||||
className="object-scale-down h-24"
|
|
||||||
src={p.node.images.edges[0].node.urlSmall}
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 flex items-center justify-end mr-8">
|
|
||||||
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
|
|
||||||
{p.node.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
<Hero
|
<Hero
|
||||||
headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
|
headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
|
||||||
@ -48,19 +36,7 @@ export default function Home({
|
|||||||
<Marquee
|
<Marquee
|
||||||
items={[...products.slice(3, 6)]}
|
items={[...products.slice(3, 6)]}
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
wrapper={(p: any) => (
|
wrapper={(p: any) => <ProductCard {...p} variant="slim" />}
|
||||||
<div className="relative overflow-hidden p-6 box-border">
|
|
||||||
<img
|
|
||||||
className="object-scale-down h-24"
|
|
||||||
src={p.node.images.edges[0].node.urlSmall}
|
|
||||||
/>
|
|
||||||
<div className="absolute inset-0 flex items-center justify-end mr-8">
|
|
||||||
<span className="bg-black text-white inline-block p-3 font-bold text-xl break-words">
|
|
||||||
{p.node.name}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
<div className="py-12 flex flex-row w-full">
|
<div className="py-12 flex flex-row w-full">
|
||||||
<div className="flex-0 pr-3 w-48 break-words">
|
<div className="flex-0 pr-3 w-48 break-words">
|
||||||
|
Loading…
x
Reference in New Issue
Block a user