mirror of
https://github.com/fosrl/pangolin.git
synced 2026-03-03 17:26:38 +00:00
clean up naming and add /settings/ to path
This commit is contained in:
Milo Schwartz
147
src/app/[orgId]/settings/components/Header.tsx
Normal file
147
src/app/[orgId]/settings/components/Header.tsx
Normal file
@@ -0,0 +1,147 @@
|
||||
"use client";
|
||||
|
||||
import api from "@app/api";
|
||||
import { Avatar, AvatarFallback } from "@app/components/ui/avatar";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuGroup,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@app/components/ui/dropdown-menu";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@app/components/ui/select";
|
||||
import { useToast } from "@app/hooks/use-toast";
|
||||
import { ListOrgsResponse } from "@server/routers/org";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
type HeaderProps = {
|
||||
name?: string;
|
||||
email: string;
|
||||
orgName: string;
|
||||
orgs: ListOrgsResponse["orgs"];
|
||||
};
|
||||
|
||||
export default function Header({ email, orgName, name, orgs }: HeaderProps) {
|
||||
const { toast } = useToast();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
function getInitials() {
|
||||
if (name) {
|
||||
const [firstName, lastName] = name.split(" ");
|
||||
return `${firstName[0]}${lastName[0]}`;
|
||||
}
|
||||
return email.substring(0, 2).toUpperCase();
|
||||
}
|
||||
|
||||
function logout() {
|
||||
api.post("/auth/logout")
|
||||
.catch((e) => {
|
||||
console.error("Error logging out", e);
|
||||
toast({
|
||||
title: "Error logging out",
|
||||
});
|
||||
})
|
||||
.then(() => {
|
||||
router.push("/auth/login");
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="relative h-10 w-10 rounded-full"
|
||||
>
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarFallback>
|
||||
{getInitials()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent
|
||||
className="w-56"
|
||||
align="start"
|
||||
forceMount
|
||||
>
|
||||
<DropdownMenuLabel className="font-normal">
|
||||
<div className="flex flex-col space-y-1">
|
||||
{name && (
|
||||
<p className="text-sm font-medium leading-none truncate">
|
||||
{name}
|
||||
</p>
|
||||
)}
|
||||
<p className="text-xs leading-none text-muted-foreground truncate">
|
||||
{email}
|
||||
</p>
|
||||
</div>
|
||||
</DropdownMenuLabel>
|
||||
<DropdownMenuSeparator />
|
||||
<DropdownMenuGroup>
|
||||
<DropdownMenuItem onClick={logout}>
|
||||
Log out
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuGroup>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
<span className="truncate max-w-[150px] md:max-w-none font-medium">
|
||||
{name || email}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<div className="hidden md:block">
|
||||
<div className="flex items-center gap-4 mr-4">
|
||||
<Link
|
||||
href="/docs"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Documentation
|
||||
</Link>
|
||||
<Link
|
||||
href="/support"
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
Support
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Select defaultValue={orgName}>
|
||||
<SelectTrigger className="w-[100px] md:w-[180px]">
|
||||
<SelectValue placeholder="Select an org" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
{orgs.map((org) => (
|
||||
<SelectItem
|
||||
value={org.name}
|
||||
key={org.orgId}
|
||||
>
|
||||
{org.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
62
src/app/[orgId]/settings/components/TopbarNav.tsx
Normal file
62
src/app/[orgId]/settings/components/TopbarNav.tsx
Normal file
@@ -0,0 +1,62 @@
|
||||
"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;
|
||||
orgId: string;
|
||||
}
|
||||
|
||||
export function TopbarNav({
|
||||
className,
|
||||
items,
|
||||
disabled = false,
|
||||
orgId,
|
||||
...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.replace("{orgId}", orgId)}
|
||||
className={cn(
|
||||
"px-2 py-3 text-md",
|
||||
pathname.startsWith(item.href.replace("{orgId}", orgId))
|
||||
? "border-b-2 border-primary text-primary font-medium"
|
||||
: "hover:text-primary text-muted-foreground font-medium",
|
||||
"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 && (
|
||||
<div className="hidden md:block">{item.icon}</div>
|
||||
)}
|
||||
{item.title}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user