mirror of
https://github.com/vercel/next-learn.git
synced 2026-07-07 22:18:45 +00:00
Duplicate starter
This commit is contained in:
Delba de Oliveira
64
dashboard/starter-example/app/ui/dashboard/cards.tsx
Normal file
64
dashboard/starter-example/app/ui/dashboard/cards.tsx
Normal file
@@ -0,0 +1,64 @@
|
||||
import {
|
||||
BanknotesIcon,
|
||||
ClockIcon,
|
||||
UserGroupIcon,
|
||||
InboxIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
import { fetchCardData } from '@/app/lib/data';
|
||||
|
||||
const iconMap = {
|
||||
collected: BanknotesIcon,
|
||||
customers: UserGroupIcon,
|
||||
pending: ClockIcon,
|
||||
invoices: InboxIcon,
|
||||
};
|
||||
|
||||
export default async function Cards() {
|
||||
const {
|
||||
numberOfInvoices,
|
||||
numberOfCustomers,
|
||||
totalPaidInvoices,
|
||||
totalPendingInvoices,
|
||||
} = await fetchCardData();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card title="Collected" value={totalPaidInvoices} type="collected" />
|
||||
<Card title="Pending" value={totalPendingInvoices} type="pending" />
|
||||
<Card title="Total Invoices" value={numberOfInvoices} type="invoices" />
|
||||
<Card
|
||||
title="Total Customers"
|
||||
value={numberOfCustomers}
|
||||
type="customers"
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function Card({
|
||||
title,
|
||||
value,
|
||||
type,
|
||||
}: {
|
||||
title: string;
|
||||
value: number | string;
|
||||
type: 'invoices' | 'customers' | 'pending' | 'collected';
|
||||
}) {
|
||||
const Icon = iconMap[type];
|
||||
|
||||
return (
|
||||
<div className="rounded-xl bg-gray-50 p-2 shadow-sm">
|
||||
<div className="flex p-4">
|
||||
{Icon ? <Icon className="h-5 w-5 text-gray-700" /> : null}
|
||||
<h3 className="ml-2 text-sm font-medium">{title}</h3>
|
||||
</div>
|
||||
<p
|
||||
className={`${lusitana.className}
|
||||
truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
|
||||
>
|
||||
{value}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,60 @@
|
||||
import { ArrowPathIcon } from '@heroicons/react/24/outline';
|
||||
import clsx from 'clsx';
|
||||
import Image from 'next/image';
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
import { fetchLatestInvoices } from '@/app/lib/data';
|
||||
export default async function LatestInvoices() {
|
||||
const latestInvoices = await fetchLatestInvoices();
|
||||
|
||||
return (
|
||||
<div className="flex w-full flex-col md:col-span-4 lg:col-span-4">
|
||||
<h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
|
||||
Latest Invoices
|
||||
</h2>
|
||||
<div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
|
||||
<div className="bg-white px-6">
|
||||
{latestInvoices.map((invoice, i) => {
|
||||
return (
|
||||
<div
|
||||
key={invoice.id}
|
||||
className={clsx(
|
||||
'flex flex-row items-center justify-between py-4',
|
||||
{
|
||||
'border-t': i !== 0,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Image
|
||||
src={invoice.image_url}
|
||||
alt={`${invoice.name}'s profile picture`}
|
||||
className="mr-4 rounded-full"
|
||||
width={32}
|
||||
height={32}
|
||||
/>
|
||||
<div className="min-w-0">
|
||||
<p className="truncate text-sm font-semibold md:text-base">
|
||||
{invoice.name}
|
||||
</p>
|
||||
<p className="hidden text-sm text-gray-500 sm:block">
|
||||
{invoice.email}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<p
|
||||
className={`${lusitana.className} truncate text-sm font-medium md:text-base`}
|
||||
>
|
||||
{invoice.amount}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="flex items-center pb-2 pt-6">
|
||||
<ArrowPathIcon className="h-5 w-5 text-gray-500" />
|
||||
<h3 className="ml-2 text-sm text-gray-500 ">Updated just now</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
49
dashboard/starter-example/app/ui/dashboard/nav-links.tsx
Normal file
49
dashboard/starter-example/app/ui/dashboard/nav-links.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
'use client';
|
||||
|
||||
import {
|
||||
UserGroupIcon,
|
||||
HomeIcon,
|
||||
DocumentDuplicateIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import Link from 'next/link';
|
||||
import { usePathname } from 'next/navigation';
|
||||
import clsx from 'clsx';
|
||||
|
||||
// Map of links to display in the side navigation.
|
||||
// Depending on the size of the application, this would be stored in a database.
|
||||
const links = [
|
||||
{ name: 'Home', href: '/dashboard', icon: HomeIcon },
|
||||
{
|
||||
name: 'Invoices',
|
||||
href: '/dashboard/invoices',
|
||||
icon: DocumentDuplicateIcon,
|
||||
},
|
||||
{ name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
|
||||
];
|
||||
|
||||
export default function NavLinks() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<>
|
||||
{links.map((link) => {
|
||||
const LinkIcon = link.icon;
|
||||
return (
|
||||
<Link
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
className={clsx(
|
||||
'flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3',
|
||||
{
|
||||
'bg-sky-100 text-blue-600': pathname === link.href,
|
||||
},
|
||||
)}
|
||||
>
|
||||
<LinkIcon className="w-6" />
|
||||
<p className="hidden md:block">{link.name}</p>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
62
dashboard/starter-example/app/ui/dashboard/revenue-chart.tsx
Normal file
62
dashboard/starter-example/app/ui/dashboard/revenue-chart.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
import { generateYAxis } from '@/app/lib/utils';
|
||||
import { CalendarIcon } from '@heroicons/react/24/outline';
|
||||
import { lusitana } from '@/app/ui/fonts';
|
||||
import { fetchRevenue } from '@/app/lib/data';
|
||||
|
||||
// This component is representational only.
|
||||
// For data visualization UI, check out:
|
||||
// https://www.tremor.so/
|
||||
// https://www.chartjs.org/
|
||||
// https://airbnb.io/visx/
|
||||
|
||||
export default async function RevenueChart() {
|
||||
const revenue = await fetchRevenue();
|
||||
|
||||
const chartHeight = 350;
|
||||
const { yAxisLabels, topLabel } = generateYAxis(revenue);
|
||||
|
||||
if (!revenue || revenue.length === 0) {
|
||||
return <p className="mt-4 text-gray-400">No data available.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="w-full md:col-span-4">
|
||||
<h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
|
||||
Recent Revenue
|
||||
</h2>
|
||||
<div className="rounded-xl bg-gray-50 p-4">
|
||||
<div className="sm:grid-cols-13 mt-0 grid grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4">
|
||||
{/* y-axis */}
|
||||
<div
|
||||
className="mb-6 hidden flex-col justify-between text-sm text-gray-400 sm:flex"
|
||||
style={{ height: `${chartHeight}px` }}
|
||||
>
|
||||
{yAxisLabels.map((label) => (
|
||||
<p key={label}>{label}</p>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{revenue.map((month) => (
|
||||
<div key={month.month} className="flex flex-col items-center gap-2">
|
||||
{/* bars */}
|
||||
<div
|
||||
className="w-full rounded-md bg-blue-300"
|
||||
style={{
|
||||
height: `${(chartHeight / topLabel) * month.revenue}px`,
|
||||
}}
|
||||
></div>
|
||||
{/* x-axis */}
|
||||
<p className="-rotate-90 text-sm text-gray-400 sm:rotate-0">
|
||||
{month.month}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center pb-2 pt-6">
|
||||
<CalendarIcon className="h-5 w-5 text-gray-500" />
|
||||
<h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
dashboard/starter-example/app/ui/dashboard/sidenav.tsx
Normal file
35
dashboard/starter-example/app/ui/dashboard/sidenav.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import Link from 'next/link';
|
||||
import NavLinks from '@/app/ui/dashboard/nav-links';
|
||||
import AcmeLogo from '../acme-logo';
|
||||
import { PowerIcon } from '@heroicons/react/24/outline';
|
||||
import { signOut } from '@/auth';
|
||||
|
||||
export default function SideNav() {
|
||||
return (
|
||||
<div className="flex h-full flex-col px-3 py-4 md:px-2">
|
||||
<Link
|
||||
className="mb-2 flex h-20 items-end justify-start rounded-md bg-blue-600 p-4 md:h-40"
|
||||
href="/"
|
||||
>
|
||||
<div className="w-32 text-white md:w-40">
|
||||
<AcmeLogo />
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex grow flex-row justify-between space-x-2 md:flex-col md:space-x-0 md:space-y-2">
|
||||
<NavLinks />
|
||||
<div className="hidden h-auto w-full grow rounded-md bg-gray-50 md:block"></div>
|
||||
<form
|
||||
action={async () => {
|
||||
'use server';
|
||||
await signOut();
|
||||
}}
|
||||
>
|
||||
<button className="flex h-[48px] grow items-center justify-center gap-2 rounded-md bg-gray-50 p-3 text-sm font-medium hover:bg-sky-100 hover:text-blue-600 md:flex-none md:justify-start md:p-2 md:px-3">
|
||||
<PowerIcon className="w-6" />
|
||||
<div className="hidden md:block">Sign Out</div>
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
218
dashboard/starter-example/app/ui/dashboard/skeletons.tsx
Normal file
218
dashboard/starter-example/app/ui/dashboard/skeletons.tsx
Normal file
@@ -0,0 +1,218 @@
|
||||
// Loading animation
|
||||
const shimmer =
|
||||
'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent';
|
||||
|
||||
export function CardSkeleton() {
|
||||
return (
|
||||
<div
|
||||
className={`${shimmer} relative overflow-hidden rounded-xl bg-gray-100 p-2 shadow-sm`}
|
||||
>
|
||||
<div className="flex p-4">
|
||||
<div className="h-5 w-5 rounded-md bg-gray-200" />
|
||||
<div className="ml-2 h-6 w-16 rounded-md bg-gray-200 text-sm font-medium" />
|
||||
</div>
|
||||
<div className="flex items-center justify-center truncate rounded-xl bg-white px-4 py-8">
|
||||
<div className="h-7 w-20 rounded-md bg-gray-200" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function CardsSkeleton() {
|
||||
return (
|
||||
<>
|
||||
<CardSkeleton />
|
||||
<CardSkeleton />
|
||||
<CardSkeleton />
|
||||
<CardSkeleton />
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function RevenueChartSkeleton() {
|
||||
return (
|
||||
<div className={`${shimmer} relative w-full overflow-hidden md:col-span-4`}>
|
||||
<div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
|
||||
<div className="rounded-xl bg-gray-100 p-4">
|
||||
<div className="sm:grid-cols-13 mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 md:gap-4" />
|
||||
<div className="flex items-center pb-2 pt-6">
|
||||
<div className="h-5 w-5 rounded-full bg-gray-200" />
|
||||
<div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function InvoiceSkeleton() {
|
||||
return (
|
||||
<div className="flex flex-row items-center justify-between border-b border-gray-100 py-4">
|
||||
<div className="flex items-center">
|
||||
<div className="mr-2 h-8 w-8 rounded-full bg-gray-200" />
|
||||
<div className="min-w-0">
|
||||
<div className="h-5 w-40 rounded-md bg-gray-200" />
|
||||
<div className="mt-2 h-4 w-12 rounded-md bg-gray-200" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-2 h-4 w-12 rounded-md bg-gray-200" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function LatestInvoicesSkeleton() {
|
||||
return (
|
||||
<div
|
||||
className={`${shimmer} relative flex w-full flex-col overflow-hidden md:col-span-4 lg:col-span-4`}
|
||||
>
|
||||
<div className="mb-4 h-8 w-36 rounded-md bg-gray-100" />
|
||||
<div className="flex grow flex-col justify-between rounded-xl bg-gray-100 p-4">
|
||||
<div className="bg-white px-6">
|
||||
<InvoiceSkeleton />
|
||||
<InvoiceSkeleton />
|
||||
<InvoiceSkeleton />
|
||||
<InvoiceSkeleton />
|
||||
<InvoiceSkeleton />
|
||||
<div className="flex items-center pb-2 pt-6">
|
||||
<div className="h-5 w-5 rounded-full bg-gray-200" />
|
||||
<div className="ml-2 h-4 w-20 rounded-md bg-gray-200" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function DashboardSkeleton() {
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`${shimmer} relative mb-4 h-8 w-36 overflow-hidden rounded-md bg-gray-100`}
|
||||
/>
|
||||
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<CardSkeleton />
|
||||
<CardSkeleton />
|
||||
<CardSkeleton />
|
||||
<CardSkeleton />
|
||||
</div>
|
||||
<div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
|
||||
<RevenueChartSkeleton />
|
||||
<LatestInvoicesSkeleton />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export function TableRowSkeleton() {
|
||||
return (
|
||||
<tr className="w-full border-b border-gray-100 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">
|
||||
{/* Customer Name and Image */}
|
||||
<td className="relative overflow-hidden whitespace-nowrap py-3 pl-6 pr-3">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="h-8 w-8 rounded-full bg-gray-100"></div>
|
||||
<div className="h-6 w-24 rounded bg-gray-100"></div>
|
||||
</div>
|
||||
</td>
|
||||
{/* Email */}
|
||||
<td className="whitespace-nowrap px-3 py-3">
|
||||
<div className="h-6 w-32 rounded bg-gray-100"></div>
|
||||
</td>
|
||||
{/* Amount */}
|
||||
<td className="whitespace-nowrap px-3 py-3">
|
||||
<div className="h-6 w-16 rounded bg-gray-100"></div>
|
||||
</td>
|
||||
{/* Date */}
|
||||
<td className="whitespace-nowrap px-3 py-3">
|
||||
<div className="h-6 w-16 rounded bg-gray-100"></div>
|
||||
</td>
|
||||
{/* Status */}
|
||||
<td className="whitespace-nowrap px-3 py-3">
|
||||
<div className="h-6 w-16 rounded bg-gray-100"></div>
|
||||
</td>
|
||||
{/* Actions */}
|
||||
<td className="whitespace-nowrap py-3 pl-6 pr-3">
|
||||
<div className="flex justify-end gap-3">
|
||||
<div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
|
||||
<div className="h-[38px] w-[38px] rounded bg-gray-100"></div>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
|
||||
export function InvoicesMobileSkeleton() {
|
||||
return (
|
||||
<div className="mb-2 w-full rounded-md bg-white p-4">
|
||||
<div className="flex items-center justify-between border-b border-gray-100 pb-8">
|
||||
<div className="flex items-center">
|
||||
<div className="mr-2 h-8 w-8 rounded-full bg-gray-100"></div>
|
||||
<div className="h-6 w-16 rounded bg-gray-100"></div>
|
||||
</div>
|
||||
<div className="h-6 w-16 rounded bg-gray-100"></div>
|
||||
</div>
|
||||
<div className="flex w-full items-center justify-between pt-4">
|
||||
<div>
|
||||
<div className="h-6 w-16 rounded bg-gray-100"></div>
|
||||
<div className="mt-2 h-6 w-24 rounded bg-gray-100"></div>
|
||||
</div>
|
||||
<div className="flex justify-end gap-2">
|
||||
<div className="h-10 w-10 rounded bg-gray-100"></div>
|
||||
<div className="h-10 w-10 rounded bg-gray-100"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function InvoicesTableSkeleton() {
|
||||
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">
|
||||
<InvoicesMobileSkeleton />
|
||||
<InvoicesMobileSkeleton />
|
||||
<InvoicesMobileSkeleton />
|
||||
<InvoicesMobileSkeleton />
|
||||
<InvoicesMobileSkeleton />
|
||||
<InvoicesMobileSkeleton />
|
||||
</div>
|
||||
<table className="hidden min-w-full text-gray-900 md:table">
|
||||
<thead className="rounded-lg text-left text-sm font-normal">
|
||||
<tr>
|
||||
<th scope="col" className="px-4 py-5 font-medium sm:pl-6">
|
||||
Customer
|
||||
</th>
|
||||
<th scope="col" className="px-3 py-5 font-medium">
|
||||
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">
|
||||
Status
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
className="relative pb-4 pl-3 pr-6 pt-2 sm:pr-6"
|
||||
>
|
||||
<span className="sr-only">Edit</span>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white">
|
||||
<TableRowSkeleton />
|
||||
<TableRowSkeleton />
|
||||
<TableRowSkeleton />
|
||||
<TableRowSkeleton />
|
||||
<TableRowSkeleton />
|
||||
<TableRowSkeleton />
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user