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 UI for product description

Browse Source
This commit is contained in:
StephDietz
2023-07-11 09:34:38 -05:00
parent 25c91dc590
commit b2a3011ef1
4 changed files with 29 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
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,18 @@ 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">
<PlusIcon className="h-5" />
</div>
<span>{availableForSale ? 'Add To Cart' : 'Out Of Stock'}</span>
{isPending ? <LoadingDots className="bg-white dark:bg-black" /> : null}
{isPending ? <LoadingDots className="bg-white" /> : null}
</button>
);
}