diff --git a/app/dashboard/customer/page.tsx b/app/dashboard/customer/page.tsx new file mode 100644 index 0000000..d8482ed --- /dev/null +++ b/app/dashboard/customer/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return

Customers Page

; +} \ No newline at end of file diff --git a/app/dashboard/invoices/page.tsx b/app/dashboard/invoices/page.tsx new file mode 100644 index 0000000..f0a0073 --- /dev/null +++ b/app/dashboard/invoices/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return

Invoices Page

; +} \ No newline at end of file diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx new file mode 100644 index 0000000..79bd4c3 --- /dev/null +++ b/app/dashboard/layout.tsx @@ -0,0 +1,12 @@ +import SideNav from '@/app/ui/dashboard/sidenav'; + +export default function Layout({ children }: { children: React.ReactNode }) { + return ( +
+
+ +
+
{children}
+
+ ); +} \ No newline at end of file diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx new file mode 100644 index 0000000..60f2c6d --- /dev/null +++ b/app/dashboard/page.tsx @@ -0,0 +1,4 @@ + +export default function Page() { + return

Dashboard Page

; +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 225b603..058e73e 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,3 +1,7 @@ +import '@/app/ui/global.css'; +import { inter } from '@/app/ui/fonts'; + + export default function RootLayout({ children, }: { @@ -5,7 +9,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ); } diff --git a/app/page.tsx b/app/page.tsx index 8e0184f..142dbc8 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,22 +1,27 @@ import AcmeLogo from '@/app/ui/acme-logo'; import { ArrowRightIcon } from '@heroicons/react/24/outline'; +import { lusitana } from '@/app/ui/fonts'; import Link from 'next/link'; +import Image from 'next/image'; export default function Page() { return (
- {/* */} +
-

+

Welcome to Acme. This is the example for the{' '} Next.js Learn Course , brought to you by Vercel.

+
{/* Add Hero Images Here */} + Screenshots of the dashboard project showing desktop version + Screenshots of the dashboard project showing desktop version
diff --git a/app/ui/dashboard/nav-links.tsx b/app/ui/dashboard/nav-links.tsx index 72fa462..3b091cd 100644 --- a/app/ui/dashboard/nav-links.tsx +++ b/app/ui/dashboard/nav-links.tsx @@ -1,8 +1,13 @@ +'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. @@ -17,19 +22,25 @@ const links = [ ]; export default function NavLinks() { + const pathname = usePathname(); return ( <> {links.map((link) => { const LinkIcon = link.icon; return ( -

{link.name}

- + ); })} diff --git a/app/ui/fonts.ts b/app/ui/fonts.ts new file mode 100644 index 0000000..f9a41fd --- /dev/null +++ b/app/ui/fonts.ts @@ -0,0 +1,4 @@ +import { Inter, Lusitana } from 'next/font/google' + +export const inter = Inter({subsets: ['latin']}) +export const lusitana = Lusitana({subsets: ['latin'], weight: ['400', '700']}) \ No newline at end of file