crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-24 18:51:23 +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

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;