Skip to content

Commit ab4d446

Browse files
Implement new table component (#136)
* add table compoennt * format * format * change table type to be a card * update table header and link * update layout and table width * edit table * fix layout overflow issue with table * fix mege issue with dummy data * make only content portion scrollable * increase w of side nav in mobile * remove duplicate date key --------- Co-authored-by: Delba de Oliveira <[email protected]>
1 parent acc531b commit ab4d446

File tree

3 files changed

+15
-8
lines changed

3 files changed

+15
-8
lines changed

dashboard/15-final/app/dashboard/layout.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import SideNav from "../ui/dashboard-sidenav";
33

44
export default function Layout({ children }: { children: React.ReactNode }) {
55
return (
6-
<div className="flex h-screen">
7-
<SideNav />
8-
<div className="w-full">
6+
<div className="flex h-screen overflow-hidden">
7+
<div className="w-14 md:w-64">
8+
<SideNav />
9+
</div>
10+
<div className="flex-grow overflow-y-auto">
911
<TopNav />
1012
<div className="p-4 sm:p-10 md:p-20">{children}</div>
1113
</div>

dashboard/15-final/app/ui/dashboard-sidenav.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function SideNav() {
2222
];
2323

2424
return (
25-
<div className="flex h-full w-12 flex-col border-r p-1 md:w-72 md:p-4">
25+
<div className="flex h-full w-full flex-col border-r p-1 md:p-4">
2626
<Link href="/">
2727
<Image
2828
priority

dashboard/15-final/app/ui/table.tsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,20 +6,21 @@ export default function Example() {
66
const customerName = customers.find(customer => customer.id === customerId);
77
return customerName ? customerName.name : null;
88
}
9+
910
return (
1011
<div className="w-full">
1112
<div className="w-full flex items-center justify-between">
1213
<h1 className="text-base font-semibold text-gray-900">Invoices</h1>
1314
<Link
1415
href="/dashboard/invoices/create"
15-
className="block rounded-md bg-indigo-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
16+
className="block rounded-md bg-blue-600 px-3 py-2 text-center text-sm font-semibold text-white shadow-sm hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600"
1617
>
1718
Add Invoice
1819
</Link>
1920
</div>
2021
<div className="mt-8">
2122
<div className="overflow-x-auto">
22-
<div className="overflow-hidden border rounded-md">
23+
<div className="border rounded-md">
2324
<table className="min-w-full divide-y divide-gray-300">
2425
<thead className="bg-gray-50">
2526
<tr>
@@ -50,11 +51,11 @@ export default function Example() {
5051
{invoice.id}
5152
</td>
5253
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{getNameById(invoice.customerId)}</td>
53-
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{(invoice.amount / 100).toLocaleString("en-US", {style: "currency", currency: "USD"})}</td>
54+
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{invoice.amount.toLocaleString("en-US", {style: "currency", currency: "USD"})}</td>
5455
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{invoice.status}</td>
5556
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{invoice.date}</td>
5657
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
57-
<Link href={`/dashboard/invoices/${invoice.id}`} className="text-indigo-600 hover:text-indigo-900">
58+
<Link href={`/dashboard/invoices/${invoice.id}`} className="text-blue-600 hover:text-blue-900">
5859
View<span className="sr-only">, {invoice.id}</span>
5960
</Link>
6061
</td>
@@ -68,3 +69,7 @@ export default function Example() {
6869
</div>
6970
)
7071
}
72+
73+
74+
75+

0 commit comments

Comments
 (0)