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

Add customer table UI (#142)

Browse Source 
* add customers table

* remove unused imports

* fix width issue for prof image in small screens
This commit is contained in:
Stephanie Dietz
2023-09-06 07:06:56 -05:00
committed by GitHub
parent b85b3e217b
commit 482f4bf042
4 changed files with 77 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
dashboard/15-final/app/dashboard/customers/page.tsx
View File

@@ -1,3 +1,9 @@
import CustomersTable from "@/app/ui/customers/table";
export default function Page() {
return <div>List of customers</div>
return (
<div>
<CustomersTable />
</div>
)
}

4
dashboard/15-final/app/dashboard/invoices/page.tsx
View File

@@ -1,9 +1,9 @@
import Table from "@/app/ui/invoices/table";
import InvoicesTable from "@/app/ui/invoices/table";
export default function Page() {
return (
<div>
<Table />
<InvoicesTable />
</div>
);
}

66
dashboard/15-final/app/ui/customers/table.tsx Normal file
View File

@@ -0,0 +1,66 @@
import { customers, invoices } from "@/app/lib/dummy-data";
import Image from "next/image";
export default function CustomersTable() {
function totalInvoices(customerId: number) {
const customerInvoices = invoices.filter((invoice) => {
return invoice.customerId === customerId
});
return customerInvoices.length;
};
return (
<div className="w-full">
<div className="flex w-full items-center justify-between">
<h1 className="text-base font-semibold">Customers</h1>
</div>
<div className="mt-8">
<div className="overflow-x-auto">
<div className="rounded-md border">
<table className="min-w-full divide-y divide-gray-300">
<thead className="bg-gray-50 text-left text-sm">
<tr>
<th scope="col" className="relative py-3.5 pl-3 pr-4 sm:pr-6">
<span className="sr-only">Profile</span>
</th>
<th scope="col" className="px-3.5 py-3.5 sm:pl-6">
Name
</th>
<th scope="col" className="px-3 py-3.5 font-semibold">
Email
</th>
<th scope="col" className="px-3 py-3.5 font-semibold">
Total Invoices
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-200 bg-white text-gray-500">
{customers.map((customer) => (
<tr key={customer.id}>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-black sm:pl-6">
<div className="flex w-7 flex-none items-center">
<img
src={customer.imageUrl}
alt={customer.name}
className="h-7 w-full flex-none rounded-full"
/>
</div>
</td>
<td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-black sm:pl-6">
{customer.name}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm">
{customer.email}
</td>
<td className="whitespace-nowrap px-3 py-4 text-sm">
{totalInvoices(customer.id)}
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
);
}

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

@@ -1,5 +1,6 @@
import { invoices, customers } from "@/app/lib/dummy-data";
import { Customer } from "@/app/lib/definitions";
import Link from "next/link";
import {
PencilSquareIcon,
@@ -26,7 +27,7 @@ function renderInvoiceStatus(status: string) {
}
}
export default function Table() {
export default function InvoicesTable() {
function getCustomerById(customerId: number): Customer | null {
const customer = customers.find((customer) => customer.id === customerId);
return customer ? customer : null;