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

styling product description

Browse Source
This commit is contained in:
Samantha Kellow 2024-04-24 18:37:29 +01:00
parent b8280101ad
commit 7666a25f91
7 changed files with 12 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
@/components/ui/accordion.tsx
View File

@ -1,8 +1,8 @@
"use client"
import * as React from "react"
import * as AccordionPrimitive from "@radix-ui/react-accordion"
import { ChevronDown } from "lucide-react"
import * as React from "react"
import { cn } from "@/lib/utils"
@ -14,7 +14,7 @@ const AccordionItem = React.forwardRef<
>(({ className, ...props }, ref) => (
<AccordionPrimitive.Item
ref={ref}
className={cn("border-b", className)}
className={cn("border-b border-neutral-600", className)}
{...props}
/>
))
@ -57,4 +57,5 @@ const AccordionContent = React.forwardRef<
))
AccordionContent.displayName = AccordionPrimitive.Content.displayName
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }

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

@ -50,7 +50,7 @@ export function AddToCart({
});
}}
className={clsx(
'relative flex w-full items-center justify-center rounded bg-gray-600 p-4 tracking-wide text-white hover:opacity-90',
'relative flex w-full items-center justify-center rounded bg-neutral-800 p-4 tracking-wide text-white hover:opacity-90',
{
'cursor-not-allowed opacity-60': !availableForSale,
'cursor-not-allowed': isPending

2
components/cart/modal.tsx
View File

@ -176,7 +176,7 @@ export default function CartModal({ cart }: { cart: Cart | undefined }) {
</div>
<a
href={cart.checkoutUrl}
className="block w-full rounded bg-gray-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
className="block w-full rounded bg-neutral-600 p-3 text-center text-sm font-medium text-white opacity-90 hover:opacity-100"
>
Proceed to Checkout
</a>

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

@ -16,7 +16,7 @@ export default function OpenCart({
/>
{quantity ? (
<div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-gray-600 text-[11px] font-medium text-white">
<div className="absolute right-0 top-0 -mr-2 -mt-2 h-4 w-4 rounded bg-neutral-800 text-[11px] font-medium text-white">
{quantity}
</div>
) : null}

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

@ -8,7 +8,7 @@ export function ProductDescription({ product }: { product: Product }) {
return (
<>
<div className="flex flex-col">
<h1 className="mb-2 text-2xl md:text-3xl font-medium">{product.title}</h1>
<h1 className="mb-2 text-xl sm:text-2xl md:text-3xl font-medium">{product.title}</h1>
</div>
<VariantDetails product={product} />
<AddToCart variants={product.variants} availableForSale={product.availableForSale} />

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

@ -11,8 +11,8 @@ export function VariantDetails({ product }: { product: Product }) {
return (
<>
<div className='flex flex-col border-b mb-6 dark:border-neutral-700'>
<div className="place-self-end mr-auto w-auto rounded bg-gray-600 p-2 text-sm text-white mb-6">
<div className='border-b mb-6 border-neutral-500 dark:border-neutral-700 display-flex justify-end'>
<div className="place-self-end justify-end mr-auto w-25 roundedp-2 text-sm text-neutral-300 mb-6">
<Price
amount={selectedVariant?.price?.amount || product.variants[0]!.price.amount}
currencyCode={product.priceRange.maxVariantPrice.currencyCode}

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

@ -126,9 +126,9 @@ export function VariantSelector({
href={optionUrl}
title={`${option.name} ${value}${!isAvailableForSale ? ' (Out of Stock)' : ''}`}
className={clsx(
'flex min-w-[48px] items-center justify-center rounded border bg-neutral-777 px-2 py-1 text-sm dark:border-neutral-800 dark:bg-neutral-900',
'flex min-w-[48px] items-center justify-center rounded border border-neutral-600 px-2 py-1 text-sm text-neutral-200 dark:border-neutral-800 dark:bg-neutral-900',
{
'cursor-default ring-2 ring-gray-600': isActive,
'cursor-default ring-1 ring-gray-600 bg-neutral-300 text-neutral-900': isActive,
'ring-1 ring-transparent transition duration-300 ease-in-out hover:scale-110 hover:ring-gray-600 ':
!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':