crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-05-16 06:26:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

home page updated UI design

Browse Source
This commit is contained in:
StephDietz 2023-07-10 17:07:57 -05:00
parent ba3815459c
commit 27a839eb86
5 changed files with 42 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/layout.tsx
View File

@ -33,7 +33,7 @@ const inter = Inter({
export default async function RootLayout({ children }: { children: ReactNode }) { export default async function RootLayout({ children }: { children: ReactNode }) {
return ( return (
<html lang="en" className={inter.variable}> <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 /> <Navbar />
<Suspense> <Suspense>
<main>{children}</main> <main>{children}</main>

20
components/carousel.tsx
View File

@ -1,6 +1,7 @@
import { getCollectionProducts } from 'lib/shopify'; import { getCollectionProducts } from 'lib/shopify';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import Price from './price';
export async function Carousel() { export async function Carousel() {
// Collections that start with `hidden-*` are hidden from the search page. // Collections that start with `hidden-*` are hidden from the search page.
@ -9,27 +10,32 @@ export async function Carousel() {
if (!products?.length) return null; if (!products?.length) return null;
return ( return (
<div className="relative w-full overflow-hidden bg-black dark:bg-white"> <div className="relative w-full pb-6 overflow-hidden">
<div className="flex animate-carousel"> <div className="flex space-x-6 animate-carousel">
{[...products, ...products].map((product, i) => ( {[...products, ...products].map((product, i) => (
<Link <Link
key={`${product.handle}${i}`} key={`${product.handle}${i}`}
href={`/product/${product.handle}`} 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 ? ( {product.featuredImage ? (
<Image <Image
alt={product.title} alt={product.title}
className="h-full object-contain" className="object-contain h-full"
fill fill
sizes="33vw" sizes="33vw"
src={product.featuredImage.url} src={product.featuredImage.url}
/> />
) : null} ) : null}
<div className="absolute inset-y-0 right-0 flex items-center justify-center"> <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">
<div className="inline-flex bg-white p-4 text-xl font-semibold text-black dark:bg-black dark:text-white"> <h3 data-testid="product-name" className="inline pl-2 mr-6 text-xs font-semibold">
{product.title} {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> </div>
</Link> </Link>
))} ))}

2
components/grid/index.tsx
View File

@ -2,7 +2,7 @@ import clsx from 'clsx';
function Grid(props: React.ComponentProps<'ul'>) { function Grid(props: React.ComponentProps<'ul'>) {
return ( 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} {props.children}
</ul> </ul>
); );

22
components/grid/three-items.tsx
View File

@ -3,26 +3,18 @@ import { getCollectionProducts } from 'lib/shopify';
import type { Product } from 'lib/shopify/types'; import type { Product } from 'lib/shopify/types';
import Link from 'next/link'; import Link from 'next/link';
function ThreeItemGridItem({ function ThreeItemGridItem({ item, size }: { item: Product; size: 'full' | 'half' }) {
item,
size,
background
}: {
item: Product;
size: 'full' | 'half';
background: 'white' | 'pink' | 'purple' | 'black';
}) {
return ( return (
<div <div
className={size === 'full' ? 'lg:col-span-4 lg:row-span-2' : 'lg:col-span-2 lg:row-span-1'} 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 <GridTileImage
src={item.featuredImage.url} src={item.featuredImage.url}
width={size === 'full' ? 1080 : 540} width={size === 'full' ? 1080 : 540}
height={size === 'full' ? 1080 : 540} height={size === 'full' ? 1080 : 540}
labelPosition={size === 'full' ? 'center' : 'bottom'}
priority={true} priority={true}
background={background}
alt={item.title} alt={item.title}
labels={{ labels={{
title: item.title as string, title: item.title as string,
@ -46,10 +38,10 @@ export async function ThreeItemGrid() {
const [firstProduct, secondProduct, thirdProduct] = homepageItems; const [firstProduct, secondProduct, thirdProduct] = homepageItems;
return ( return (
<section className="lg:grid lg:grid-cols-6 lg:grid-rows-2" data-testid="homepage-products"> <section className="p-2 lg:grid lg:grid-cols-6 lg:grid-rows-2" data-testid="homepage-products">
<ThreeItemGridItem size="full" item={firstProduct} background="purple" /> <ThreeItemGridItem size="full" item={firstProduct} />
<ThreeItemGridItem size="half" item={secondProduct} background="black" /> <ThreeItemGridItem size="half" item={secondProduct} />
<ThreeItemGridItem size="half" item={thirdProduct} background="pink" /> <ThreeItemGridItem size="half" item={thirdProduct} />
</section> </section>
); );
} }

39
components/grid/tile.tsx
View File

@ -5,14 +5,14 @@ import Price from 'components/price';
export function GridTileImage({ export function GridTileImage({
isInteractive = true, isInteractive = true,
background,
active, active,
labelPosition,
labels, labels,
...props ...props
}: { }: {
isInteractive?: boolean; isInteractive?: boolean;
background?: 'white' | 'pink' | 'purple' | 'black' | 'purple-dark' | 'blue' | 'cyan' | 'gray';
active?: boolean; active?: boolean;
labelPosition?: 'bottom' | 'center';
labels?: { labels?: {
title: string; title: string;
amount: string; amount: string;
@ -22,21 +22,15 @@ export function GridTileImage({
} & React.ComponentProps<typeof Image>) { } & React.ComponentProps<typeof Image>) {
return ( return (
<div <div
className={clsx('relative flex h-full w-full items-center justify-center overflow-hidden', { className={clsx(
'bg-white dark:bg-white': background === 'white', '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',
'bg-[#ff0080] dark:bg-[#ff0080]': background === 'pink', {
'bg-[#7928ca] dark:bg-[#7928ca]': background === 'purple', relative: labels
'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
})}
> >
{active !== undefined && active ? ( {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} ) : null}
{props.src ? ( {props.src ? (
<Image <Image
@ -48,18 +42,25 @@ export function GridTileImage({
/> />
) : null} ) : null}
{labels ? ( {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 <h3
data-testid="product-name" data-testid="product-name"
className={clsx( 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', 'mr-6 inline pl-2 font-semibold',
!labels.isSmall ? 'text-3xl' : 'text-lg' !labels.isSmall ? 'text-sm' : 'text-sm'
)} )}
> >
{labels.title} {labels.title}
</h3> </h3>
<Price <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} amount={labels.amount}
currencyCode={labels.currencyCode} currencyCode={labels.currencyCode}
/> />