BradNut/nextjs-dashboard
1
0
Fork 0
mirror of https://github.com/BradNut/nextjs-dashboard synced 2025-09-08 17:40:30 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Adding additional changed files.

Browse source
This commit is contained in:
Bradley Shellnut 2023-10-29 22:07:19 -07:00
parent aceab29144
commit e7c758286b
11 changed files with 1544 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
app/dashboard/customers/page.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function Page() {
return <p>Customers Page</p>;
}

3
app/dashboard/invoices/page.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function Page() {
return <p>Invoices Page</p>;
}

12
app/dashboard/layout.tsx Normal file
View file

@ -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>
);
}

3
app/dashboard/page.tsx Normal file
View file

@ -0,0 +1,3 @@
export default function Page() {
return <p>Dashboard Page</p>;
}

5
app/layout.tsx
View file

@ -1,3 +1,6 @@
import '@/app/ui/global.css';
import { inter } from '@/app/ui/fonts';
export default function RootLayout({ export default function RootLayout({
children, children,
}: { }: {
@ -5,7 +8,7 @@ export default function RootLayout({
}) { }) {
return ( return (
<html lang="en"> <html lang="en">
<body>{children}</body> <body className={`${inter.className} antialiased`}>{children}</body>
</html> </html>
); );
} }

78
app/page.tsx
View file

@ -1,32 +1,52 @@
import AcmeLogo from '@/app/ui/acme-logo'; import Image from "next/image";
import AcmeLogo from "@/app/ui/acme-logo";
import Link from "next/link";
import styles from "@/app/ui/home.module.css";
import { lusitana } from "@/app/ui/fonts";
import Link from 'next/link';
export default function Page() { export default function Page() {
return ( return (
<main className="flex min-h-screen flex-col p-6"> <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"> <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
{/* <AcmeLogo /> */} {/* <AcmeLogo /> */}
</div> </div>
<div className="mt-4 flex grow flex-col gap-4 md:flex-row"> <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"> <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} />
<strong>Welcome to Acme.</strong> This is the example for the{' '} <p
<a href="https://nextjs.org/learn/" className="text-blue-500"> className={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}
Next.js Learn Course >
</a> <strong>Welcome to Acme.</strong> This is the example for the{" "}
, brought to you by Vercel. <a href="https://nextjs.org/learn/" className="text-blue-500">
</p> Next.js Learn Course
<Link </a>
href="/login" , brought to you by Vercel.
className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base" </p>
> <Link
<span>Log in</span> href="/login"
</Link> className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
</div> >
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12"> <span>Log in</span>
{/* Add Hero Images Here */} </Link>
</div> </div>
</div> <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
</main> {/* Add Hero Images Here */}
); <Image
src="/hero-desktop.png"
width={1000}
height={760}
className="hidden md:block"
alt="Screenshots of the dashboard project showing desktop and mobile versions"
/>
<Image
src="/hero-mobile.png"
width={560}
height={620}
className="block md:hidden"
alt="Screenshots of the dashboard project showing desktop and mobile versions"
/>
</div>
</div>
</main>
);
} }

68
app/ui/dashboard/nav-links.tsx
View file

@ -1,37 +1,49 @@
"use client";
import { import {
UserGroupIcon, UserGroupIcon,
HomeIcon, HomeIcon,
DocumentDuplicateIcon, DocumentDuplicateIcon,
} from '@heroicons/react/24/outline'; } 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. // Map of links to display in the side navigation.
// Depending on the size of the application, this would be stored in a database. // Depending on the size of the application, this would be stored in a database.
const links = [ const links = [
{ name: 'Home', href: '/dashboard', icon: HomeIcon }, { name: "Home", href: "/dashboard", icon: HomeIcon },
{ {
name: 'Invoices', name: "Invoices",
href: '/dashboard/invoices', href: "/dashboard/invoices",
icon: DocumentDuplicateIcon, icon: DocumentDuplicateIcon,
}, },
{ name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon }, { name: "Customers", href: "/dashboard/customers", icon: UserGroupIcon },
]; ];
export default function NavLinks() { export default function NavLinks() {
return ( const pathname = usePathname();
<>
{links.map((link) => { return (
const LinkIcon = link.icon; <>
return ( {links.map((link) => {
<a const LinkIcon = link.icon;
key={link.name} return (
href={link.href} <Link
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" key={link.name}
> href={link.href}
<LinkIcon className="w-6" /> className={clsx(
<p className="hidden md:block">{link.name}</p> "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",
</a> {
); "bg-sky-100 text-blue-600": pathname === link.href,
})} }
</> )}
); >
<LinkIcon className="w-6" />
<p className="hidden md:block">{link.name}</p>
</Link>
);
})}
</>
);
} }

8
app/ui/fonts.ts Normal file
View file

@ -0,0 +1,8 @@
import { Inter, Lusitana } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'] });
export const lusitana = Lusitana({
weight: [ '400', '700' ],
subsets: ['latin'],
})

7
app/ui/home.module.css Normal file
View file

@ -0,0 +1,7 @@
.shape {
height: 0;
width: 0;
border-bottom: 30px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}

1414
pnpm-lock.yaml Normal file
View file

File diff suppressed because it is too large Load diff

2
tsconfig.json
View file

@ -19,7 +19,7 @@
} }
], ],
"paths": { "paths": {
"@/*": ["./*"] "@/*": ["./*"],
} }
}, },
"include": [ "include": [