mirror of
https://github.com/fosrl/pangolin.git
synced 2026-02-16 18:06:39 +00:00
config layout
This commit is contained in:
Milo Schwartz
80
src/app/configuration/components/Header.tsx
Normal file
80
src/app/configuration/components/Header.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import { Avatar, AvatarFallback } from "@app/components/ui/avatar";
|
||||
import { Badge } from "@app/components/ui/badge";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuShortcut,
|
||||
DropdownMenuTrigger,
|
||||
} from "@app/components/ui/dropdown-menu";
|
||||
|
||||
type HeaderProps = {
|
||||
name?: string;
|
||||
email: string;
|
||||
orgName: string;
|
||||
};
|
||||
|
||||
export default function Header({ email, orgName, name }: HeaderProps) {
|
||||
function getInitials() {
|
||||
if (name) {
|
||||
const [firstName, lastName] = name.split(" ");
|
||||
return `${firstName[0]}${lastName[0]}`;
|
||||
}
|
||||
return email.substring(0, 2).toUpperCase();
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<Badge variant="outline" className="text-md font-bold">{orgName}</Badge>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-lg font-medium">{name || email}</span>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="relative h-10 w-10 rounded-full"
|
||||
>
|
||||
<Avatar className="h-10 w-10">
|
||||
<AvatarFallback>
|
||||
{getInitials()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-56"
|
||||
align="end"
|
||||
forceMount
|
||||
>
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col space-y-1">
|
||||
{name && (
|
||||
<p className="text-sm font-medium leading-none">
|
||||
{name}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs leading-none text-muted-foreground">
|
||||
{email}
|
||||
</p>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem>Profile</DropdownMenuItem>
|
||||
<DropdownMenuItem>Log out</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
58
src/app/configuration/components/TopbarNav.tsx
Normal file
58
src/app/configuration/components/TopbarNav.tsx
Normal file
@@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface TopbarNavProps extends React.HTMLAttributes<HTMLElement> {
|
||||
items: {
|
||||
href: string;
|
||||
title: string;
|
||||
icon: React.ReactNode;
|
||||
}[];
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export function TopbarNav({
|
||||
className,
|
||||
items,
|
||||
disabled = false,
|
||||
...props
|
||||
}: TopbarNavProps) {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={cn(
|
||||
"flex overflow-x-auto space-x-4 lg:space-x-6",
|
||||
disabled && "opacity-50 pointer-events-none",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{items.map((item) => (
|
||||
<Link
|
||||
key={item.href}
|
||||
href={item.href}
|
||||
className={cn(
|
||||
"px-2 py-3 text-md",
|
||||
pathname === item.href
|
||||
? "border-b-2 border-stone-600 text-stone-600"
|
||||
: "hover:text-gray-600 text-stone-400",
|
||||
"whitespace-nowrap",
|
||||
disabled && "cursor-not-allowed",
|
||||
)}
|
||||
onClick={disabled ? (e) => e.preventDefault() : undefined}
|
||||
tabIndex={disabled ? -1 : undefined}
|
||||
aria-disabled={disabled}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{item.icon}
|
||||
{item.title}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -1,64 +1,49 @@
|
||||
import { Metadata } from "next"
|
||||
import Image from "next/image"
|
||||
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { SidebarNav } from "@/components/sidebar-nav"
|
||||
import { Metadata } from "next";
|
||||
import { TopbarNav } from "./components/TopbarNav";
|
||||
import { LayoutGrid, Tent } from "lucide-react";
|
||||
import Header from "./components/Header";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Forms",
|
||||
description: "Advanced form example using react-hook-form and Zod.",
|
||||
}
|
||||
title: "Configuration",
|
||||
description: "",
|
||||
};
|
||||
|
||||
const sidebarNavItems = [
|
||||
const topNavItems = [
|
||||
{
|
||||
title: "Sites",
|
||||
href: "/configuration/sites",
|
||||
icon: <Tent />,
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
href: "/configuration/resources",
|
||||
icon: <LayoutGrid />,
|
||||
},
|
||||
]
|
||||
];
|
||||
|
||||
interface SettingsLayoutProps {
|
||||
children: React.ReactNode,
|
||||
params: { siteId: string }
|
||||
interface ConfigurationLaytoutProps {
|
||||
children: React.ReactNode;
|
||||
params: { siteId: string };
|
||||
}
|
||||
|
||||
export default function SettingsLayout({ children, params }: SettingsLayoutProps) {
|
||||
export default async function ConfigurationLaytout({
|
||||
children,
|
||||
params,
|
||||
}: ConfigurationLaytoutProps) {
|
||||
return (
|
||||
<>
|
||||
<div className="md:hidden">
|
||||
<Image
|
||||
src="/configuration/forms-light.png"
|
||||
width={1280}
|
||||
height={791}
|
||||
alt="Forms"
|
||||
className="block dark:hidden"
|
||||
/>
|
||||
<Image
|
||||
src="/configuration/forms-dark.png"
|
||||
width={1280}
|
||||
height={791}
|
||||
alt="Forms"
|
||||
className="hidden dark:block"
|
||||
/>
|
||||
</div>
|
||||
<div className="hidden space-y-6 p-10 pb-16 md:block">
|
||||
<div className="space-y-0.5">
|
||||
<h2 className="text-2xl font-bold tracking-tight">Settings</h2>
|
||||
<p className="text-muted-foreground">
|
||||
{ params.siteId == "create" ? "Create site..." : "Manage settings on site " + params.siteId }.
|
||||
</p>
|
||||
</div>
|
||||
<Separator className="my-6" />
|
||||
<div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">
|
||||
<aside className="-mx-4 lg:w-1/5">
|
||||
<SidebarNav items={sidebarNavItems.map(i => { i.href = i.href.replace("{siteId}", params.siteId); return i})} disabled={params.siteId == "create"} />
|
||||
</aside>
|
||||
<div className="flex-1 lg:max-w-2xl">{children}</div>
|
||||
<div className="w-full bg-stone-200 border-b border-stone-300 mb-5 select-none px-3">
|
||||
<div className="container mx-auto flex flex-col content-between gap-3 pt-2">
|
||||
<Header
|
||||
email="mschwartz10612@gmail.com"
|
||||
orgName="Home Lab 1"
|
||||
name="Milo Schwartz"
|
||||
/>
|
||||
<TopbarNav items={topNavItems} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-3">{children}</div>
|
||||
</>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
export default async function Page() {
|
||||
return (
|
||||
<>
|
||||
<p>This is where the table goes...</p>
|
||||
<div className="space-y-0.5 select-none">
|
||||
<h2 className="text-2xl font-bold tracking-tight">
|
||||
Manage Resources
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Create secure proxies to your private resources.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,8 +3,14 @@ import Link from "next/link";
|
||||
export default async function Page() {
|
||||
return (
|
||||
<>
|
||||
<p>This is where the table goes...</p>
|
||||
<Link href="/configuration/sites/123">Open up the site 123</Link>
|
||||
<div className="space-y-0.5 select-none">
|
||||
<h2 className="text-2xl font-bold tracking-tight">
|
||||
Manage Sites
|
||||
</h2>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your existing sites here or create a new one.
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user