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

Structural changes

Browse Source
This commit is contained in:
Henrik Larsson
2023-08-07 15:06:13 +02:00
parent 1857278dda
commit a75a2e7feb
25 changed files with 359 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
components/modules/blurb-section/blurb-section.tsx
View File

@@ -1,16 +1,16 @@
import dynamic from 'next/dynamic'
import dynamic from 'next/dynamic';
import { Carousel, CarouselItem } from 'components/modules/carousel/carousel'
const Card = dynamic(() => import('components/ui/card'))
import { Carousel, CarouselItem } from 'components/modules/carousel/carousel';
const Card = dynamic(() => import('components/ui/card'));
import Text from 'components/ui/text'
import Text from 'components/ui/text';
interface BlurbSectionProps {
blurbs: any
title: string
mobileLayout: string
desktopLayout: string
imageFormat: 'square' | 'portrait' | 'landscape'
blurbs: any;
title: string;
mobileLayout: string;
desktopLayout: string;
imageFormat: 'square' | 'portrait' | 'landscape';
}
const BlurbSection = ({
@@ -18,37 +18,33 @@ const BlurbSection = ({
mobileLayout,
desktopLayout,
blurbs,
imageFormat,
imageFormat
}: BlurbSectionProps) => {
const gridLayout =
desktopLayout === '2-column'
? 'lg:grid-cols-2'
: desktopLayout === '3-column'
? 'lg:grid-cols-3'
: 'lg:grid-cols-4'
: 'lg:grid-cols-4';
const sliderLayout =
desktopLayout === '2-column' ? 2 : desktopLayout === '3-column' ? 3 : 4
const sliderLayout = desktopLayout === '2-column' ? 2 : desktopLayout === '3-column' ? 3 : 4;
return (
<div>
{title ? (
<Text
className="mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
variant="sectionHeading"
>
<Text className="mb-4 px-4 lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16" variant="sectionHeading">
{title}
</Text>
) : (
<Text
className="italic mb-4 px-4 lg:px-8 lg:mb-6 2xl:px-16 2xl:mb-8"
className="mb-4 px-4 italic lg:mb-6 lg:px-8 2xl:mb-8 2xl:px-16"
variant="sectionHeading"
>
No title provided yet
</Text>
)}
<div
className={`px-4 grid ${gridLayout} gap-x-4 gap-y-8 ${
className={`grid px-4 ${gridLayout} gap-x-4 gap-y-8 ${
mobileLayout === 'stacked' ? 'lg:hidden' : 'hidden'
} lg:px-8 2xl:!px-16`}
>
@@ -63,15 +59,11 @@ const BlurbSection = ({
imageFormat={blurb?.imageFormat}
/>
</div>
)
);
})}
</div>
<div
className={`${
mobileLayout === 'stacked' ? 'hidden lg:block' : 'block'
}`}
>
<div className={`${mobileLayout === 'stacked' ? 'hidden lg:block' : 'block'}`}>
{blurbs && (
<Carousel
gliderClasses={'px-4 lg:px-8 2xl:px-16'}
@@ -80,9 +72,8 @@ const BlurbSection = ({
responsive={{
breakpoint: 1024,
settings: {
slidesToShow:
sliderLayout <= 4 ? sliderLayout + 0.5 : sliderLayout,
},
slidesToShow: sliderLayout <= 4 ? sliderLayout + 0.5 : sliderLayout
}
}}
>
{blurbs.map((blurb: any, index: number) => (
@@ -100,7 +91,7 @@ const BlurbSection = ({
)}
</div>
</div>
)
}
);
};
export default BlurbSection
export default BlurbSection;

57
components/modules/hero/hero.tsx
View File

@@ -1,41 +1,40 @@
import dynamic from 'next/dynamic'
import dynamic from 'next/dynamic';
import Link from 'components/ui/link/link'
import Text from 'components/ui/text/text'
const SanityImage = dynamic(() => import('components/ui/sanity-image'))
import Link from 'components/ui/link/link';
import Text from 'components/ui/text/text';
const SanityImage = dynamic(() => import('components/ui/sanity-image'));
interface HeroProps {
variant: string
text?: string
label?: string
title: string
image: object | any
desktopImage: object | any
variant: string;
text?: string;
label?: string;
title: string;
image: object | any;
desktopImage: object | any;
link: {
title: string
title: string;
reference: {
title: string
title: string;
slug: {
current: string
}
}
}
current: string;
};
};
};
}
type HeroSize = keyof typeof heroSize
type HeroSize = keyof typeof heroSize;
const heroSize = {
fullScreen: 'aspect-[3/4] lg:aspect-auto lg:h-[calc(100vh-4rem)]',
halfScreen: 'aspect-square max-h-[60vh] lg:aspect-auto lg:min-h-[60vh]',
}
fullScreen: 'aspect-[3/4] lg:aspect-auto lg:h-[calc(75vh-4rem)]',
halfScreen: 'aspect-square max-h-[60vh] lg:aspect-auto lg:min-h-[60vh]'
};
const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
const heroClass = heroSize[variant as HeroSize] || heroSize.fullScreen
const heroClass = heroSize[variant as HeroSize] || heroSize.fullScreen;
return (
<div
className={`relative w-screen ${heroClass} flex flex-col justify-end relative text-high-contrast`}
className={`relative w-screen ${heroClass} relative flex flex-col justify-end text-high-contrast`}
>
{image && (
<SanityImage
@@ -44,10 +43,10 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
priority={true}
width={1200}
height={600}
className="absolute inset-0 h-full w-full object-cover z-10"
className="absolute inset-0 z-10 h-full w-full object-cover"
/>
)}
<div className="flex flex-col items-start text-high-contrast absolute max-w-md z-50 left-4 bottom-5 lg:max-w-2xl lg:bottom-8 lg:left-8 2xl:left-16 2xl:bottom-16">
<div className="absolute bottom-5 left-4 z-50 flex max-w-md flex-col items-start text-high-contrast lg:bottom-8 lg:left-8 lg:max-w-2xl 2xl:bottom-16 2xl:left-16">
{label && (
<Text className="mb-1 lg:mb-2" variant="label">
{label}
@@ -67,7 +66,7 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
)}
{link?.reference && (
<Link
className="inline-flex transition bg-high-contrast text-white text-base py-4 px-10 mt-6 hover:bg-low-contrast lg:mt-8"
className="mt-6 inline-flex bg-high-contrast px-10 py-4 text-base text-white transition hover:bg-low-contrast lg:mt-8"
href={link.reference.slug.current}
>
{link?.title ? link.title : link.reference.title}
@@ -75,7 +74,7 @@ const Hero = ({ variant, title, text, label, image, link }: HeroProps) => {
)}
</div>
</div>
)
}
);
};
export default Hero
export default Hero;