53 lines
2.3 KiB
TypeScript
53 lines
2.3 KiB
TypeScript
'use client'
|
|
import { Transition } from '@headlessui/react';
|
|
import React, { Fragment, useState } from 'react'
|
|
|
|
export default function GuestBookQuickView(props: GuestBookEntry) {
|
|
const [isOpen, setIsOpen] = useState<boolean>(false);
|
|
|
|
const handleOpenView = () => setIsOpen(true);
|
|
const handleCloseView = () => setIsOpen(false);
|
|
|
|
return (
|
|
<>
|
|
<div
|
|
className='p-4 bg-brand-primary-900 rounded-lg hover:cursor-pointer hover:bg-brand-background-950 transition-colors duration-200'
|
|
onClick={handleOpenView}
|
|
>
|
|
<p>{props.fName + " " + props.lName}</p>
|
|
<p className='text-xs'>Added on: {new Date(props.createdAt).toDateString()}</p>
|
|
</div>
|
|
|
|
<Transition
|
|
as={Fragment}
|
|
show={isOpen}
|
|
enter="transition duration-200 ease-out"
|
|
enterFrom="opacity-0 scale-95"
|
|
enterTo="opacity-100 scale-100"
|
|
leave="transition duration-150 ease-in"
|
|
leaveFrom="opacity-100 scale-100"
|
|
leaveTo="opacity-0 scale-95"
|
|
>
|
|
<div className="absolute right-4 top-4 bg-white border shadow-lg rounded-lg p-6 w-[350px] max-w-full z-30">
|
|
<div className="flex justify-between items-center mb-2">
|
|
<h2 className="text-lg font-bold">Guest Details</h2>
|
|
<button onClick={handleCloseView} className="text-sm text-gray-600 hover:text-red-500">
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
<div className="space-y-2 text-sm">
|
|
<p><strong>Name:</strong> {props.fName} {props.lName}</p>
|
|
<p><strong>Side:</strong> {props.side}</p>
|
|
<p><strong>Email:</strong> {props.email || 'N/A'}</p>
|
|
<p><strong>Phone:</strong> {props.phone || 'N/A'}</p>
|
|
<p><strong>Address:</strong> {props.address || 'N/A'}</p>
|
|
<p><strong>Notes:</strong> {props.notes || 'None'}</p>
|
|
<p className='text-xs text-gray-500 pt-2'>Created: {new Date(props.createdAt).toLocaleString()}</p>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</>
|
|
)
|
|
}
|