From 80e0d8ec5437d8caee53ac875cdcb8bc03863fd2 Mon Sep 17 00:00:00 2001 From: behnam Date: Thu, 31 Oct 2024 19:09:19 +0300 Subject: [PATCH] Add base ui of dashboard --- public/file.svg | 2 +- public/globe.svg | 2 +- public/window.svg | 2 +- src/app/components/icons/document.tsx | 5 + src/app/components/icons/home.tsx | 5 + src/app/components/icons/user.tsx | 7 + src/app/components/skeleton/skeletons.tsx | 218 +++++++++++++++++++++ src/app/dashboard/(overview)/loading.tsx | 5 + src/app/dashboard/(overview)/page.tsx | 22 +++ src/app/dashboard/components/nav-links.tsx | 45 +++++ src/app/dashboard/components/sidenav.tsx | 21 ++ src/app/dashboard/layout.tsx | 13 ++ src/app/page.tsx | 106 ++-------- 13 files changed, 355 insertions(+), 98 deletions(-) create mode 100644 src/app/components/icons/document.tsx create mode 100644 src/app/components/icons/home.tsx create mode 100644 src/app/components/icons/user.tsx create mode 100644 src/app/components/skeleton/skeletons.tsx create mode 100644 src/app/dashboard/(overview)/loading.tsx create mode 100644 src/app/dashboard/(overview)/page.tsx create mode 100644 src/app/dashboard/components/nav-links.tsx create mode 100644 src/app/dashboard/components/sidenav.tsx create mode 100644 src/app/dashboard/layout.tsx diff --git a/public/file.svg b/public/file.svg index 004145c..adfd2a9 100644 --- a/public/file.svg +++ b/public/file.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/globe.svg b/public/globe.svg index 567f17b..4af126a 100644 --- a/public/globe.svg +++ b/public/globe.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/window.svg b/public/window.svg index b2b2a44..98febf2 100644 --- a/public/window.svg +++ b/public/window.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/components/icons/document.tsx b/src/app/components/icons/document.tsx new file mode 100644 index 0000000..a8cbcb6 --- /dev/null +++ b/src/app/components/icons/document.tsx @@ -0,0 +1,5 @@ +export function DocumentIcon(props: {className?: string}) { + return ( + + ) +} \ No newline at end of file diff --git a/src/app/components/icons/home.tsx b/src/app/components/icons/home.tsx new file mode 100644 index 0000000..8270d4e --- /dev/null +++ b/src/app/components/icons/home.tsx @@ -0,0 +1,5 @@ +export default function HomeIcon(props: {className?: string}) { + return ( + + ) +} \ No newline at end of file diff --git a/src/app/components/icons/user.tsx b/src/app/components/icons/user.tsx new file mode 100644 index 0000000..02b56ed --- /dev/null +++ b/src/app/components/icons/user.tsx @@ -0,0 +1,7 @@ +export function UserIcon(props: {className?: string}) { + return ( + + + + ) +} \ No newline at end of file diff --git a/src/app/components/skeleton/skeletons.tsx b/src/app/components/skeleton/skeletons.tsx new file mode 100644 index 0000000..52b8a87 --- /dev/null +++ b/src/app/components/skeleton/skeletons.tsx @@ -0,0 +1,218 @@ +// Loading animation +const shimmer = + 'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent'; + +export function CardSkeleton() { + return ( +
+
+
+
+
+
+
+
+
+ ); +} + +export function CardsSkeleton() { + return ( + <> + + + + + + ); +} + +export function RevenueChartSkeleton() { + return ( +
+
+
+
+
+
+
+
+
+
+ ); +} + +export function InvoiceSkeleton() { + return ( +
+
+
+
+
+
+
+
+
+
+ ); +} + +export function LatestInvoicesSkeleton() { + return ( +
+
+
+
+ + + + + +
+
+
+
+
+
+
+ ); +} + +export default function DashboardSkeleton() { + return ( + <> +
+
+ + + + +
+
+ + +
+ + ); +} + +export function TableRowSkeleton() { + return ( + + {/* Customer Name and Image */} + +
+
+
+
+ + {/* Email */} + +
+ + {/* Amount */} + +
+ + {/* Date */} + +
+ + {/* Status */} + +
+ + {/* Actions */} + +
+
+
+
+ + + ); +} + +export function InvoicesMobileSkeleton() { + return ( +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ); +} + +export function InvoicesTableSkeleton() { + return ( +
+
+
+
+ + + + + + +
+ + + + + + + + + + + + + + + + + + + +
+ Customer + + Email + + Amount + + Date + + Status + + Edit +
+
+
+
+ ); +} diff --git a/src/app/dashboard/(overview)/loading.tsx b/src/app/dashboard/(overview)/loading.tsx new file mode 100644 index 0000000..fcf5df1 --- /dev/null +++ b/src/app/dashboard/(overview)/loading.tsx @@ -0,0 +1,5 @@ +import DashboardSkeleton from "@/app/components/skeleton/skeletons"; + +export default function Loading() { + return ; +} \ No newline at end of file diff --git a/src/app/dashboard/(overview)/page.tsx b/src/app/dashboard/(overview)/page.tsx new file mode 100644 index 0000000..60a12e0 --- /dev/null +++ b/src/app/dashboard/(overview)/page.tsx @@ -0,0 +1,22 @@ + +export default async function Dashboard() { + + return ( +
+

+ Dashboard +

+
+ {/* */} +
+
+ {/* }> + + */} + {/* }> + + */} +
+
+ ) +} diff --git a/src/app/dashboard/components/nav-links.tsx b/src/app/dashboard/components/nav-links.tsx new file mode 100644 index 0000000..ecfca9e --- /dev/null +++ b/src/app/dashboard/components/nav-links.tsx @@ -0,0 +1,45 @@ +'use client' +import { DocumentIcon } from '@/app/components/icons/document'; +import HomeIcon from '@/app/components/icons/home'; +import { UserIcon } from '@/app/components/icons/user'; +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. +const links = [ + { name: 'Home', href: '/dashboard', icon: HomeIcon }, + { + name: 'Invoices', + href: '/dashboard/invoices', + icon: DocumentIcon, + }, + { name: 'Customers', href: '/dashboard/customers', icon: UserIcon }, +]; + +export default function NavLinks() { + const pathname = usePathname() + return ( + <> + {links.map((link) => { + const LinkIcon = link.icon; + return ( + + +

{link.name}

+ + ); + })} + + ); +} diff --git a/src/app/dashboard/components/sidenav.tsx b/src/app/dashboard/components/sidenav.tsx new file mode 100644 index 0000000..7cf3d44 --- /dev/null +++ b/src/app/dashboard/components/sidenav.tsx @@ -0,0 +1,21 @@ +import NavLinks from '@/app/dashboard/components/nav-links'; +import Link from 'next/link'; + +export default function SideNav() { + return ( +
+ +
+ Home +
+ +
+ +
+
+
+ ); +} diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx new file mode 100644 index 0000000..d28eae9 --- /dev/null +++ b/src/app/dashboard/layout.tsx @@ -0,0 +1,13 @@ +import SideNav from "@/app/dashboard/components/sidenav"; + + +export default function Layout({ children }: { children: React.ReactNode }) { + return ( +
+
+ +
+
{children}
+
+ ); +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 3eee014..b34fd95 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,101 +1,17 @@ -import Image from "next/image"; export default function Home() { return ( -
-
- Next.js logo -
    -
  1. - Get started by editing{" "} - - src/app/page.tsx - - . -
    2. -
  2. Save and see your changes instantly.
    3. -
- -
- - Vercel logomark - Deploy now - - - Read our docs - +
+
+
+
+

+ Welcome to Acme. This is the example for the{' '} + + , brought to you by Vercel. +

-
- -
+
+ ); }