crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-07-25 03:01:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: playing around with styles and layout on PDP

Browse Source 
Signed-off-by: jrphilo <james.philo@me.com>
This commit is contained in:
jrphilo
2024-05-12 13:39:14 +02:00
parent 80db45a522
commit 598c1ad53e
9 changed files with 98 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
components/product/warranty-selector.tsx
View File

@@ -13,22 +13,17 @@ const plans: Array<{
price: number;
}> = [
{
template: (
<>
<span>Included</span>
<span>3-Year Warranty</span>
</>
),
template: <span className="font-bold">3-Year Warranty</span>,
price: 0,
key: 'Included'
},
{
template: <span>Premium Labor</span>,
template: <span className="font-bold">Premium Labor</span>,
price: 150,
key: 'Premium Labor'
},
{
template: <span>+1 Year</span>,
template: <span className="font-bold">+1 Year</span>,
price: 100,
key: '+1 Year'
}
@@ -42,9 +37,9 @@ const WarrantySelector = () => {
<button
onClick={() => setSelectedOptions(plan.key)}
className={cn(
'flex w-full flex-col flex-wrap items-center justify-center space-y-2 rounded-md border p-2 text-center text-xs font-medium',
'font-base flex w-full flex-col flex-wrap items-center justify-center space-y-0.5 rounded border text-center text-xs',
{
'ring-2 ring-secondary': plan.key === selectedOptions
'border-0 ring-2 ring-secondary': plan.key === selectedOptions
}
)}
>