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

Basic definition of a table component
All checks were successful
Check usage of free licenses / build-static-assets (pull_request) Successful in 1m10s
Details
Add copyright notice / copyright_notice (pull_request) Successful in 1m34s
Details
Playwright Tests / test (pull_request) Successful in 5m56s
Details
Build Nginx-based docker image / build-static-assets (pull_request) Successful in 10m23s
Details

Browse Source
This commit is contained in:
Manuel Bustillo 2024-11-01 18:25:00 +01:00
parent a55b819378
commit 58b02839f2
3 changed files with 84 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
app/dashboard/tables/page.tsx
View File

@ -1,12 +1,59 @@
/* Copyright (C) 2024 Manuel Bustillo*/ /* Copyright (C) 2024 Manuel Bustillo*/
import { Table } from '@/app/ui/components/table';
import Summary from '@/app/ui/expenses/summary';
import { lusitana } from '@/app/ui/fonts'; import { lusitana } from '@/app/ui/fonts';
export default function Page () { export default function Page() {
return ( return (
<div className="w-full"> <div className="w-full">
<div className="flex w-full items-center justify-between"> <div className="w-full items-center justify-between">
<h1 className={`${lusitana.className} text-2xl`}>Table distributions</h1> <h1 className={`${lusitana.className} text-2xl`}>Table distributions</h1>
<div className="flex flex-row flex-wrap justify-around">
<Table guests={
[
{ name: "George Orwell", id: "1" },
{ name: "Aldous Huxley", id: "2" },
{ name: "Isaac Asimov", id: "3" },
{ name: "Arthur C. Clarke", id: "4" },
{ name: "Philip Roth", id: "5" },
{ name: "Kurt Vonnegut", id: "6" },
{ name: "Ray Bradbury", id: "7" },
{ name: "Jorge Luis Borges", id: "8" },
{ name: "Gabriel García Márquez", id: "9" },
{ name: "Julio Cortázar", id: "10" },
]
} />
<Table guests={
[
{ name: "George Orwell", id: "1" },
{ name: "Aldous Huxley", id: "2" },
{ name: "Isaac Asimov", id: "3" },
{ name: "Arthur C. Clarke", id: "4" },
{ name: "Philip Roth", id: "5" },
{ name: "Kurt Vonnegut", id: "6" },
{ name: "Ray Bradbury", id: "7" },
{ name: "Jorge Luis Borges", id: "8" },
{ name: "Gabriel García Márquez", id: "9" },
{ name: "Julio Cortázar", id: "10" },
]
} />
<Table guests={
[
{ name: "George Orwell", id: "1" },
{ name: "Aldous Huxley", id: "2" },
{ name: "Isaac Asimov", id: "3" },
{ name: "Arthur C. Clarke", id: "4" },
{ name: "Philip Roth", id: "5" },
{ name: "Kurt Vonnegut", id: "6" },
{ name: "Ray Bradbury", id: "7" },
{ name: "Jorge Luis Borges", id: "8" },
{ name: "Gabriel García Márquez", id: "9" },
{ name: "Julio Cortázar", id: "10" },
]
} />
</div>
</div> </div>
</div> </div>
); );

6
app/lib/definitions.ts
View File

@ -21,9 +21,9 @@ export type Customer = {
export type Guest = { export type Guest = {
id: string; id: string;
name: string; name: string;
email: string; email?: string;
group_name: string; group_name?: string;
status: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative'; status?: 'Considered' | 'Invited' | 'Confirmed' | 'Declined' | 'Tentative';
} }
export type Group = { export type Group = {

31
app/ui/components/table.tsx Normal file
View File

@ -0,0 +1,31 @@
import { Guest } from "@/app/lib/definitions";
function GuestRow({ guests }: { guests: Guest[] }) {
return (<div className="justify-around flex flex-row">
{
guests.map((guest) => {
return (
<div className="m-3 w-24 h-24 rounded-full bg-neutral-400 hover:bg-neutral-500 content-center text-center">
{guest.name}
</div>
)
})
}
</div>)
}
export function Table({ guests }: { guests: Guest[] }) {
const halfwayThrough = Math.floor(guests.length / 2)
const arrayFirstHalf = guests.slice(0, halfwayThrough);
const arraySecondHalf = guests.slice(halfwayThrough, guests.length);
return (
<div className="m-12 h-64 bg-neutral-300 flex flex-col justify-between">
<GuestRow guests={arrayFirstHalf} />
<GuestRow guests={arraySecondHalf} />
</div>
)
}