diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx index 45286cdbe..bff48f417 100644 --- a/app/product/[handle]/page.tsx +++ b/app/product/[handle]/page.tsx @@ -2,10 +2,11 @@ import type { Metadata } from 'next'; import { notFound } from 'next/navigation'; import { Suspense } from 'react'; +import { AddToCart } from 'components/cart/add-to-cart'; import Grid from 'components/grid'; import Footer from 'components/layout/footer'; import ProductGridItems from 'components/layout/product-grid-items'; -import { AddToCart } from 'components/cart/add-to-cart'; +import Price from 'components/price'; import { Gallery } from 'components/product/gallery'; import { VariantSelector } from 'components/product/variant-selector'; import Prose from 'components/prose'; @@ -97,10 +98,22 @@ export default async function ProductPage({ params }: { params: { handle: string </div> <div className="p-6 lg:col-span-2"> + <div className="flex flex-col pb-6 mb-6 border-b dark:border-gray-700"> + <h1 className="mb-2 text-5xl font-medium">{product.title}</h1> + <div className="w-auto p-2 mr-auto text-sm text-white bg-blue-600 rounded-full"> + <Price + amount={product.priceRange.maxVariantPrice.amount} + currencyCode={product.priceRange.maxVariantPrice.currencyCode} + /> + </div> + </div> <VariantSelector options={product.options} variants={product.variants} /> {product.descriptionHtml ? ( - <Prose className="mb-6 text-sm leading-tight" html={product.descriptionHtml} /> + <Prose + className="mb-6 text-sm leading-tight dark:text-white/[60%]" + html={product.descriptionHtml} + /> ) : null} <AddToCart variants={product.variants} availableForSale={product.availableForSale} /> diff --git a/components/cart/add-to-cart.tsx b/components/cart/add-to-cart.tsx index eecee848e..b145f57a2 100644 --- a/components/cart/add-to-cart.tsx +++ b/components/cart/add-to-cart.tsx @@ -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> ); } diff --git a/components/product/gallery.tsx b/components/product/gallery.tsx index 7ee154b57..be92d6498 100644 --- a/components/product/gallery.tsx +++ b/components/product/gallery.tsx @@ -51,7 +51,7 @@ export function Gallery({ )} {images.length > 1 ? ( - <div className="absolute bottom-10 right-10 flex h-12 flex-row border border-white text-white shadow-xl dark:border-black dark:text-black"> + <div className="absolute flex flex-row h-12 text-white border border-white shadow-xl bottom-10 right-10 dark:border-black dark:text-black"> <button aria-label="Previous product image" className={clsx(buttonClassName, 'border-r border-white dark:border-black')} @@ -78,7 +78,7 @@ export function Gallery({ <button aria-label="Enlarge product image" key={image.src} - className="h-full w-1/4" + className="w-1/4 h-full" onClick={() => setCurrentImage(index)} > <GridTileImage diff --git a/components/product/variant-selector.tsx b/components/product/variant-selector.tsx index 520818516..0b3e0b5a2 100644 --- a/components/product/variant-selector.tsx +++ b/components/product/variant-selector.tsx @@ -85,7 +85,7 @@ export function VariantSelector({ return options.map((option) => ( <dl className="mb-8" key={option.id}> - <dt className="mb-4 text-sm uppercase tracking-wide">{option.name}</dt> + <dt className="mb-4 text-sm tracking-wide uppercase">{option.name}</dt> <dd className="flex flex-wrap gap-3"> {option.values.map((value) => { // Base option params on selected variant params. @@ -114,10 +114,10 @@ export function VariantSelector({ href={optionUrl} title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`} className={clsx( - 'flex h-12 min-w-[48px] items-center justify-center rounded-full px-2 text-sm', + 'flex min-w-[48px] items-center justify-center rounded-full border bg-gray-100 px-2 py-1 text-sm dark:border-gray-900 dark:bg-gray-900', { - 'cursor-default ring-2 ring-black dark:ring-white': isActive, - 'ring-1 ring-gray-300 transition duration-300 ease-in-out hover:scale-110 hover:bg-gray-100 hover:ring-black dark:ring-gray-700 dark:hover:bg-transparent dark:hover:ring-white': + 'cursor-default ring-2 ring-blue-600': isActive, + 'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-blue-600 ': !isActive && isAvailableForSale, 'relative z-10 cursor-not-allowed overflow-hidden bg-gray-100 ring-1 ring-gray-300 before:absolute before:inset-x-0 before:-z-10 before:h-px before:-rotate-45 before:bg-gray-300 before:transition-transform dark:bg-gray-900 dark:ring-gray-700 before:dark:bg-gray-700': !isAvailableForSale