Skip to content

Commit 6773cbd

Browse files
eugeneyaneugeneyan
committed
Complete nextjs chapter 6
1 parent 2a6d6bd commit 6773cbd

File tree

9 files changed

+79
-8
lines changed

9 files changed

+79
-8
lines changed

‎intros/nextjs/nextjs-dashboard/app/dashboard/customers/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Page() {
2+
return <p>Customers Page</p>;
3+
}

‎intros/nextjs/nextjs-dashboard/app/dashboard/invoices/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Page() {
2+
return <p>Invoices Page</p>;
3+
}

‎intros/nextjs/nextjs-dashboard/app/dashboard/layout.tsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
'use client';
2+
3+
import SideNav from '@/app/ui/dashboard/sidenav';
4+
5+
export default function Layout({ children }: { children: React.ReactNode }) {
6+
return (
7+
<div className="flex h-screen flex-col md:flex-row md:overflow-hidden">
8+
<div className="w-full flex-none md:w-64">
9+
<SideNav />
10+
</div>
11+
<div className="flex-grow p-6 md:overflow-y-auto md:p-12">{children}</div>
12+
</div>
13+
);
14+
}

‎intros/nextjs/nextjs-dashboard/app/dashboard/page.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function Page() {
2+
return <p>Dashboard Page</p>;
3+
}

‎intros/nextjs/nextjs-dashboard/app/layout.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1+
import '@/app/ui/global.css';
2+
import { inter } from '@/app/ui/fonts';
3+
14
export default function RootLayout({
25
children,
36
}: {
47
children: React.ReactNode;
58
}) {
69
return (
710
<html lang="en">
8-
<body>{children}</body>
11+
<body className={`${inter.className} antialiased`}>{children}</body>
912
</html>
1013
);
11-
}
14+
}

‎intros/nextjs/nextjs-dashboard/app/page.tsx‎

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,20 @@
11
import AcmeLogo from '@/app/ui/acme-logo';
22
import { ArrowRightIcon } from '@heroicons/react/24/outline';
33
import Link from 'next/link';
4+
import { lusitana } from '@/app/ui/fonts';
5+
import Image from 'next/image';
6+
47

58
export default function Page() {
69
return (
710
<main className="flex min-h-screen flex-col p-6">
811
<div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
9-
{/* <AcmeLogo /> */}
12+
<AcmeLogo />
1013
</div>
1114
<div className="mt-4 flex grow flex-col gap-4 md:flex-row">
1215
<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">
13-
<p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
16+
<div className="relative w-0 h-0 border-l-[15px] border-r-[15px] border-b-[26px] border-l-transparent border-r-transparent border-b-black"/>
17+
<p className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}>
1418
<strong>Welcome to Acme.</strong> This is the example for the{' '}
1519
<a href="https://nextjs.org/learn/" className="text-blue-500">
1620
Next.js Learn Course
@@ -26,6 +30,20 @@ export default function Page() {
2630
</div>
2731
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
2832
{/* Add Hero Images Here */}
33+
<Image
34+
src="/hero-desktop.png"
35+
width={1000}
36+
height={760}
37+
className="hidden md:block"
38+
alt="Screenshots of the dashboard project showing desktop version"
39+
/>
40+
<Image
41+
src="/hero-mobile.png"
42+
width={500}
43+
height={620}
44+
className="block md:hidden"
45+
alt="Screenshots of the dashboard project showing mobile version"
46+
/>
2947
</div>
3048
</div>
3149
</main>

‎intros/nextjs/nextjs-dashboard/app/ui/dashboard/nav-links.tsx‎

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,13 @@
1+
'use client';
2+
13
import {
24
UserGroupIcon,
35
HomeIcon,
46
DocumentDuplicateIcon,
57
} from '@heroicons/react/24/outline';
8+
import Link from 'next/link';
9+
import { usePathname } from 'next/navigation';
10+
import clsx from 'clsx';
611

712
// Map of links to display in the side navigation.
813
// Depending on the size of the application, this would be stored in a database.
@@ -17,21 +22,28 @@ const links = [
1722
];
1823

1924
export default function NavLinks() {
25+
const pathname = usePathname();
26+
2027
return (
2128
<>
2229
{links.map((link) => {
2330
const LinkIcon = link.icon;
2431
return (
25-
<a
32+
<Link
2633
key={link.name}
2734
href={link.href}
28-
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"
35+
className={clsx(
36+
'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',
37+
{
38+
'bg-sky-100 text-blue-600': pathname === link.href,
39+
},
40+
)}
2941
>
3042
<LinkIcon className="w-6" />
3143
<p className="hidden md:block">{link.name}</p>
32-
</a>
44+
</Link>
3345
);
3446
})}
3547
</>
3648
);
37-
}
49+
}

‎intros/nextjs/nextjs-dashboard/app/ui/fonts.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { Inter } from 'next/font/google';
2+
import { Lusitana } from 'next/font/google';
3+
4+
export const inter = Inter({ subsets: ['latin'] });
5+
export const lusitana = Lusitana({
6+
weight: ['400', '700'],
7+
subsets: ['latin'],
8+
});

‎intros/nextjs/nextjs-dashboard/app/ui/home.module.css‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.shape {
2+
height: 0;
3+
width: 0;
4+
border-bottom: 30px solid black;
5+
border-left: 20px solid transparent;
6+
border-right: 20px solid transparent;
7+
}

0 commit comments

Comments
 (0)