crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-15 20:01:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

rm dark mode biz

Browse Source
This commit is contained in:
druzydowns 2024-06-01 18:11:27 -04:00
parent 8bb50a4530
commit c12c2c3993
31 changed files with 64 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/error.tsx
View File

@ -2,7 +2,7 @@
export default function Error({ reset }: { reset: () => void }) {
return (
<div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 dark:border-neutral-800 dark:bg-black md:p-12">
<div className="mx-auto my-4 flex max-w-xl flex-col rounded-lg border border-neutral-200 bg-white p-8 md:p-12">
<h2 className="text-xl font-bold">Oh no!</h2>
<p className="my-2">
There was an issue with our storefront. This could be a temporary issue, please try your

2
app/globals.css
View File

@ -17,7 +17,7 @@
a,
input,
button {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50 dark:focus-visible:ring-neutral-600 dark:focus-visible:ring-offset-neutral-900;
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-neutral-400 focus-visible:ring-offset-2 focus-visible:ring-offset-neutral-50;
}
.cls-1 {

2
app/layout.tsx
View File

@ -41,7 +41,7 @@ const jubilee = localFont({
export default async function RootLayout({ children }: { children: ReactNode }) {
return (
<html lang="en" className={clsx(GeistSans.variable, jubilee.className)}>
<body className="bg-neutral-50 text-black selection:bg-teal-300 dark:bg-neutral-900 dark:text-white dark:selection:bg-pink-500 dark:selection:text-white">
<body className="bg-neutral-50 text-black selection:bg-teal-300">
<Navbar />
<Suspense>
<main>{children}</main>

2
app/product/[handle]/page.tsx
View File

@ -82,7 +82,7 @@ export default async function ProductPage({ params }: { params: { handle: string
}}
/>
<div className="mx-auto max-w-screen-2xl px-4">
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:flex-row lg:gap-8 lg:p-8">
<div className="flex flex-col rounded-lg border border-neutral-200 bg-white p-4 md:p-12 lg:flex-row lg:gap-8 lg:p-8">
<div className="h-full w-full basis-full lg:basis-4/6">
<Gallery
images={product.images.map((image: Image) => ({

2
app/search/layout.tsx
View File

@ -7,7 +7,7 @@ import { Suspense } from 'react';
export default function SearchLayout({ children }: { children: React.ReactNode }) {
return (
<Suspense>
<div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black dark:text-white md:flex-row">
<div className="mx-auto flex max-w-screen-2xl flex-col gap-8 px-4 pb-4 text-black md:flex-row">
<div className="order-first w-full flex-none md:max-w-[125px]">
<Collections />
</div>

4
app/search/loading.tsx
View File

@ -6,9 +6,7 @@ export default function Loading() {
{Array(12)
.fill(0)
.map((_, index) => {
return (
<Grid.Item key={index} className="animate-pulse bg-neutral-100 dark:bg-neutral-900" />
);
return <Grid.Item key={index} className="animate-pulse bg-neutral-100" />;
})}
</Grid>
);

2
components/cart/close-cart.tsx
View File

@ -3,7 +3,7 @@ import clsx from 'clsx';
export default function CloseCart({ className }: { className?: string }) {
return (
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors">
<XMarkIcon className={clsx('h-6 transition-all ease-in-out hover:scale-110 ', className)} />
</div>
);

2
components/cart/delete-item-button.tsx
View File

@ -28,7 +28,7 @@ function SubmitButton() {
{pending ? (
<LoadingDots className="bg-white" />
) : (
<XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
<XMarkIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white" />
)}
</button>
);

6
components/cart/edit-item-quantity-button.tsx
View File

@ -27,11 +27,11 @@ function SubmitButton({ type }: { type: 'plus' | 'minus' }) {
)}
>
{pending ? (
<LoadingDots className="bg-black dark:bg-white" />
<LoadingDots className="bg-black" />
) : type === 'plus' ? (
<PlusIcon className="h-4 w-4 dark:text-neutral-500" />
<PlusIcon className="h-4 w-4" />
) : (
<MinusIcon className="h-4 w-4 dark:text-neutral-500" />
<MinusIcon className="h-4 w-4" />
)}
</button>
);

25
components/cart/modal.tsx
View File

@ -64,7 +64,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
leaveFrom="translate-x-0"
leaveTo="translate-x-full"
>
<Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl dark:border-neutral-700 dark:bg-black/80 dark:text-white md:w-[390px]">
<Dialog.Panel className="fixed bottom-0 right-0 top-0 flex h-full w-full flex-col border-l border-neutral-200 bg-white/80 p-6 text-black backdrop-blur-xl md:w-[390px]">
<div className="flex items-center justify-between">
<p className="text-lg font-semibold">My Cart</p>
@ -96,10 +96,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
);
return (
<li
key={i}
className="flex w-full flex-col border-b border-neutral-300 dark:border-neutral-700"
>
<li key={i} className="flex w-full flex-col border-b border-neutral-300">
<div className="relative flex w-full flex-row justify-between px-1 py-4">
<div className="absolute z-40 -mt-2 ml-[55px]">
<DeleteItemButton item={item} />
@ -109,7 +106,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
onClick={closeCart}
className="z-30 flex flex-row space-x-4"
>
<div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300 dark:border-neutral-700 dark:bg-neutral-900 dark:hover:bg-neutral-800">
<div className="relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-neutral-300 bg-neutral-300">
<Image
className="h-full w-full object-cover"
width={64}
@ -127,7 +124,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
{item.merchandise.product.title}
</span>
{item.merchandise.title !== DEFAULT_OPTION ? (
<p className="text-sm text-neutral-500 dark:text-neutral-400">
<p className="text-sm text-neutral-500">
{item.merchandise.title}
</p>
) : null}
@ -139,7 +136,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
amount={item.cost.totalAmount.amount}
currencyCode={item.cost.totalAmount.currencyCode}
/>
<div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200 dark:border-neutral-700">
<div className="ml-auto flex h-9 flex-row items-center rounded-full border border-neutral-200">
<EditItemQuantityButton item={item} type="minus" />
<p className="w-6 text-center">
<span className="w-full text-sm">{item.quantity}</span>
@ -152,23 +149,23 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
);
})}
</ul>
<div className="py-4 text-sm text-neutral-500 dark:text-neutral-400">
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 dark:border-neutral-700">
<div className="py-4 text-sm text-neutral-500">
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1">
<p>Taxes</p>
<Price
className="text-right text-base text-black dark:text-white"
className="text-right text-base text-black"
amount={cart.cost.totalTaxAmount.amount}
currencyCode={cart.cost.totalTaxAmount.currencyCode}
/>
</div>
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1">
<p>Shipping</p>
<p className="text-right">Calculated at checkout</p>
</div>
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1 dark:border-neutral-700">
<div className="mb-3 flex items-center justify-between border-b border-neutral-200 pb-1 pt-1">
<p>Total</p>
<Price
className="text-right text-base text-black dark:text-white"
className="text-right text-base text-black"
amount={cart.cost.totalAmount.amount}
currencyCode={cart.cost.totalAmount.currencyCode}
/>

2
components/cart/open-cart.tsx
View File

@ -9,7 +9,7 @@ export default function OpenCart({
quantity?: number;
}) {
return (
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white">
<div className="relative flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors">
<ShoppingCartIcon
className={clsx('h-4 transition-all ease-in-out hover:scale-110 ', className)}
/>

2
components/grid/tile.tsx
View File

@ -24,7 +24,7 @@ export function GridTileImage({
return (
<div
className={clsx(
'group flex h-full w-full items-center justify-center overflow-visible rounded-lg dark:bg-black',
'group flex h-full w-full items-center justify-center overflow-visible rounded-lg',
{
relative: label,
'': active,

2
components/icons/logo.tsx
View File

@ -7,7 +7,7 @@ export default function LogoIcon(props: React.ComponentProps<'svg'>) {
aria-label={`${process.env.SITE_NAME} logo`}
viewBox="0 0 32 28"
{...props}
className={clsx('h-4 w-4 fill-black dark:fill-white', props.className)}
className={clsx('h-4 w-4 fill-black', props.className)}
>
<path d="M21.5758 9.75769L16 0L0 28H11.6255L21.5758 9.75769Z" />
<path d="M26.2381 17.9167L20.7382 28H32L26.2381 17.9167Z" />

2
components/label.tsx
View File

@ -18,7 +18,7 @@ const Label = ({
'lg:px-20 lg:pb-[35%]': position === 'center'
})}
>
<div className="flex items-center border bg-white/70 p-1 text-xs font-semibold text-black backdrop-blur-sm dark:border-neutral-800 dark:bg-black/70 dark:text-white">
<div className="flex items-center border bg-white/70 p-1 text-xs font-semibold text-black backdrop-blur-sm">
<h3 className="mr-4 line-clamp-2 flex-grow pl-2 text-lg leading-none tracking-tight">
{title}
</h3>

4
components/layout/footer-menu.tsx
View File

@ -19,9 +19,9 @@ const FooterMenuItem = ({ item }: { item: Menu }) => {
<Link
href={item.path}
className={clsx(
'block p-2 text-lg underline-offset-4 hover:text-black hover:underline dark:hover:text-neutral-300 md:inline-block md:text-sm',
'block p-2 text-lg underline-offset-4 hover:text-black hover:underline md:inline-block md:text-sm',
{
'text-black dark:text-neutral-300': active
'text-black': active
}
)}
>

16
components/layout/footer.tsx
View File

@ -10,15 +10,15 @@ const { COMPANY_NAME, SITE_NAME } = process.env;
export default async function Footer() {
const currentYear = new Date().getFullYear();
const copyrightDate = 2023 + (currentYear > 2023 ? `-${currentYear}` : '');
const skeleton = 'w-full h-6 animate-pulse rounded bg-neutral-200 dark:bg-neutral-700';
const skeleton = 'w-full h-6 animate-pulse rounded bg-neutral-200';
const menu = await getMenu('next-js-frontend-footer-menu');
const copyrightName = COMPANY_NAME || SITE_NAME || '';
return (
<footer className="text-sm text-neutral-500 dark:text-neutral-400">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm dark:border-neutral-700 md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0">
<footer className="text-sm text-neutral-500">
<div className="mx-auto flex w-full max-w-7xl flex-col gap-6 border-t border-neutral-200 px-6 py-12 text-sm md:flex-row md:gap-12 md:px-4 min-[1320px]:px-0">
<div>
<Link className="flex items-center gap-2 text-black dark:text-white md:pt-1" href="/">
<Link className="flex items-center gap-2 text-black md:pt-1" href="/">
<LogoSquare size="sm" />
<span className="uppercase">{SITE_NAME}</span>
</Link>
@ -39,17 +39,17 @@ export default async function Footer() {
</Suspense>
<div className="md:ml-auto">
<a
className="flex h-8 w-max flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black dark:border-neutral-700 dark:bg-black dark:text-white"
className="flex h-8 w-max flex-none items-center justify-center rounded-md border border-neutral-200 bg-white text-xs text-black"
aria-label="Deploy on Vercel"
href="https://vercel.com/templates/next.js/nextjs-commerce"
>
<span className="px-3">▲</span>
<hr className="h-full border-r border-neutral-200 dark:border-neutral-700" />
<hr className="h-full border-r border-neutral-200" />
<span className="px-3">Deploy</span>
</a>
</div>
</div>
<div className="border-t border-neutral-200 py-6 text-sm dark:border-neutral-700">
<div className="border-t border-neutral-200 py-6 text-sm">
<div className="mx-auto flex w-full max-w-7xl flex-col items-center gap-1 px-4 md:flex-row md:gap-0 md:px-4 min-[1320px]:px-0">
<p>
&copy; {copyrightDate} {copyrightName}
@ -58,7 +58,7 @@ export default async function Footer() {
<hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
<p>Designed in California</p>
<p className="md:ml-auto">
<a href="https://vercel.com" className="text-black dark:text-white">
<a href="https://vercel.com" className="text-black">
Crafted by ▲ Vercel
</a>
</p>

2
components/layout/navbar/index.tsx
View File

@ -30,7 +30,7 @@ export default async function Navbar() {
<li key={item.title}>
<Link
href={item.path}
className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
className="text-neutral-500 underline-offset-4 hover:text-black hover:underline"
>
{item.title}
</Link>

8
components/layout/navbar/mobile-menu.tsx
View File

@ -35,7 +35,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
<button
onClick={openMobileMenu}
aria-label="Open mobile menu"
className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white md:hidden"
className="flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors md:hidden"
>
<Bars3Icon className="h-4" />
</button>
@ -61,10 +61,10 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
leaveFrom="translate-x-0"
leaveTo="translate-x-[-100%]"
>
<Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6 dark:bg-black">
<Dialog.Panel className="fixed bottom-0 left-0 right-0 top-0 flex h-full w-full flex-col bg-white pb-6">
<div className="p-4">
<button
className="mb-4 flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors dark:border-neutral-700 dark:text-white"
className="mb-4 flex h-11 w-11 items-center justify-center rounded-md border border-neutral-200 text-black transition-colors"
onClick={closeMobileMenu}
aria-label="Close mobile menu"
>
@ -78,7 +78,7 @@ export default function MobileMenu({ menu }: { menu: Menu[] }) {
<ul className="flex w-full flex-col">
{menu.map((item: Menu) => (
<li
className="py-2 text-xl text-black transition-colors hover:text-neutral-500 dark:text-white"
className="py-2 text-xl text-black transition-colors hover:text-neutral-500"
key={item.title}
>
<Link href={item.path} onClick={closeMobileMenu}>

2
components/layout/navbar/ogNav.tsx
View File

@ -31,7 +31,7 @@ export default async function OgNavbar() {
<li key={item.title}>
<Link
href={item.path}
className="text-neutral-500 underline-offset-4 hover:text-black hover:underline dark:text-neutral-400 dark:hover:text-neutral-300"
className="text-neutral-500 underline-offset-4 hover:text-black hover:underline "
>
{item.title}
</Link>

2
components/layout/navbar/search.tsx
View File

@ -33,7 +33,7 @@ export default function Search() {
placeholder="Search for..."
autoComplete="off"
defaultValue={searchParams?.get('q') || ''}
className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500 dark:border-neutral-800 dark:bg-transparent dark:text-white dark:placeholder:text-neutral-400"
className="w-full rounded-lg border bg-white px-4 py-2 text-sm text-black placeholder:text-neutral-500"
/>
<div className="absolute right-0 top-0 mr-3 flex h-full items-center">
<MagnifyingGlassIcon className="h-4" />

4
components/layout/search/collections.tsx
View File

@ -10,8 +10,8 @@ async function CollectionList() {
}
const skeleton = 'mb-3 h-4 w-5/6 animate-pulse rounded';
const activeAndTitles = 'bg-neutral-800 dark:bg-neutral-300';
const items = 'bg-neutral-400 dark:bg-neutral-700';
const activeAndTitles = 'bg-neutral-800';
const items = 'bg-neutral-400';
export default function Collections() {
return (

4
components/layout/search/filter/dropdown.tsx
View File

@ -42,7 +42,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
onClick={() => {
setOpenSelect(!openSelect);
}}
className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm"
>
<div>{active}</div>
<ChevronDownIcon className="h-4" />
@ -52,7 +52,7 @@ export default function FilterItemDropdown({ list }: { list: ListItem[] }) {
onClick={() => {
setOpenSelect(false);
}}
className="absolute z-40 w-full rounded-b-md bg-white p-4 shadow-md dark:bg-black"
className="absolute z-40 w-full rounded-b-md bg-white p-4 shadow-md "
>
{list.map((item: ListItem, i) => (
<FilterItem key={i} item={item} />

6
components/layout/search/filter/index.tsx
View File

@ -19,11 +19,7 @@ export default function FilterList({ list, title }: { list: ListItem[]; title?:
return (
<>
<nav>
{title ? (
<h3 className="hidden text-xs text-neutral-500 dark:text-neutral-400 md:block">
{title}
</h3>
) : null}
{title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
<ul className="hidden md:block">
<FilterItemList list={list} />
</ul>

13
components/layout/search/filter/item.tsx
View File

@ -17,15 +17,12 @@ function PathFilterItem({ item }: { item: PathFilterItem }) {
newParams.delete('q');
return (
<li className="mt-2 flex text-black dark:text-white" key={item.title}>
<li className="mt-2 flex text-black" key={item.title}>
<DynamicTag
href={createUrl(item.path, newParams)}
className={clsx(
'w-full text-sm underline-offset-4 hover:underline dark:hover:text-neutral-100',
{
'underline underline-offset-4': active
}
)}
className={clsx('w-full text-sm underline-offset-4 hover:underline', {
'underline underline-offset-4': active
})}
>
{item.title}
</DynamicTag>
@ -48,7 +45,7 @@ function SortFilterItem({ item }: { item: SortFilterItem }) {
const DynamicTag = active ? 'p' : Link;
return (
<li className="mt-2 flex text-sm text-black dark:text-white" key={item.title}>
<li className="mt-2 flex text-sm text-black" key={item.title}>
<DynamicTag
prefetch={!active ? false : undefined}
href={href}

2
components/logo-square.tsx
View File

@ -5,7 +5,7 @@ export default function LogoSquare({ size }: { size?: 'sm' | undefined }) {
return (
<div
className={clsx(
'flex flex-none items-center justify-center border border-neutral-200 bg-white dark:border-neutral-700 dark:bg-black',
'flex flex-none items-center justify-center border border-neutral-200 bg-white',
{
'h-[40px] w-[40px] rounded-xl': !size,
'h-[30px] w-[30px] rounded-lg': size === 'sm'

4
components/product/gallery.tsx
View File

@ -24,7 +24,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
const previousUrl = createUrl(pathname, previousSearchParams);
const buttonClassName =
'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black dark:hover:text-white flex items-center justify-center';
'h-full px-6 transition-all ease-in-out hover:scale-110 hover:text-black flex items-center justify-center';
return (
<>
@ -42,7 +42,7 @@ export function Gallery({ images }: { images: { src: string; altText: string }[]
{images.length > 1 ? (
<div className="absolute bottom-[15%] hidden w-full justify-center">
<div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur dark:border-black dark:bg-neutral-900/80">
<div className="mx-auto flex h-11 items-center rounded-full border border-white bg-neutral-50/80 text-neutral-500 backdrop-blur">
<Link
aria-label="Previous product image"
href={previousUrl}

7
components/product/product-description.tsx
View File

@ -7,7 +7,7 @@ import { VariantSelector } from './variant-selector';
export function ProductDescription({ product }: { product: Product }) {
return (
<>
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
<div className="mb-6 flex flex-col border-b pb-6">
<h1 className="mb-2 text-5xl font-medium">{product.title}</h1>
<div className="mr-auto w-auto bg-black p-2 text-lg text-white">
<Price
@ -19,10 +19,7 @@ export function ProductDescription({ product }: { product: Product }) {
<VariantSelector options={product.options} variants={product.variants} />
{product.descriptionHtml ? (
<Prose
className="mb-6 font-sans text-sm leading-tight dark:text-white/[60%]"
html={product.descriptionHtml}
/>
<Prose className="mb-6 font-sans text-sm leading-tight" html={product.descriptionHtml} />
) : null}
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />

7
components/product/productDescriptionCard.tsx
View File

@ -11,7 +11,7 @@ export function ProductDescriptionCard({ product }: { product: Product }) {
<h1 className="text-3xl font-medium md:text-5xl">{product.title}</h1>
</div>
<div className="border-black lg:border-2 lg:p-14">
<div className="mb-6 flex flex-col border-b pb-6 dark:border-neutral-700">
<div className="mb-6 flex flex-col border-b pb-6">
<div className="mx-auto w-auto bg-black p-2 text-lg text-white">
<Price
amount={product.priceRange.maxVariantPrice.amount}
@ -22,10 +22,7 @@ export function ProductDescriptionCard({ product }: { product: Product }) {
<VariantSelector options={product.options} variants={product.variants} />
{product.descriptionHtml ? (
<Prose
className="mb-6 font-sans text-sm leading-tight dark:text-white/[60%]"
html={product.descriptionHtml}
/>
<Prose className="mb-6 font-sans text-sm leading-tight" html={product.descriptionHtml} />
) : null}
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />

4
components/product/variant-selector.tsx
View File

@ -86,12 +86,12 @@ export function VariantSelector({
}}
title={`${option.name} ${value}${!isAvailableForSale ? ' (Sold Out)' : ''}`}
className={clsx(
'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
'flex min-w-[48px] items-center justify-center rounded-full border bg-neutral-100 px-2 py-1 text-sm',
{
'cursor-default ring-2 ring-black': isActive,
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-black ':
!isActive && isAvailableForSale,
'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform dark:bg-neutral-900 dark:text-neutral-400 dark:ring-neutral-700 before:dark:bg-neutral-700':
'relative z-10 cursor-not-allowed overflow-hidden bg-neutral-100 text-neutral-500 ring-1 ring-neutral-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-neutral-300 before:transition-transform':
!isAvailableForSale
}
)}

2
components/prose.tsx
View File

@ -10,7 +10,7 @@ const Prose: FunctionComponent<TextProps> = ({ html, className }) => {
return (
<div
className={clsx(
'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6 dark:text-white dark:prose-headings:text-white dark:prose-a:text-white dark:prose-strong:text-white',
'prose mx-auto max-w-6xl text-base leading-7 text-black prose-headings:mt-8 prose-headings:font-semibold prose-headings:tracking-wide prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-a:text-black prose-a:underline hover:prose-a:text-neutral-300 prose-strong:text-black prose-ol:mt-8 prose-ol:list-decimal prose-ol:pl-6 prose-ul:mt-8 prose-ul:list-disc prose-ul:pl-6',
className
)}
dangerouslySetInnerHTML={{ __html: html as string }}

5
tailwind.config.js
View File

@ -3,6 +3,7 @@ const plugin = require('tailwindcss/plugin');
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./app/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
darkMode: 'media',
theme: {
extend: {
fontFamily: {
@ -31,10 +32,6 @@ module.exports = {
},
}
},
corePlugins: {
// Disable the dark mode variant for all utilities
darkMode: false,
},
future: {
hoverOnlyWhenSupported: true
},