mirror of
https://github.com/BradNut/nextjs-dashboard
synced 2025-09-08 17:40:30 +00:00
Adding additional changed files.
This commit is contained in:
parent
aceab29144
commit
e7c758286b
11 changed files with 1544 additions and 59 deletions
3
app/dashboard/customers/page.tsx
Normal file
3
app/dashboard/customers/page.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export default function Page() {
|
||||
return <p>Customers Page</p>;
|
||||
}
|
||||
3
app/dashboard/invoices/page.tsx
Normal file
3
app/dashboard/invoices/page.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export default function Page() {
|
||||
return <p>Invoices Page</p>;
|
||||
}
|
||||
12
app/dashboard/layout.tsx
Normal file
12
app/dashboard/layout.tsx
Normal 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
3
app/dashboard/page.tsx
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export default function Page() {
|
||||
return <p>Dashboard Page</p>;
|
||||
}
|
||||
|
|
@ -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 (
|
||||
<html lang="en">
|
||||
<body>{children}</body>
|
||||
<body className={`${inter.className} antialiased`}>{children}</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
78
app/page.tsx
78
app/page.tsx
|
|
@ -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() {
|
||||
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 /> */}
|
||||
</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`}>
|
||||
<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
|
||||
</a>
|
||||
, brought to you by Vercel.
|
||||
</p>
|
||||
<Link
|
||||
href="/login"
|
||||
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"
|
||||
>
|
||||
<span>Log in</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
|
||||
{/* Add Hero Images Here */}
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
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 /> */}
|
||||
</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">
|
||||
<div className={styles.shape} />
|
||||
<p
|
||||
className={`${lusitana.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
|
||||
</a>
|
||||
, brought to you by Vercel.
|
||||
</p>
|
||||
<Link
|
||||
href="/login"
|
||||
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"
|
||||
>
|
||||
<span>Log in</span>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
|
||||
{/* 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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,37 +1,49 @@
|
|||
"use client";
|
||||
|
||||
import {
|
||||
UserGroupIcon,
|
||||
HomeIcon,
|
||||
DocumentDuplicateIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
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.
|
||||
const links = [
|
||||
{ name: 'Home', href: '/dashboard', icon: HomeIcon },
|
||||
{
|
||||
name: 'Invoices',
|
||||
href: '/dashboard/invoices',
|
||||
icon: DocumentDuplicateIcon,
|
||||
},
|
||||
{ name: 'Customers', href: '/dashboard/customers', icon: UserGroupIcon },
|
||||
{ name: "Home", href: "/dashboard", icon: HomeIcon },
|
||||
{
|
||||
name: "Invoices",
|
||||
href: "/dashboard/invoices",
|
||||
icon: DocumentDuplicateIcon,
|
||||
},
|
||||
{ name: "Customers", href: "/dashboard/customers", icon: UserGroupIcon },
|
||||
];
|
||||
|
||||
export default function NavLinks() {
|
||||
return (
|
||||
<>
|
||||
{links.map((link) => {
|
||||
const LinkIcon = link.icon;
|
||||
return (
|
||||
<a
|
||||
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"
|
||||
>
|
||||
<LinkIcon className="w-6" />
|
||||
<p className="hidden md:block">{link.name}</p>
|
||||
</a>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<>
|
||||
{links.map((link) => {
|
||||
const LinkIcon = link.icon;
|
||||
return (
|
||||
<Link
|
||||
key={link.name}
|
||||
href={link.href}
|
||||
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>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
8
app/ui/fonts.ts
Normal file
8
app/ui/fonts.ts
Normal 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
7
app/ui/home.module.css
Normal 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
1414
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -19,7 +19,7 @@
|
|||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
"@/*": ["./*"],
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
|
|
|
|||
Loading…
Reference in a new issue