bustikiller/wedding-planner-frontend
1
0
Fork 0
Code Issues 1 Pull Requests 7 Actions Packages Projects Releases Wiki Activity

Create a draft of the guests list

Browse Source
This commit is contained in:
Manuel Bustillo 2024-08-11 13:12:03 +02:00
parent f945f08088
commit 025ed094e7
4 changed files with 57 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/dashboard/guests/page.tsx
View File

@ -1,10 +1,12 @@
import { lusitana } from '@/app/ui/fonts';
import GuestsTable from '@/app/ui/guests/table';
export default function Page() {
return (
<div className="w-full">
<h1 className={`${lusitana.className} text-2xl py-4`}>Guests</h1>
<div className="flex w-full items-center justify-between">
<h1 className={`${lusitana.className} text-2xl`}>Guests</h1>
<GuestsTable />
</div>
</div>
);

6
app/lib/definitions.ts
View File

@ -16,6 +16,12 @@ export type Customer = {
image_url: string;
};
export type Guest = {
id: string;
name: string;
email: string;
}
export type Invoice = {
id: string;
customer_id: string;

131
app/ui/guests/table.tsx
View File

@ -2,123 +2,54 @@ import Image from 'next/image';
import { UpdateInvoice, DeleteInvoice } from '@/app/ui/guests/buttons';
import gueststatus from '@/app/ui/guests/status';
import { formatDateToLocal, formatCurrency } from '@/app/lib/utils';
import { fetchFilteredguests } from '@/app/lib/data';
import { Guest } from '@/app/lib/definitions';
export default async function guestsTable({
query,
currentPage,
}: {
query: string;
currentPage: number;
}) {
const guests = await fetchFilteredguests(query, currentPage);
export default async function guestsTable() {
const guests: Guest[] = [
{
id: '1',
name: 'John Doe',
email: 'foo@bar.com'
},
{
id: '2',
name: 'Jane Doe',
email: 'jane@bar.com',
},
];
return (
<div className="mt-6 flow-root">
<div className="inline-block min-w-full align-middle">
<div className="rounded-lg bg-gray-50 p-2 md:pt-0">
<div className="md:hidden">
{guests?.map((invoice) => (
<div
key={invoice.id}
className="mb-2 w-full rounded-md bg-white p-4"
>
<div className="flex items-center justify-between border-b pb-4">
<div>
<div className="mb-2 flex items-center">
<Image
src={invoice.image_url}
className="mr-2 rounded-full"
width={28}
height={28}
alt={`${invoice.name}'s profile picture`}
/>
<p>{invoice.name}</p>
</div>
<p className="text-sm text-gray-500">{invoice.email}</p>
</div>
<gueststatus status={invoice.status} />
</div>
<div className="flex w-full items-center justify-between pt-4">
<div>
<p className="text-xl font-medium">
{formatCurrency(invoice.amount)}
</p>
<p>{formatDateToLocal(invoice.date)}</p>
</div>
<div className="flex justify-end gap-2">
<UpdateInvoice id={invoice.id} />
<DeleteInvoice id={invoice.id} />
</div>
</div>
</div>
))}
</div>
<table className="hidden min-w-full text-gray-900 md:table">
<thead className="rounded-lg text-left text-sm font-normal">
<div className="w-full relative overflow-x-auto shadow-md sm:rounded-lg">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-4 py-5 font-medium sm:pl-6">
Customer
<th scope="col" className="px-6 py-3">
Name
</th>
<th scope="col" className="px-3 py-5 font-medium">
<th scope="col" className="px-6 py-3">
Email
</th>
<th scope="col" className="px-3 py-5 font-medium">
Amount
</th>
<th scope="col" className="px-3 py-5 font-medium">
Date
</th>
<th scope="col" className="px-3 py-5 font-medium">
<th scope="col" className="px-6 py-3">
Status
</th>
<th scope="col" className="relative py-3 pl-6 pr-3">
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody className="bg-white">
{guests?.map((invoice) => (
<tr
key={invoice.id}
className="w-full border-b py-3 text-sm last-of-type:border-none [&:first-child>td:first-child]:rounded-tl-lg [&:first-child>td:last-child]:rounded-tr-lg [&:last-child>td:first-child]:rounded-bl-lg [&:last-child>td:last-child]:rounded-br-lg"
>
<td className="whitespace-nowrap py-3 pl-6 pr-3">
<div className="flex items-center gap-3">
<Image
src={invoice.image_url}
className="rounded-full"
width={28}
height={28}
alt={`${invoice.name}'s profile picture`}
/>
<p>{invoice.name}</p>
</div>
<tbody>
{guests.map((guest) => (
<tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{guest.name}
</th>
<td className="px-6 py-4">
{guest.email}
</td>
<td className="whitespace-nowrap px-3 py-3">
{invoice.email}
</td>
<td className="whitespace-nowrap px-3 py-3">
{formatCurrency(invoice.amount)}
</td>
<td className="whitespace-nowrap px-3 py-3">
{formatDateToLocal(invoice.date)}
</td>
<td className="whitespace-nowrap px-3 py-3">
<gueststatus status={invoice.status} />
</td>
<td className="whitespace-nowrap py-3 pl-6 pr-3">
<div className="flex justify-end gap-3">
<UpdateInvoice id={invoice.id} />
<DeleteInvoice id={invoice.id} />
</div>
<td className="px-6 py-4">
Confirmed
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
);
}

1
tailwind.config.ts
View File

@ -6,6 +6,7 @@ const config: Config = {
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
],
darkMode: 'selector',
theme: {
extend: {
gridTemplateColumns: {