rayan/next-learn
1
0
Fork 0
mirror of https://github.com/vercel/next-learn.git synced 2026-06-23 12:45:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implement new table component (#136)

Browse Source 
* 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 <delbabrown@gmail.com>
This commit is contained in:
Stephanie Dietz
2023-09-05 08:23:34 -05:00
committed by GitHub
parent acc531b370
commit ab4d446e34
3 changed files with 15 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard/15-final/app/dashboard/layout.tsx
View File

@@ -3,9 +3,11 @@ import SideNav from "../ui/dashboard-sidenav";
export default function Layout({ children }: { children: React.ReactNode }) {
return (
<div className="flex h-screen">
<SideNav />
<div className="w-full">
<div className="flex h-screen overflow-hidden">
<div className="w-14 md:w-64">
<SideNav />
</div>
<div className="flex-grow overflow-y-auto">
<TopNav />
<div className="p-4 sm:p-10 md:p-20">{children}</div>
</div>

2
dashboard/15-final/app/ui/dashboard-sidenav.tsx
View File

@@ -22,7 +22,7 @@ export default function SideNav() {
];
return (
<div className="flex h-full w-12 flex-col border-r p-1 md:w-72 md:p-4">
<div className="flex h-full w-full flex-col border-r p-1 md:p-4">
<Link href="/">
<Image
priority

13
dashboard/15-final/app/ui/table.tsx
View File

@@ -6,20 +6,21 @@ export default function Example() {
const customerName = customers.find(customer => customer.id === customerId);
return customerName ? customerName.name : null;
}
return (
<div className="w-full">
<div className="w-full flex items-center justify-between">
<h1 className="text-base font-semibold text-gray-900">Invoices</h1>
<Link
href="/dashboard/invoices/create"
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"
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"
>
Add Invoice
</Link>
</div>
<div className="mt-8">
<div className="overflow-x-auto">
<div className="overflow-hidden border rounded-md">
<div className="border rounded-md">
<table className="min-w-full divide-y divide-gray-300">
<thead className="bg-gray-50">
<tr>
@@ -50,11 +51,11 @@ export default function Example() {
{invoice.id}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{getNameById(invoice.customerId)}</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{(invoice.amount / 100).toLocaleString("en-US", {style: "currency", currency: "USD"})}</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{invoice.amount.toLocaleString("en-US", {style: "currency", currency: "USD"})}</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{invoice.status}</td>
<td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{invoice.date}</td>
<td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium sm:pr-6">
<Link href={`/dashboard/invoices/${invoice.id}`} className="text-indigo-600 hover:text-indigo-900">
<Link href={`/dashboard/invoices/${invoice.id}`} className="text-blue-600 hover:text-blue-900">
View<span className="sr-only">, {invoice.id}</span>
</Link>
</td>
@@ -68,3 +69,7 @@ export default function Example() {
</div>
)
}