mirror of
https://github.com/vercel/commerce.git
synced 2025-07-23 04:36:49 +00:00
fix: create side dialog for content inside PDP
Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
@@ -1,8 +1,13 @@
|
||||
'use client';
|
||||
|
||||
import { ShieldCheckIcon } from '@heroicons/react/24/outline';
|
||||
import Link from 'next/link';
|
||||
import SideDialog from 'components/side-dialog';
|
||||
import { useState } from 'react';
|
||||
import WarrantySelector from './warranty-selector';
|
||||
|
||||
const Warranty = () => {
|
||||
const [openingDialog, setOpeningDialog] = useState<'included' | 'terms-conditions' | null>(null);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col text-xs lg:text-sm">
|
||||
<div className="mb-3 flex flex-row items-center space-x-1 divide-x divide-gray-400 leading-none lg:space-x-3">
|
||||
@@ -11,14 +16,34 @@ const Warranty = () => {
|
||||
<span>Warranty</span>
|
||||
</div>
|
||||
<div className="pl-2">
|
||||
<Link href="#" className="text-xs text-blue-800 hover:underline lg:text-sm">
|
||||
<button
|
||||
onClick={() => setOpeningDialog('included')}
|
||||
className="text-xs text-blue-800 hover:underline lg:text-sm"
|
||||
>
|
||||
What's Included
|
||||
</Link>
|
||||
</button>
|
||||
<SideDialog
|
||||
title="What's Included"
|
||||
onClose={() => setOpeningDialog(null)}
|
||||
open={openingDialog === 'included'}
|
||||
>
|
||||
<p>Warranty Included</p>
|
||||
</SideDialog>
|
||||
</div>
|
||||
<div className="pl-2">
|
||||
<Link href="#" className="text-xs text-blue-800 hover:underline lg:text-sm">
|
||||
<button
|
||||
onClick={() => setOpeningDialog('terms-conditions')}
|
||||
className="text-xs text-blue-800 hover:underline lg:text-sm"
|
||||
>
|
||||
Terms & Conditions
|
||||
</Link>
|
||||
</button>
|
||||
<SideDialog
|
||||
title="Terms & Conditions"
|
||||
onClose={() => setOpeningDialog(null)}
|
||||
open={openingDialog === 'terms-conditions'}
|
||||
>
|
||||
<p>Terms & Conditions</p>
|
||||
</SideDialog>
|
||||
</div>
|
||||
</div>
|
||||
<WarrantySelector />
|
||||
|
Reference in New Issue
Block a user