styling friday

components/GuestBookQuickView.tsx

@@ -0,0 +1,52 @@
+'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>
+        </>
+    )
+}