first commit

bsdrazor · Mar 12, 2024 · 784e301 · 784e301
1 parent b552035
commit 784e301
Show file tree

Hide file tree

Showing 10 changed files with 78 additions and 9 deletions.
diff --git a/README.md b/README.md
@@ -3,3 +3,4 @@
 This is the starter template for the Next.js App Router Course. It contains the starting code for the dashboard application.
 
 For more information, see the [course curriculum](https://nextjs.org/learn) on the Next.js Website.
+# next-lesson
diff --git a/app/dashboard/customers/page.tsx b/app/dashboard/customers/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>Customers Page</p>;
+}
diff --git a/app/dashboard/invoices/page.tsx b/app/dashboard/invoices/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>Invoices Page</p>;
+}
diff --git a/app/dashboard/layout.tsx 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 (
+    <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>
+  );
+}
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
@@ -0,0 +1,3 @@
+export default function Page() {
+  return <p>Dashboard Page</p>;
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,11 +1,14 @@
+import { inter } from '@/app/ui/fonts';
+import '@/app/ui/global.css';
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className={`${inter.className} antialiased`}>{children}</body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,16 +1,21 @@
-import AcmeLogo from '@/app/ui/acme-logo';
+import { rubik } from '@/app/ui/fonts';
 import { ArrowRightIcon } from '@heroicons/react/24/outline';
+import Image from 'next/image';
 import Link from 'next/link';
+import AcmeLogo from './ui/acme-logo';
 
 export default function Page() {
   return (
     <main className="flex min-h-screen flex-col p-6">
       <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
-        {/* <AcmeLogo /> */}
+        <AcmeLogo />
       </div>
       <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
         <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">
-          <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
+          <div className="{styles.shape}" />
+          <p
+            className={`${rubik.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}
+          >
             <strong>Welcome to Acme.</strong> This is the example for the{' '}
             <a href="https://nextjs.org/learn/" className="text-blue-500">
               Next.js Learn Course
@@ -25,6 +30,20 @@ export default function Page() {
           </Link>
         </div>
         <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
+          <Image
+            src="/hero-desktop.png"
+            width={1000}
+            height={760}
+            className="hidden md:block"
+            alt="Screenshots of the dashboard project showing desktop version"
+          />
+          <Image
+            src="/hero-mobile.png"
+            width={560}
+            height={620}
+            className="block md:hidden"
+            alt="Screenshot of the dashboard project showing mobile version"
+          />
           {/* Add Hero Images Here */}
         </div>
       </div>

diff --git a/app/ui/dashboard/nav-links.tsx b/app/ui/dashboard/nav-links.tsx
@@ -1,8 +1,13 @@
+'use client';
+
 import {
-  UserGroupIcon,
-  HomeIcon,
   DocumentDuplicateIcon,
+  HomeIcon,
+  UserGroupIcon,
 } from '@heroicons/react/24/outline';
+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.
@@ -17,19 +22,25 @@ const links = [
 ];
 
 export default function NavLinks() {
+  const pathname = usePathname();
   return (
     <>
       {links.map((link) => {
         const LinkIcon = link.icon;
         return (
-          <a
+          <Link
             key={link.name}
             href={link.href}
-            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"
+            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>
-          </a>
+          </Link>
         );
       })}
     </>

diff --git a/app/ui/fonts.ts b/app/ui/fonts.ts
@@ -0,0 +1,7 @@
+import { Inter, Lusitana, Rubik } from 'next/font/google';
+
+export const inter = Inter({ subsets: ['latin'] });
+
+export const lusitana = Lusitana({ weight: '400', subsets: ['latin'] });
+
+export const rubik = Rubik({ weight: '300', subsets: ['cyrillic'] });
diff --git a/app/ui/home.module.css 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;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,3 +3,4 @@
		This is the starter template for the Next.js App Router Course. It contains the starting code for the dashboard application.

		For more information, see the [course curriculum](https://nextjs.org/learn) on the Next.js Website.
		# next-lesson