crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Adding ticker and hero

Browse Source
This commit is contained in:
Belen Curcio 2020-10-04 17:47:05 -03:00
parent 62f29fe766
commit 38ad085bd7
4 changed files with 57 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/ui/Marquee/Marquee.module.css
View File

@ -1,5 +1,15 @@
.root {
@apply bg-white py-10 w-full relative flex flex-row;
@apply w-full relative;
min-width: 100%;
}
.container {
@apply flex flex-row;
& > * {
@apply flex-1;
min-width: 500px;
}
}
.primary {
@ -7,5 +17,5 @@
}
.secondary {
@apply bg-violet;
@apply bg-black;
}

23
components/ui/Marquee/Marquee.tsx
View File

@ -17,7 +17,8 @@ const M: FC<Props> = ({
className = '',
items,
wrapper: Component = DefaultWrapper,
variant = 'white',
variant = 'primary',
min = 'none',
}) => {
const rootClassName = cn(
s.root,
@ -28,17 +29,25 @@ const M: FC<Props> = ({
className
)
const flickityOptions = {
initialIndex: 2,
}
// return (
// <div className={rootClassName}>
// <div className={s.container}>
// {items.map((p: any) => (
// <Component {...p} />
// ))}
// </div>
// </div>
// )
return (
<Ticker>
{({ index }) => (
<div className={rootClassName}>
{items.map((p: any) => (
<Component {...p} key={index} />
))}
<div className={s.container}>
{items.map((p: any) => (
<Component {...p} key={index} />
))}
</div>
</div>
)}
</Ticker>

1
package.json
View File

@ -24,7 +24,6 @@
"cookie": "^0.4.1",
"lodash": "^4.17.20",
"next": "^9.5.4-canary.23",
"postcss-nested": "^5.0.1",
"postcss-nesting": "^7.0.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",

57
pages/index.tsx
View File

@ -17,34 +17,6 @@ export default function Home({
return (
<>
<Grid items={products.slice(0, 3)} wrapper={ProductCard} />
<Marquee
items={[...products.slice(0, 3)]}
wrapper={(p: any) => (
<div className="p-3 flex flex-row">
<div className="h-24 w-full bg-yellow-300 overflow-hidden">
<img
className="w-full"
src={p.node.images.edges[0].node.urlSmall}
/>
</div>
<span className="flex-0 bg-black text-white inline-block p-3 font-bold text-xl break-words">
{p.node.name}
</span>
</div>
)}
/>
<Grid items={products.slice(3, 6)} layout="B" wrapper={ProductCard} />
<Marquee
variant="secondary"
items={products.slice(0, 3)}
wrapper={() => (
<div className="flex flex-1">
<h3 className="bg-black text-white inline p-3 font-bold text-2xl">
This is a very short title
</h3>
</div>
)}
/>
<Hero
headline="Release Details: The Yeezy BOOST 350 V2 ‘Natural'"
description="
@ -55,6 +27,35 @@ export default function Home({
Hebrew. It’s now undergone a name change, and will be referred to as
‘Natural’."
/>
<Marquee
items={[...products.slice(0, 3)]}
wrapper={(p: any) => (
<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>
)}
/>
<Grid items={products.slice(3, 6)} layout="B" wrapper={ProductCard} />
<Marquee
variant="secondary"
items={products.slice(0, 3)}
wrapper={() => (
<div className="flex">
<h3 className="bg-black text-white inline p-2 px-3 font-bold text-2xl">
This is a very short title
</h3>
</div>
)}
/>
<div className="py-12 max-h-80">
<div className="break-word w-24">
ALL CATEGORIES ACCESSORIES BAGS CLOTHING SHOES ALL DESIGNERS 032c 1017