develop #3
@ -1 +1 @@
|
|||||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clipRule="evenodd" fill="#666" fillRule="evenodd"/></svg>
|
||||||
|
Before Width: | Height: | Size: 391 B After Width: | Height: | Size: 389 B |
@ -1 +1 @@
|
|||||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fillRule="evenodd" clipRule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
@ -1 +1 @@
|
|||||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fillRule="evenodd" clipRule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||||
|
Before Width: | Height: | Size: 385 B After Width: | Height: | Size: 383 B |
5
src/app/components/icons/document.tsx
Normal file
5
src/app/components/icons/document.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export function DocumentIcon(props: {className?: string}) {
|
||||||
|
return (
|
||||||
|
<svg className={props.className} width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 2.5C3 2.22386 3.22386 2 3.5 2H9.08579C9.21839 2 9.34557 2.05268 9.43934 2.14645L11.8536 4.56066C11.9473 4.65443 12 4.78161 12 4.91421V12.5C12 12.7761 11.7761 13 11.5 13H3.5C3.22386 13 3 12.7761 3 12.5V2.5ZM3.5 1C2.67157 1 2 1.67157 2 2.5V12.5C2 13.3284 2.67157 14 3.5 14H11.5C12.3284 14 13 13.3284 13 12.5V4.91421C13 4.51639 12.842 4.13486 12.5607 3.85355L10.1464 1.43934C9.86514 1.15804 9.48361 1 9.08579 1H3.5ZM4.5 4C4.22386 4 4 4.22386 4 4.5C4 4.77614 4.22386 5 4.5 5H7.5C7.77614 5 8 4.77614 8 4.5C8 4.22386 7.77614 4 7.5 4H4.5ZM4.5 7C4.22386 7 4 7.22386 4 7.5C4 7.77614 4.22386 8 4.5 8H10.5C10.7761 8 11 7.77614 11 7.5C11 7.22386 10.7761 7 10.5 7H4.5ZM4.5 10C4.22386 10 4 10.2239 4 10.5C4 10.7761 4.22386 11 4.5 11H10.5C10.7761 11 11 10.7761 11 10.5C11 10.2239 10.7761 10 10.5 10H4.5Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
5
src/app/components/icons/home.tsx
Normal file
5
src/app/components/icons/home.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export default function HomeIcon(props: {className?: string}) {
|
||||||
|
return (
|
||||||
|
<svg className={props.className} width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.07926 0.222253C7.31275 -0.007434 7.6873 -0.007434 7.92079 0.222253L14.6708 6.86227C14.907 7.09465 14.9101 7.47453 14.6778 7.71076C14.4454 7.947 14.0655 7.95012 13.8293 7.71773L13 6.90201V12.5C13 12.7761 12.7762 13 12.5 13H2.50002C2.22388 13 2.00002 12.7761 2.00002 12.5V6.90201L1.17079 7.71773C0.934558 7.95012 0.554672 7.947 0.32229 7.71076C0.0899079 7.47453 0.0930283 7.09465 0.32926 6.86227L7.07926 0.222253ZM7.50002 1.49163L12 5.91831V12H10V8.49999C10 8.22385 9.77617 7.99999 9.50002 7.99999H6.50002C6.22388 7.99999 6.00002 8.22385 6.00002 8.49999V12H3.00002V5.91831L7.50002 1.49163ZM7.00002 12H9.00002V8.99999H7.00002V12Z" fill="currentColor" fillRule="evenodd" clipRule="evenodd"></path></svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
7
src/app/components/icons/user.tsx
Normal file
7
src/app/components/icons/user.tsx
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
export function UserIcon(props: {className?: string}) {
|
||||||
|
return (
|
||||||
|
<svg className={props.className} xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
|
||||||
|
</svg>
|
||||||
|
)
|
||||||
|
}
|
||||||
218
src/app/components/skeleton/skeletons.tsx
Normal file
218
src/app/components/skeleton/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="mt-0 grid h-[410px] grid-cols-12 items-end gap-2 rounded-md bg-white p-4 sm:grid-cols-13 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`}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
);
|
||||||
|
}
|
||||||
5
src/app/dashboard/(overview)/loading.tsx
Normal file
5
src/app/dashboard/(overview)/loading.tsx
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import DashboardSkeleton from "@/app/components/skeleton/skeletons";
|
||||||
|
|
||||||
|
export default function Loading() {
|
||||||
|
return <DashboardSkeleton />;
|
||||||
|
}
|
||||||
22
src/app/dashboard/(overview)/page.tsx
Normal file
22
src/app/dashboard/(overview)/page.tsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
|
||||||
|
export default async function Dashboard() {
|
||||||
|
|
||||||
|
return (
|
||||||
|
<main>
|
||||||
|
<h1 className={`mb-4 text-xl md:text-2xl`}>
|
||||||
|
Dashboard
|
||||||
|
</h1>
|
||||||
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
|
||||||
|
{/* <CardWrapper /> */}
|
||||||
|
</div>
|
||||||
|
<div className="mt-6 grid grid-cols-1 gap-6 md:grid-cols-4 lg:grid-cols-8">
|
||||||
|
{/* <Suspense fallback={<RevenueChartSkeleton />}>
|
||||||
|
<RevenueChart />
|
||||||
|
</Suspense> */}
|
||||||
|
{/* <Suspense fallback={<LatestInvoicesSkeleton />}>
|
||||||
|
<LatestInvoices />
|
||||||
|
</Suspense> */}
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
)
|
||||||
|
}
|
||||||
45
src/app/dashboard/components/nav-links.tsx
Normal file
45
src/app/dashboard/components/nav-links.tsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
'use client'
|
||||||
|
import { DocumentIcon } from '@/app/components/icons/document';
|
||||||
|
import HomeIcon from '@/app/components/icons/home';
|
||||||
|
import { UserIcon } from '@/app/components/icons/user';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import Link from 'next/link'
|
||||||
|
import { usePathname } from 'next/navigation';
|
||||||
|
|
||||||
|
// 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: DocumentIcon,
|
||||||
|
},
|
||||||
|
{ name: 'Customers', href: '/dashboard/customers', icon: UserIcon },
|
||||||
|
];
|
||||||
|
|
||||||
|
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>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
21
src/app/dashboard/components/sidenav.tsx
Normal file
21
src/app/dashboard/components/sidenav.tsx
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import NavLinks from '@/app/dashboard/components/nav-links';
|
||||||
|
import Link from 'next/link';
|
||||||
|
|
||||||
|
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">
|
||||||
|
Home
|
||||||
|
</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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
13
src/app/dashboard/layout.tsx
Normal file
13
src/app/dashboard/layout.tsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import SideNav from "@/app/dashboard/components/sidenav";
|
||||||
|
|
||||||
|
|
||||||
|
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||||
|
return (
|
||||||
|
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
|
||||||
|
<div className="w-full flex-none md:w-64">
|
||||||
|
<SideNav />
|
||||||
|
</div>
|
||||||
|
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
102
src/app/page.tsx
102
src/app/page.tsx
@ -1,101 +1,17 @@
|
|||||||
import Image from "next/image";
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
<main className="flex min-h-screen flex-col p-6">
|
||||||
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
|
<div className="mt-4 flex grow flex-col gap-4 md:flex-row">
|
||||||
<Image
|
<div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
|
||||||
className="dark:invert"
|
<div />
|
||||||
src="/next.svg"
|
<p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
|
||||||
alt="Next.js logo"
|
<strong>Welcome to Acme.</strong> This is the example for the{' '}
|
||||||
width={180}
|
|
||||||
height={38}
|
|
||||||
priority
|
|
||||||
/>
|
|
||||||
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
|
||||||
<li className="mb-2">
|
|
||||||
Get started by editing{" "}
|
|
||||||
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
|
|
||||||
src/app/page.tsx
|
|
||||||
</code>
|
|
||||||
.
|
|
||||||
</li>
|
|
||||||
<li>Save and see your changes instantly.</li>
|
|
||||||
</ol>
|
|
||||||
|
|
||||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
, brought to you by Vercel.
|
||||||
<a
|
</p>
|
||||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
|
</div>
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
className="dark:invert"
|
|
||||||
src="/vercel.svg"
|
|
||||||
alt="Vercel logomark"
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
Deploy now
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
|
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Read our docs
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/file.svg"
|
|
||||||
alt="File icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Learn
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/window.svg"
|
|
||||||
alt="Window icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Examples
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/globe.svg"
|
|
||||||
alt="Globe icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Go to nextjs.org →
|
|
||||||
</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user