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

Update to new design. (#1103)

Browse Source
This commit is contained in:
Lee Robinson
2023-07-24 21:40:29 -05:00
committed by GitHub
parent d918fcc895
commit 59fc2bc2e9
61 changed files with 1002 additions and 1247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
components/cart/add-to-cart.tsx
View File

@@ -1,12 +1,12 @@
'use client';
import { PlusIcon } from '@heroicons/react/24/outline';
import clsx from 'clsx';
import { addItem } from 'components/cart/actions';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState, useTransition } from 'react';
import LoadingDots from 'components/loading-dots';
import { ProductVariant } from 'lib/shopify/types';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useState, useTransition } from 'react';
export function AddToCart({
variants,
@@ -50,15 +50,17 @@ export function AddToCart({
});
}}
className={clsx(
'flex w-full items-center justify-center bg-black p-4 text-sm uppercase tracking-wide text-white opacity-90 hover:opacity-100 dark:bg-white dark:text-black',
'relative flex w-full items-center justify-center rounded-full bg-blue-600 p-4 tracking-wide text-white hover:opacity-90',
{
'cursor-not-allowed opacity-60': !availableForSale,
'cursor-not-allowed': isPending
}
)}
>
<div className="absolute left-0 ml-4">
{!isPending ? <PlusIcon className="h-5" /> : <LoadingDots className="mb-3 bg-white" />}
</div>
<span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
{isPending ? <LoadingDots className="bg-white dark:bg-black" /> : null}
</button>
);
}