Skip to content

Instantly share code, notes, and snippets.

@vessi

vessi/login_page.jsx

Created May 15, 2024 13:07
Show Gist options
  • Save vessi/ac39327050a308c8418242808ed8c54c to your computer and use it in GitHub Desktop.
Save vessi/ac39327050a308c8418242808ed8c54c to your computer and use it in GitHub Desktop.
Download ZIP
Raw
login_page.jsx
/**
* v0 by Vercel.
* @see https://v0.dev/t/zvUrsr6U9nn
* Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
*/
import Link from "next/link"
import { DropdownMenuTrigger, DropdownMenuItem, DropdownMenuContent, DropdownMenu } from "@/components/ui/dropdown-menu"
import { Button } from "@/components/ui/button"
import { SheetTrigger, SheetContent, Sheet } from "@/components/ui/sheet"
import { Badge } from "@/components/ui/badge"
import { CollapsibleTrigger, CollapsibleContent, Collapsible } from "@/components/ui/collapsible"
import { CardTitle, CardDescription, CardHeader, CardContent, Card } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Input } from "@/components/ui/input"
export default function Component() {
return (
<>
<header className="fixed top-0 z-50 w-full bg-white shadow-sm dark:bg-gray-950">
<div className="container flex h-16 items-center justify-between px-4 md:px-6">
<Link className="flex items-center" href="#">
<MountainIcon className="h-6 w-6" />
<span className="sr-only">Acme Inc</span>
</Link>
<nav className="hidden lg:flex items-center gap-6">
<DropdownMenu>
<DropdownMenuTrigger className="inline-flex items-center gap-1 text-sm font-medium transition-colors hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 dark:hover:text-gray-50 dark:focus-visible:ring-gray-300">
Products
<ChevronDownIcon className="h-4 w-4" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Link href="#">Analytics</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href="#">Developer Tools</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href="#">Security & Compliance</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href="#">Scalability</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<DropdownMenu>
<DropdownMenuTrigger className="inline-flex items-center gap-1 text-sm font-medium transition-colors hover:text-gray-900 focus:outline-none focus-visible:ring-2 focus-visible:ring-gray-950 dark:hover:text-gray-50 dark:focus-visible:ring-gray-300">
Resources
<ChevronDownIcon className="h-4 w-4" />
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Link href="#">Blog Posts</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href="#">Case Studies</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href="#">Documentation</Link>
</DropdownMenuItem>
<DropdownMenuItem>
<Link href="#">Help Center</Link>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
<Link
className="inline-flex h-9 items-center justify-center rounded-md bg-gray-900 px-4 py-2 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-gray-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950 disabled:pointer-events-none disabled:opacity-50 dark:bg-gray-50 dark:text-gray-900 dark:hover:bg-gray-50/90 dark:focus-visible:ring-gray-300"
href="#"
>
Book a demo
</Link>
</nav>
<Sheet>
<SheetTrigger asChild>
<Button className="lg:hidden" size="icon" variant="outline">
<MenuIcon className="h-6 w-6" />
<span className="sr-only">Toggle navigation menu</span>
</Button>
</SheetTrigger>
<SheetContent side="left">
<div className="flex h-full max-h-screen flex-col gap-2">
<div className="flex h-[60px] items-center border-b px-6">
<Link className="flex items-center gap-2 font-semibold" href="#">
<MountainIcon className="h-6 w-6" />
<span className="">Acme Inc</span>
</Link>
<Button className="ml-auto h-8 w-8" size="icon" variant="outline">
<BellIcon className="h-4 w-4" />
<span className="sr-only">Toggle notifications</span>
</Button>
</div>
<div className="flex-1 overflow-auto py-2">
<nav className="grid items-start px-4 text-sm font-medium">
<Link
className="flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50"
href="#"
>
<HomeIcon className="h-4 w-4" />
Home
</Link>
<Link
className="flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50"
href="#"
>
<ShoppingCartIcon className="h-4 w-4" />
Orders
<Badge className="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded-full">
6
</Badge>
</Link>
<Collapsible className="grid gap-4">
<CollapsibleTrigger className="flex items-center gap-3 rounded-lg bg-gray-100 px-3 py-2 text-gray-900 transition-all hover:text-gray-900 dark:bg-gray-800 dark:text-gray-50 dark:hover:text-gray-50 [&[data-state=open]>svg]:rotate-90">
<PackageIcon className="h-4 w-4" />
Products
<ChevronRightIcon className="ml-auto h-5 w-5 transition-all" />
</CollapsibleTrigger>
<CollapsibleContent>
<div className="-mx-6 grid gap-6 bg-gray-100 p-6 dark:bg-gray-800">
<Link className="group grid h-auto w-full justify-start gap-1" href="#">
<div className="text-sm font-medium leading-none group-hover:underline">Analytics</div>
<div className="line-clamp-2 text-sm leading-snug text-gray-500 dark:text-gray-400">
Upgrade your reporting with advanced analytics.
</div>
</Link>
<Link className="group grid h-auto w-full justify-start gap-1" href="#">
<div className="text-sm font-medium leading-none group-hover:underline">
Developer Tools
</div>
<div className="line-clamp-2 text-sm leading-snug text-gray-500 dark:text-gray-400">
Extend your application with our developer tools.
</div>
</Link>
<Link className="group grid h-auto w-full justify-start gap-1" href="#">
<div className="text-sm font-medium leading-none group-hover:underline">
Security & Compliance
</div>
<div className="line-clamp-2 text-sm leading-snug text-gray-500 dark:text-gray-400">
Keep your data secure with our security features.
</div>
</Link>
<Link className="group grid h-auto w-full justify-start gap-1" href="#">
<div className="text-sm font-medium leading-none group-hover:underline">Scalability</div>
<div className="line-clamp-2 text-sm leading-snug text-gray-500 dark:text-gray-400">
Scale your application with our infrastructure.
</div>
</Link>
</div>
</CollapsibleContent>
</Collapsible>
<Link
className="flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50"
href="#"
>
<UsersIcon className="h-4 w-4" />
Customers
</Link>
<Link
className="flex items-center gap-3 rounded-lg px-3 py-2 text-gray-500 transition-all hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-50"
href="#"
>
<LineChartIcon className="h-4 w-4" />
Analytics
</Link>
</nav>
</div>
<div className="mt-auto p-4">
<Card>
<CardHeader className="pb-4">
<CardTitle>Upgrade to Pro</CardTitle>
<CardDescription>
Unlock all features and get unlimited access to our support team
</CardDescription>
</CardHeader>
<CardContent>
<Button className="w-full" size="sm">
Upgrade
</Button>
</CardContent>
</Card>
</div>
</div>
</SheetContent>
</Sheet>
</div>
</header>
<main className="pt-20 pb-24 md:pt-24 md:pb-32">
<div className="container grid items-center gap-8 px-4 md:grid-cols-2 md:gap-12 md:px-6">
<div className="space-y-4">
<h1 className="text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl">Welcome back</h1>
<p className="text-gray-500 dark:text-gray-400 md:text-xl">Sign in to your account to continue.</p>
</div>
<div className="rounded-lg border bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-950">
<form className="space-y-4">
<div className="space-y-2">
<Label htmlFor="email">Email</Label>
<Input id="email" placeholder="[email protected]" required type="email" />
</div>
<div className="space-y-2">
<Label htmlFor="password">Password</Label>
<Input id="password" required type="password" />
</div>
<Button className="w-full" type="submit">
Sign in
</Button>
</form>
</div>
</div>
</main>
</>
)
}
function BellIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9" />
<path d="M10.3 21a1.94 1.94 0 0 0 3.4 0" />
</svg>
)
}
function ChevronDownIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m6 9 6 6 6-6" />
</svg>
)
}
function ChevronRightIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m9 18 6-6-6-6" />
</svg>
)
}
function HomeIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
<polyline points="9 22 9 12 15 12 15 22" />
</svg>
)
}
function LineChartIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M3 3v18h18" />
<path d="m19 9-5 5-4-4-3 3" />
</svg>
)
}
function MenuIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<line x1="4" x2="20" y1="12" y2="12" />
<line x1="4" x2="20" y1="6" y2="6" />
<line x1="4" x2="20" y1="18" y2="18" />
</svg>
)
}
function MountainIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m8 3 4 8 5-5 5 15H2L8 3z" />
</svg>
)
}
function PackageIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="m7.5 4.27 9 5.15" />
<path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z" />
<path d="m3.3 7 8.7 5 8.7-5" />
<path d="M12 22V12" />
</svg>
)
}
function ShoppingCartIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<circle cx="8" cy="21" r="1" />
<circle cx="19" cy="21" r="1" />
<path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12" />
</svg>
)
}
function UsersIcon(props) {
return (
<svg
{...props}
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
>
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
<circle cx="9" cy="7" r="4" />
<path d="M22 21v-2a4 4 0 0 0-3-3.87" />
<path d="M16 3.13a4 4 0 0 1 0 7.75" />
</svg>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment