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

Customers Page

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

Invoices Page

; +} 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..2ea6ea0 --- /dev/null +++ b/app/dashboard/page.tsx @@ -0,0 +1,3 @@ +export default function Page() { + return

Dashboard Page

; +} diff --git a/app/layout.tsx b/app/layout.tsx index 225b603..bc3a4c8 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,3 +1,6 @@ +import '@/app/ui/global.css'; +import { inter } from '@/app/ui/fonts'; + export default function RootLayout({ children, }: { @@ -5,7 +8,7 @@ export default function RootLayout({ }) { return ( - {children} + {children} ); } diff --git a/app/page.tsx b/app/page.tsx index 8e0184f..b0d02a6 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,16 +1,22 @@ import AcmeLogo from '@/app/ui/acme-logo'; import { ArrowRightIcon } from '@heroicons/react/24/outline'; import Link from 'next/link'; +import styles from '@/app/ui/home.module.css'; +import { lusitana } from '@/app/ui/fonts'; +import Image from 'next/image'; export default function Page() { return (
- {/* */} +
-

+

+

Welcome to Acme. This is the example for the{' '} Next.js Learn Course @@ -26,6 +32,20 @@ export default function Page() {

{/* Add Hero Images Here */} + Screenshots of the dashboard project showing desktop version + Screenshot of the dashboard project showing mobile 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..5a23718 --- /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'] }); diff --git a/app/ui/home.module.css b/app/ui/home.module.css new file mode 100644 index 0000000..9e584f9 --- /dev/null +++ b/app/ui/home.module.css @@ -0,0 +1,7 @@ +.shape { + height: 0; + width: 0; + border-bottom: 30px solid black; + border-left: 20px solid transparent; + border-right: 20px solid transparent; +} \ No newline at end of file