feat(web): homepage

mrevanzak · Dec 22, 2023 · 11b9d52 · 11b9d52
1 parent a5adcdc
commit 11b9d52
Show file tree

Hide file tree

Showing 11 changed files with 363 additions and 46 deletions.
diff --git a/apps/nextjs/src/app/(private)/layout.tsx b/apps/nextjs/src/app/(private)/layout.tsx
@@ -0,0 +1,16 @@
+import Header from "@/components/Header";
+import Sidebar from "@/components/Sidebar";
+
+export default function Layout(props: { children: React.ReactNode }) {
+  return (
+    <section className="flex h-screen min-h-screen w-full">
+      <Sidebar />
+      <div className="flex-1">
+        <div className="flex flex-col">
+          <Header />
+          {props.children}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/apps/nextjs/src/app/(private)/orders/page.tsx b/apps/nextjs/src/app/(private)/orders/page.tsx
@@ -0,0 +1,65 @@
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+
+export default function OrdersPage() {
+  return (
+    <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-6">
+      <div className="rounded-lg border p-2 shadow-sm">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead className="w-[100px]">Order</TableHead>
+              <TableHead className="min-w-[150px]">Customer</TableHead>
+              <TableHead className="hidden md:table-cell">Channel</TableHead>
+              <TableHead className="hidden md:table-cell">Date</TableHead>
+              <TableHead className="text-right">Total</TableHead>
+              <TableHead className="hidden sm:table-cell">Status</TableHead>
+              <TableHead className="text-right">Actions</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell className="font-medium">#3210</TableCell>
+              <TableCell>Olivia Martin</TableCell>
+              <TableCell className="hidden md:table-cell">
+                Online Store
+              </TableCell>
+              <TableCell className="hidden md:table-cell">
+                February 20, 2022
+              </TableCell>
+              <TableCell className="text-right">$42.25</TableCell>
+              <TableCell className="hidden sm:table-cell">Shipped</TableCell>
+              <TableCell className="text-right">
+                <DropdownMenu>
+                  <DropdownMenuTrigger asChild>
+                    <Button size="icon" variant="ghost">
+                      {/* <MoreHorizontalIcon className="h-4 w-4" /> */}
+                      <span className="sr-only">Actions</span>
+                    </Button>
+                  </DropdownMenuTrigger>
+                  <DropdownMenuContent align="end">
+                    <DropdownMenuItem>View order</DropdownMenuItem>
+                    <DropdownMenuItem>Customer details</DropdownMenuItem>
+                  </DropdownMenuContent>
+                </DropdownMenu>
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </div>
+    </main>
+  );
+}
diff --git a/apps/nextjs/src/app/(private)/page.tsx b/apps/nextjs/src/app/(private)/page.tsx
@@ -0,0 +1,3 @@
+export default function DashboardPage() {
+  return null;
+}
diff --git a/apps/nextjs/src/app/layout.tsx b/apps/nextjs/src/app/layout.tsx
@@ -30,7 +30,7 @@ export const metadata: Metadata = {
   },
 };
 
-export default function Layout(props: { children: React.ReactNode }) {
+export default function RootLayout(props: { children: React.ReactNode }) {
   return (
     <html lang="en">
       <body className={["font-sans", fontSans.variable].join(" ")}>

diff --git a/apps/nextjs/src/app/page.tsx b/apps/nextjs/src/app/page.tsx
diff --git a/apps/nextjs/src/components/Header.tsx b/apps/nextjs/src/components/Header.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { LINKS } from "@/constant/router";
+import { UserButton } from "@clerk/nextjs";
+
+import { Input } from "./ui/input";
+
+export default function Header() {
+  const activeLink = usePathname();
+  const link = LINKS.find(({ href }) => href === activeLink);
+
+  return (
+    <header className="flex h-14 items-center gap-4 border-b bg-gray-100/40 px-6 dark:bg-gray-800/40 lg:h-[60px]">
+      <Link className="lg:hidden" href="#">
+        {link?.icon}
+      </Link>
+      <div className="flex-1">
+        <h1 className="text-lg font-semibold">{link?.label}</h1>
+      </div>
+      <div className="ml-auto flex flex-1 items-center justify-end gap-4">
+        <Input
+          type="search"
+          placeholder="Search..."
+          className="w-[100px] md:w-[300px]"
+        />
+        <UserButton />
+      </div>
+    </header>
+  );
+}
diff --git a/apps/nextjs/src/components/Sidebar.tsx b/apps/nextjs/src/components/Sidebar.tsx
@@ -0,0 +1,43 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import { Button } from "./ui/button";
+import { LINKS } from "@/constant/router";
+
+export default function Sidebar() {
+  const activeLink = usePathname();
+
+  return (
+    <div className="hidden w-1/5 border-r bg-gray-100/40 dark:bg-gray-800/40 lg:flex lg:flex-col">
+      <div className="flex h-[60px] items-center px-6">
+        <Link className="flex items-center gap-1 font-semibold" href="#">
+          <Image
+            src="/logo.png"
+            alt="Logo"
+            width={24}
+            height={24}
+            className="mr-2"
+          />
+          Vivat Marketplace
+        </Link>
+      </div>
+      <nav className="flex-1 space-y-2 px-4">
+        {LINKS.map(({ href, label, icon }) => (
+          <Button
+            key={href}
+            variant={activeLink === href ? "default" : "ghost"}
+            className="w-full justify-start"
+          >
+            <Link href={href} className="flex w-full items-center">
+              {icon && <span className="mr-2 text-xl">{icon}</span>}
+              {label}
+            </Link>
+          </Button>
+        ))}
+      </nav>
+    </div>
+  );
+}
diff --git a/apps/nextjs/src/components/auth.tsx b/apps/nextjs/src/components/auth.tsx
diff --git a/apps/nextjs/src/components/ui/card.tsx b/apps/nextjs/src/components/ui/card.tsx
@@ -0,0 +1,79 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-2xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }