first commit
This commit is contained in:
@@ -0,0 +1,24 @@
|
||||
import { AppSidebar } from "@/components/Layouts/AppSidebar"
|
||||
import { Footer } from "@/components/Layouts/Footer"
|
||||
import { Header } from "@/components/Layouts/Header"
|
||||
import { Toaster } from "@/components/ui/toast"
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode
|
||||
}) {
|
||||
return (
|
||||
<div className="flex min-h-screen gap-6 bg-slate-100 p-4 lg:p-6">
|
||||
<AppSidebar />
|
||||
<main className="flex flex-1 flex-col">
|
||||
<Header />
|
||||
<div className="flex flex-1 flex-col rounded-3xl bg-white p-6 shadow-sm ring-1 ring-black/5">
|
||||
{children}
|
||||
</div>
|
||||
<Footer className="mt-6" />
|
||||
</main>
|
||||
<Toaster />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,326 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import { CheckCircle2, DollarSign, Package, Plus, ShoppingCart, Users } from "lucide-react"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { RecentOrdersTable } from "@/components/dashboard/recent-orders-table"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { DatePicker, DateRangePicker } from "@/components/ui/date-picker"
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogContent,
|
||||
AlertDialogTrigger,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
import {
|
||||
Breadcrumb,
|
||||
BreadcrumbEllipsis,
|
||||
BreadcrumbItem,
|
||||
BreadcrumbLink,
|
||||
BreadcrumbList,
|
||||
BreadcrumbPage,
|
||||
BreadcrumbSeparator,
|
||||
} from "@/components/ui/breadcrumb"
|
||||
import { StatCard } from "@/components/ui/stat-card"
|
||||
import { toast } from "@/components/ui/toast"
|
||||
import LineChart from "@/components/ui/line-chart"
|
||||
import BarChart from "@/components/ui/bar-chart"
|
||||
import PieChart from "@/components/ui/pie-chart"
|
||||
|
||||
const indigoButton =
|
||||
"rounded-full bg-indigo-50 text-indigo-700 hover:bg-indigo-100 focus-visible:ring-indigo-300/40"
|
||||
|
||||
export default function DashboardPage() {
|
||||
const [date, setDate] = React.useState<Date>()
|
||||
const [range, setRange] = React.useState<{ from: Date | undefined; to?: Date | undefined }>()
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex flex-col gap-5 rounded-2xl bg-white p-4 shadow-sm ring-1 ring-black/5 sm:p-5">
|
||||
<div>
|
||||
<p className="mb-2 text-sm font-semibold text-slate-500">Breadcrumb</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
{/* Basic */}
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/dashboard">Home</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/dashboard/products">Products</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>Product Detail</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
|
||||
{/* With ellipsis */}
|
||||
<Breadcrumb>
|
||||
<BreadcrumbList>
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/dashboard">Home</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbEllipsis />
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbLink href="/dashboard/products">Products</BreadcrumbLink>
|
||||
</BreadcrumbItem>
|
||||
<BreadcrumbSeparator />
|
||||
<BreadcrumbItem>
|
||||
<BreadcrumbPage>Edit</BreadcrumbPage>
|
||||
</BreadcrumbItem>
|
||||
</BreadcrumbList>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2 text-sm font-semibold text-slate-500">Variants</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="default">Default</Button>
|
||||
<Button variant="outline">Outline</Button>
|
||||
<Button variant="secondary">Secondary</Button>
|
||||
<Button variant="ghost">Ghost</Button>
|
||||
<Button variant="destructive">Destructive</Button>
|
||||
<Button variant="success">Success</Button>
|
||||
<Button variant="warning">Warning</Button>
|
||||
<Button variant="info">Info</Button>
|
||||
<Button variant="link">Link</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2 text-sm font-semibold text-slate-500">Sizes</p>
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
<Button size="xs" className={indigoButton}>
|
||||
Extra Small
|
||||
</Button>
|
||||
<Button size="sm" className={indigoButton}>
|
||||
Small
|
||||
</Button>
|
||||
<Button size="default" className={indigoButton}>
|
||||
Default
|
||||
</Button>
|
||||
<Button size="lg" className={indigoButton}>
|
||||
Large
|
||||
</Button>
|
||||
<Button size="lg" className={cn(indigoButton, "h-13 px-8 text-base")}>
|
||||
Extra Large
|
||||
</Button>
|
||||
<Button size="icon-sm" className={indigoButton} aria-label="Add (small)">
|
||||
<Plus />
|
||||
</Button>
|
||||
<Button size="icon" className={indigoButton} aria-label="Add">
|
||||
<Plus />
|
||||
</Button>
|
||||
<Button size="icon-lg" className={indigoButton} aria-label="Add (large)">
|
||||
<Plus />
|
||||
</Button>
|
||||
<Button
|
||||
size="icon-lg"
|
||||
className={cn(indigoButton, "size-13")}
|
||||
aria-label="Add (extra large)"
|
||||
>
|
||||
<Plus className="size-6" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2 text-sm font-semibold text-slate-500">Date Picker</p>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center">
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-xs text-slate-400">Single date</span>
|
||||
<DatePicker
|
||||
value={date}
|
||||
onChange={setDate}
|
||||
placeholder="Select a date"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-col gap-1">
|
||||
<span className="text-xs text-slate-400">Date range</span>
|
||||
<DateRangePicker
|
||||
value={range}
|
||||
onChange={setRange}
|
||||
placeholder="Select date range"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{(date || range?.from) && (
|
||||
<p className="mt-2 text-xs text-slate-500">
|
||||
{date && <>Selected: <span className="font-medium text-slate-700">{date.toLocaleDateString()}</span></>}
|
||||
{range?.from && (
|
||||
<>
|
||||
{date && " · "}
|
||||
Range: <span className="font-medium text-slate-700">{range.from.toLocaleDateString()}</span>
|
||||
{range.to && <> – <span className="font-medium text-slate-700">{range.to.toLocaleDateString()}</span></>}
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2 text-sm font-semibold text-slate-500">Modal</p>
|
||||
<Dialog>
|
||||
<DialogTrigger render={<Button variant="outline">Open Modal</Button>} />
|
||||
<DialogContent className="w-[calc(100%-2rem)] sm:max-w-md">
|
||||
<DialogHeader className="items-center gap-3 px-2 pt-4 text-center sm:px-4">
|
||||
<div className="flex size-14 items-center justify-center rounded-full bg-emerald-50">
|
||||
<CheckCircle2 className="size-7 text-emerald-600" />
|
||||
</div>
|
||||
<DialogTitle className="text-lg font-bold">Order confirmed</DialogTitle>
|
||||
<DialogDescription>
|
||||
Your order has been placed successfully and is now being processed.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex justify-center px-2 pb-2 sm:px-4">
|
||||
<Button size="lg" className="w-full rounded-full sm:w-auto sm:px-10">
|
||||
Continue
|
||||
</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2 text-sm font-semibold text-slate-500">Toast</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Button variant="outline" onClick={() => toast({ title: "Default toast message" })}>
|
||||
Default
|
||||
</Button>
|
||||
<Button variant="success" onClick={() => toast.success("Success!", "Your changes have been saved.")}>
|
||||
Success
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={() => toast.error("Error", "Something went wrong. Please try again.")}>
|
||||
Error
|
||||
</Button>
|
||||
<Button variant="warning" onClick={() => toast.warning("Warning", "This action cannot be undone.")}>
|
||||
Warning
|
||||
</Button>
|
||||
<Button variant="info" onClick={() => toast.info("Info", "Your session will expire in 5 minutes.")}>
|
||||
Info
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() =>
|
||||
toast({
|
||||
title: "With Action",
|
||||
description: "Do you want to undo this change?",
|
||||
actionLabel: "Undo",
|
||||
onAction: () => toast.success("Undone!", "Change has been reverted."),
|
||||
})
|
||||
}
|
||||
>
|
||||
With Action
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-5 rounded-2xl bg-white p-4 shadow-sm ring-1 ring-black/5 sm:p-5">
|
||||
<div>
|
||||
<p className="mb-2 text-sm font-semibold text-slate-500">Alert Dialogs</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger render={<Button variant="info">Info</Button>} />
|
||||
<AlertDialogContent
|
||||
variant="info"
|
||||
title="Update available"
|
||||
description="A new version is ready. Reload the page to apply the latest changes."
|
||||
confirmLabel="Reload"
|
||||
onConfirm={() => toast.info("Reloading...", "Applying the latest update.")}
|
||||
/>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger render={<Button variant="success">Success</Button>} />
|
||||
<AlertDialogContent
|
||||
variant="success"
|
||||
title="Order confirmed"
|
||||
description="Your order has been placed successfully and is now being processed."
|
||||
confirmLabel="Continue"
|
||||
cancelLabel="View order"
|
||||
onConfirm={() => toast.success("Done!", "Redirecting to dashboard.")}
|
||||
/>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger render={<Button variant="warning">Warning</Button>} />
|
||||
<AlertDialogContent
|
||||
variant="warning"
|
||||
title="Unsaved changes"
|
||||
description="You have unsaved changes. Leaving this page will discard them."
|
||||
confirmLabel="Leave anyway"
|
||||
onConfirm={() => toast.warning("Changes discarded")}
|
||||
/>
|
||||
</AlertDialog>
|
||||
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger render={<Button variant="destructive">Delete</Button>} />
|
||||
<AlertDialogContent
|
||||
variant="destructive"
|
||||
title="Delete record?"
|
||||
description="This action is permanent and cannot be undone. All associated data will be removed."
|
||||
confirmLabel="Delete"
|
||||
onConfirm={() => toast.error("Deleted", "The record has been permanently removed.")}
|
||||
/>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
|
||||
<StatCard label="Total Revenue" value={45231.89} icon={DollarSign} />
|
||||
<StatCard label="Orders" value={1284} icon={ShoppingCart} />
|
||||
<StatCard label="Customers" value={892} icon={Users} />
|
||||
<StatCard label="Low Stock Items" value={16} icon={Package} />
|
||||
</div>
|
||||
|
||||
<RecentOrdersTable />
|
||||
|
||||
<div className="mt-6 grid grid-cols-1 gap-4 lg:grid-cols-3">
|
||||
<div className="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-black/5">
|
||||
<h3 className="mb-2 text-sm font-semibold text-slate-600">Sales (Line)</h3>
|
||||
<div className="h-56">
|
||||
<LineChart
|
||||
labels={["Jan", "Feb", "Mar", "Apr", "May", "Jun"]}
|
||||
datasets={[{ label: "Sales", data: [120, 200, 150, 220, 180, 260] }]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-black/5">
|
||||
<h3 className="mb-2 text-sm font-semibold text-slate-600">Revenue (Bar)</h3>
|
||||
<div className="h-56">
|
||||
<BarChart
|
||||
labels={["Q1", "Q2", "Q3", "Q4"]}
|
||||
datasets={[{ label: "Revenue", data: [30000, 42000, 36000, 48000], backgroundColor: "#60a5fa" }]}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl bg-white p-4 shadow-sm ring-1 ring-black/5">
|
||||
<h3 className="mb-2 text-sm font-semibold text-slate-600">Product Mix (Pie)</h3>
|
||||
<div className="h-56">
|
||||
<PieChart labels={["A","B","C"]} data={[45, 30, 25]} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
export default function ProductsPage() {
|
||||
return (
|
||||
<div className="flex flex-1 items-center justify-center">
|
||||
<h1 className="text-2xl font-semibold tracking-tight">Products</h1>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
+119
-15
@@ -1,26 +1,130 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
@import "shadcn/tailwind.css";
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-heading: var(--font-sans);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-ring: var(--ring);
|
||||
--color-input: var(--input);
|
||||
--color-border: var(--border);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-card: var(--card);
|
||||
--radius-sm: calc(var(--radius) * 0.6);
|
||||
--radius-md: calc(var(--radius) * 0.8);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) * 1.4);
|
||||
--radius-2xl: calc(var(--radius) * 1.8);
|
||||
--radius-3xl: calc(var(--radius) * 2.2);
|
||||
--radius-4xl: calc(var(--radius) * 2.6);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.205 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.205 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.922 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.704 0.191 22.216);
|
||||
--border: oklch(1 0 0 / 10%);
|
||||
--input: oklch(1 0 0 / 15%);
|
||||
--ring: oklch(0.556 0 0);
|
||||
--chart-1: oklch(0.87 0 0);
|
||||
--chart-2: oklch(0.556 0 0);
|
||||
--chart-3: oklch(0.439 0 0);
|
||||
--chart-4: oklch(0.371 0 0);
|
||||
--chart-5: oklch(0.269 0 0);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.556 0 0);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
html {
|
||||
@apply font-sans;
|
||||
}
|
||||
}
|
||||
+4
-1
@@ -1,5 +1,6 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
@@ -27,7 +28,9 @@ export default function RootLayout({
|
||||
lang="en"
|
||||
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
|
||||
>
|
||||
<body className="min-h-full flex flex-col">{children}</body>
|
||||
<body className="min-h-full flex flex-col">
|
||||
<TooltipProvider>{children}</TooltipProvider>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,207 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import Link from "next/link"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { Controller, useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
import { ArrowLeft, Eye, EyeOff } from "lucide-react"
|
||||
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Checkbox } from "@/components/ui/checkbox"
|
||||
import { Field, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
|
||||
import { Input } from "@/components/ui/input"
|
||||
|
||||
const loginSchema = z.object({
|
||||
email: z.string().min(1, "Email is required").email("Enter a valid email"),
|
||||
password: z.string().min(1, "Password is required"),
|
||||
agreeToTerms: z.literal(true, {
|
||||
error: "You must agree to the Terms & Condition",
|
||||
}),
|
||||
})
|
||||
|
||||
type LoginValues = z.infer<typeof loginSchema>
|
||||
|
||||
function GoogleIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" className="size-4">
|
||||
<path
|
||||
fill="#4285F4"
|
||||
d="M23.52 12.27c0-.85-.08-1.67-.22-2.45H12v4.64h6.47a5.53 5.53 0 0 1-2.4 3.63v3h3.89c2.27-2.09 3.56-5.17 3.56-8.82Z"
|
||||
/>
|
||||
<path
|
||||
fill="#34A853"
|
||||
d="M12 24c3.24 0 5.95-1.07 7.93-2.91l-3.89-3c-1.08.73-2.46 1.15-4.04 1.15-3.1 0-5.73-2.09-6.67-4.9H1.32v3.09A12 12 0 0 0 12 24Z"
|
||||
/>
|
||||
<path
|
||||
fill="#FBBC05"
|
||||
d="M5.33 14.34a7.2 7.2 0 0 1 0-4.68V6.57H1.32a12 12 0 0 0 0 10.86l4.01-3.09Z"
|
||||
/>
|
||||
<path
|
||||
fill="#EA4335"
|
||||
d="M12 4.77c1.76 0 3.35.6 4.6 1.79l3.45-3.45C17.94 1.19 15.23 0 12 0A12 12 0 0 0 1.32 6.57l4.01 3.09C6.27 6.86 8.9 4.77 12 4.77Z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
function FacebookIcon() {
|
||||
return (
|
||||
<svg viewBox="0 0 24 24" className="size-4" fill="#1877F2">
|
||||
<path d="M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.1 4.39 23.09 10.13 24v-8.44H7.08v-3.49h3.05V9.41c0-3.02 1.79-4.69 4.53-4.69 1.31 0 2.68.24 2.68.24v2.96h-1.51c-1.49 0-1.95.93-1.95 1.89v2.26h3.32l-.53 3.49h-2.79V24C19.61 23.09 24 18.1 24 12.07Z" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default function LoginPage() {
|
||||
const router = useRouter()
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const form = useForm<LoginValues>({
|
||||
resolver: zodResolver(loginSchema),
|
||||
defaultValues: { email: "", password: "", agreeToTerms: true },
|
||||
})
|
||||
|
||||
const onSubmit = form.handleSubmit(async (values) => {
|
||||
// TODO: wire up to the auth API once it exists
|
||||
console.log(values)
|
||||
router.push("/dashboard")
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="grid min-h-screen bg-white md:grid-cols-[60%_40%]">
|
||||
<div className="relative hidden flex-col justify-between overflow-hidden bg-[radial-gradient(ellipse_at_bottom_right,var(--color-orange-600),var(--color-rose-950)_60%,var(--color-slate-950))] p-8 md:flex">
|
||||
<svg viewBox="0 0 48 32" className="h-10 w-16 fill-white">
|
||||
<path d="M24 16c-3-8-11-12-16-8s-3 14 6 14c5 0 8.5-2.5 10-6 1.5 3.5 5 6 10 6 9 0 11-10 6-14s-13 0-16 8Z" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center p-8 sm:p-12">
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
type="button"
|
||||
aria-label="Go back"
|
||||
className="flex size-10 shrink-0 items-center justify-center text-foreground"
|
||||
>
|
||||
<ArrowLeft className="size-6" />
|
||||
</button>
|
||||
|
||||
<h1 className="text-5xl font-bold tracking-tighter md:text-6xl">Log in</h1>
|
||||
</div>
|
||||
<p className="mt-4 text-lg text-muted-foreground">
|
||||
Don't have an account?{" "}
|
||||
<Link href="#" className="font-semibold text-foreground underline underline-offset-2">
|
||||
Create an Account
|
||||
</Link>
|
||||
</p>
|
||||
|
||||
<form onSubmit={onSubmit} noValidate className="mt-8">
|
||||
<FieldGroup>
|
||||
<Field data-invalid={!!form.formState.errors.email}>
|
||||
<FieldLabel htmlFor="email" className="text-lg font-semibold">
|
||||
Email Address
|
||||
</FieldLabel>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
autoComplete="email"
|
||||
className="h-14 rounded-full px-5 text-lg"
|
||||
placeholder="john52martinez@gmail.com"
|
||||
aria-invalid={!!form.formState.errors.email}
|
||||
{...form.register("email")}
|
||||
/>
|
||||
<FieldError errors={[form.formState.errors.email]} />
|
||||
</Field>
|
||||
|
||||
<Field data-invalid={!!form.formState.errors.password}>
|
||||
<FieldLabel htmlFor="password" className="text-lg font-semibold">
|
||||
Password
|
||||
</FieldLabel>
|
||||
<div className="relative">
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
autoComplete="current-password"
|
||||
className="h-14 rounded-full px-5 pr-12 text-lg"
|
||||
placeholder="Password"
|
||||
aria-invalid={!!form.formState.errors.password}
|
||||
{...form.register("password")}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword((v) => !v)}
|
||||
aria-label={showPassword ? "Hide password" : "Show password"}
|
||||
className="absolute inset-y-0 right-5 flex items-center text-muted-foreground"
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="size-5" />
|
||||
) : (
|
||||
<Eye className="size-5" />
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
<FieldError errors={[form.formState.errors.password]} />
|
||||
<div className="flex justify-end">
|
||||
<Link href="#" className="text-lg font-semibold underline underline-offset-2">
|
||||
Forgot Password?
|
||||
</Link>
|
||||
</div>
|
||||
</Field>
|
||||
|
||||
<div className="flex justify-center">
|
||||
<Button
|
||||
type="submit"
|
||||
size="lg"
|
||||
className="h-14 w-72 rounded-full text-lg"
|
||||
disabled={form.formState.isSubmitting}
|
||||
>
|
||||
{form.formState.isSubmitting ? "Logging in…" : "Log in"}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<Field data-invalid={!!form.formState.errors.agreeToTerms}>
|
||||
<Controller
|
||||
control={form.control}
|
||||
name="agreeToTerms"
|
||||
render={({ field }) => (
|
||||
<label className="flex items-center gap-2 text-lg">
|
||||
<Checkbox
|
||||
checked={field.value}
|
||||
onCheckedChange={(checked) => field.onChange(checked === true)}
|
||||
/>
|
||||
<span>
|
||||
I agree to the{" "}
|
||||
<Link href="#" className="font-semibold underline underline-offset-2">
|
||||
Terms & Condition
|
||||
</Link>
|
||||
</span>
|
||||
</label>
|
||||
)}
|
||||
/>
|
||||
<FieldError errors={[form.formState.errors.agreeToTerms]} />
|
||||
</Field>
|
||||
</FieldGroup>
|
||||
</form>
|
||||
|
||||
<div className="my-6 flex items-center gap-3 text-lg text-muted-foreground">
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
or
|
||||
<div className="h-px flex-1 bg-border" />
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Button variant="outline" className="h-13 rounded-full text-lg">
|
||||
<GoogleIcon />
|
||||
Continue with Google
|
||||
</Button>
|
||||
<Button variant="outline" className="h-13 rounded-full text-lg">
|
||||
<FacebookIcon />
|
||||
Continue with Facebook
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
+2
-62
@@ -1,65 +1,5 @@
|
||||
import Image from "next/image";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
|
||||
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={100}
|
||||
height={20}
|
||||
priority
|
||||
/>
|
||||
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
|
||||
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
|
||||
To get started, edit the page.tsx file.
|
||||
</h1>
|
||||
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
|
||||
Looking for a starting point or more instructions? Head over to{" "}
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Templates
|
||||
</a>{" "}
|
||||
or the{" "}
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
className="font-medium text-zinc-950 dark:text-zinc-50"
|
||||
>
|
||||
Learning
|
||||
</a>{" "}
|
||||
center.
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Deploy Now
|
||||
</a>
|
||||
<a
|
||||
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Documentation
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
redirect("/login");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user