fix: create side dialog for content inside PDP

Signed-off-by: Chloe <pinkcloudvnn@gmail.com>
This commit is contained in:
Chloe
2024-05-21 15:19:00 +07:00
parent 7c60e4e7f4
commit 4684d54ac3
10 changed files with 156 additions and 63 deletions

View File

@@ -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&apos;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 />