initial commit version 0.1.0

GuilhaoF · Nov 11, 2023 · 8fdd407 · 8fdd407
1 parent 7283820
commit 8fdd407
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 7 deletions.
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 '@/app/ui/global.css';
+import { inter } from '@/app/ui/fonts';
+
 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 { ArrowRightIcon } from '@heroicons/react/24/outline';
+import { lusitana } from '@/app/ui/fonts';
+import Image from 'next/image';
 
 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 /> */}
+        <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="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent"
+          />
+          <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
@@ -26,6 +31,20 @@ export default function Page() {
         </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>

diff --git a/app/ui/dashboard/nav-links.tsx b/app/ui/dashboard/nav-links.tsx
@@ -1,8 +1,12 @@
+'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 +21,28 @@ 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 } from 'next/font/google';
+
+export const inter = Inter({ subsets: ['latin'] });
+export const lusitana = Lusitana({
+  weight: ['400', '700'],
+  subsets: ['latin'],
+});
diff --git a/app/ui/invoices/status.tsx b/app/ui/invoices/status.tsx
@@ -7,7 +7,7 @@ export default function InvoiceStatus({ status }: { status: string }) {
       className={clsx(
         'inline-flex items-center rounded-full px-2 py-1 text-xs',
         {
-          'bg-gray-100 text-gray-500': status === 'pending',
+          'bg-yellow-500 text-white': status === 'pending',
           'bg-green-500 text-white': status === 'paid',
         },
       )}