mirror of
https://github.com/vercel/commerce.git
synced 2025-05-16 06:26:58 +00:00
home page updated UI design
This commit is contained in:
StephDietz
parent
ba3815459c
commit
27a839eb86
@ -33,7 +33,7 @@ const inter = Inter({
|
||||
export default async function RootLayout({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<html lang="en" className={inter.variable}>
|
||||
<body className="bg-white text-black selection:bg-teal-300 dark:bg-black dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
|
||||
<body className="text-black bg-gray-50 selection:bg-teal-300 dark:bg-dark dark:text-white dark:selection:bg-fuchsia-600 dark:selection:text-white">
|
||||
<Navbar />
|
||||
<Suspense>
|
||||
<main>{children}</main>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { getCollectionProducts } from 'lib/shopify';
|
||||
import Image from 'next/image';
|
||||
import Link from 'next/link';
|
||||
import Price from './price';
|
||||
|
||||
export async function Carousel() {
|
||||
// Collections that start with `hidden-*` are hidden from the search page.
|
||||
@ -9,27 +10,32 @@ export async function Carousel() {
|
||||
if (!products?.length) return null;
|
||||
|
||||
return (
|
||||
<div className="relative w-full overflow-hidden bg-black dark:bg-white">
|
||||
<div className="flex animate-carousel">
|
||||
<div className="relative w-full pb-6 overflow-hidden">
|
||||
<div className="flex space-x-6 animate-carousel">
|
||||
{[...products, ...products].map((product, i) => (
|
||||
<Link
|
||||
key={`${product.handle}${i}`}
|
||||
href={`/product/${product.handle}`}
|
||||
className="relative h-[30vh] w-1/2 flex-none md:w-1/3"
|
||||
className="relative h-[30vh] w-2/3 flex-none rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black md:w-1/3"
|
||||
>
|
||||
{product.featuredImage ? (
|
||||
<Image
|
||||
alt={product.title}
|
||||
className="h-full object-contain"
|
||||
className="object-contain h-full"
|
||||
fill
|
||||
sizes="33vw"
|
||||
src={product.featuredImage.url}
|
||||
/>
|
||||
) : null}
|
||||
<div className="absolute inset-y-0 right-0 flex items-center justify-center">
|
||||
<div className="inline-flex bg-white p-4 text-xl font-semibold text-black dark:bg-black dark:text-white">
|
||||
<div className="absolute bottom-0 left-0 flex items-center p-1 mb-2 ml-2 text-black border rounded-full bg-white/80 backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white md:mb-8 md:ml-8">
|
||||
<h3 data-testid="product-name" className="inline pl-2 mr-6 text-xs font-semibold">
|
||||
{product.title}
|
||||
</div>
|
||||
</h3>
|
||||
<Price
|
||||
className="flex-none p-2 text-xs font-semibold text-white bg-blue-600 rounded-full"
|
||||
amount={product.priceRange.maxVariantPrice.amount}
|
||||
currencyCode={product.priceRange.maxVariantPrice.currencyCode}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
|
||||
@ -2,7 +2,7 @@ import clsx from 'clsx';
|
||||
|
||||
function Grid(props: React.ComponentProps<'ul'>) {
|
||||
return (
|
||||
<ul {...props} className={clsx('grid grid-flow-row gap-4 py-5', props.className)}>
|
||||
<ul {...props} className={clsx('grid grid-flow-row gap-4 py-5', props.className)}>
|
||||
{props.children}
|
||||
</ul>
|
||||
);
|
||||
|
||||
@ -3,26 +3,18 @@ import { getCollectionProducts } from 'lib/shopify';
|
||||
import type { Product } from 'lib/shopify/types';
|
||||
import Link from 'next/link';
|
||||
|
||||
function ThreeItemGridItem({
|
||||
item,
|
||||
size,
|
||||
background
|
||||
}: {
|
||||
item: Product;
|
||||
size: 'full' | 'half';
|
||||
background: 'white' | 'pink' | 'purple' | 'black';
|
||||
}) {
|
||||
function ThreeItemGridItem({ item, size }: { item: Product; size: 'full' | 'half' }) {
|
||||
return (
|
||||
<div
|
||||
className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'}
|
||||
>
|
||||
<Link className="block h-full" href={`/product/${item.handle}`}>
|
||||
<Link className="block h-full p-2" href={`/product/${item.handle}`}>
|
||||
<GridTileImage
|
||||
src={item.featuredImage.url}
|
||||
width={size === 'full' ? 1080 : 540}
|
||||
height={size === 'full' ? 1080 : 540}
|
||||
labelPosition={size === 'full' ? 'center' : 'bottom'}
|
||||
priority={true}
|
||||
background={background}
|
||||
alt={item.title}
|
||||
labels={{
|
||||
title: item.title as string,
|
||||
@ -46,10 +38,10 @@ export async function ThreeItemGrid() {
|
||||
const [firstProduct, secondProduct, thirdProduct] = homepageItems;
|
||||
|
||||
return (
|
||||
<section className="lg:grid lg:grid-cols-6 lg:grid-rows-2" data-testid="homepage-products">
|
||||
<ThreeItemGridItem size="full" item={firstProduct} background="purple" />
|
||||
<ThreeItemGridItem size="half" item={secondProduct} background="black" />
|
||||
<ThreeItemGridItem size="half" item={thirdProduct} background="pink" />
|
||||
<section className="p-2 lg:grid lg:grid-cols-6 lg:grid-rows-2" data-testid="homepage-products">
|
||||
<ThreeItemGridItem size="full" item={firstProduct} />
|
||||
<ThreeItemGridItem size="half" item={secondProduct} />
|
||||
<ThreeItemGridItem size="half" item={thirdProduct} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
@ -5,14 +5,14 @@ import Price from 'components/price';
|
||||
|
||||
export function GridTileImage({
|
||||
isInteractive = true,
|
||||
background,
|
||||
active,
|
||||
labelPosition,
|
||||
labels,
|
||||
...props
|
||||
}: {
|
||||
isInteractive?: boolean;
|
||||
background?: 'white' | 'pink' | 'purple' | 'black' | 'purple-dark' | 'blue' | 'cyan' | 'gray';
|
||||
active?: boolean;
|
||||
labelPosition?: 'bottom' | 'center';
|
||||
labels?: {
|
||||
title: string;
|
||||
amount: string;
|
||||
@ -22,21 +22,15 @@ export function GridTileImage({
|
||||
} & React.ComponentProps<typeof Image>) {
|
||||
return (
|
||||
<div
|
||||
className={clsx('relative flex h-full w-full items-center justify-center overflow-hidden', {
|
||||
'bg-white dark:bg-white': background === 'white',
|
||||
'bg-[#ff0080] dark:bg-[#ff0080]': background === 'pink',
|
||||
'bg-[#7928ca] dark:bg-[#7928ca]': background === 'purple',
|
||||
'bg-gray-900 dark:bg-gray-900': background === 'black',
|
||||
'bg-violetDark dark:bg-violetDark': background === 'purple-dark',
|
||||
'bg-blue-500 dark:bg-blue-500': background === 'blue',
|
||||
'bg-cyan-500 dark:bg-cyan-500': background === 'cyan',
|
||||
'bg-gray-100 dark:bg-gray-100': background === 'gray',
|
||||
'bg-gray-100 dark:bg-gray-900': !background,
|
||||
relative: labels
|
||||
})}
|
||||
className={clsx(
|
||||
'relative flex h-full w-full items-center justify-center overflow-hidden rounded-lg border border-gray-200 bg-white dark:border-gray-800 dark:bg-black',
|
||||
{
|
||||
relative: labels
|
||||
}
|
||||
)}
|
||||
>
|
||||
{active !== undefined && active ? (
|
||||
<span className="absolute h-full w-full bg-white opacity-25"></span>
|
||||
<span className="absolute w-full h-full bg-white opacity-25"></span>
|
||||
) : null}
|
||||
{props.src ? (
|
||||
<Image
|
||||
@ -48,18 +42,25 @@ export function GridTileImage({
|
||||
/>
|
||||
) : null}
|
||||
{labels ? (
|
||||
<div className="absolute left-0 top-0 w-3/4 text-black dark:text-white">
|
||||
<div
|
||||
className={clsx(
|
||||
'absolute bottom-0 left-0 flex items-center rounded-full border bg-white/80 p-1 text-black backdrop-blur-md dark:border-gray-800 dark:bg-black/80 dark:text-white',
|
||||
labelPosition === 'center'
|
||||
? 'mb-2 ml-2 md:mb-8 md:ml-8 lg:mb-[35%] lg:ml-20'
|
||||
: 'mb-2 ml-2 md:mb-8 md:ml-8'
|
||||
)}
|
||||
>
|
||||
<h3
|
||||
data-testid="product-name"
|
||||
className={clsx(
|
||||
'inline bg-white box-decoration-clone py-3 pl-5 font-semibold leading-loose shadow-[1.25rem_0_0] shadow-white dark:bg-black dark:shadow-black',
|
||||
!labels.isSmall ? 'text-3xl' : 'text-lg'
|
||||
'mr-6 inline pl-2 font-semibold',
|
||||
!labels.isSmall ? 'text-sm' : 'text-sm'
|
||||
)}
|
||||
>
|
||||
{labels.title}
|
||||
</h3>
|
||||
<Price
|
||||
className="w-fit bg-white px-5 py-3 text-sm font-semibold dark:bg-black dark:text-white"
|
||||
className="flex-none p-2 text-sm font-semibold text-white bg-blue-600 rounded-full"
|
||||
amount={labels.amount}
|
||||
currencyCode={labels.currencyCode}
|
||||
/>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user