mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-03 17:44:44 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

spacing improvements to config layout

Browse source
This commit is contained in:
Milo Schwartz 2024-10-13 23:05:22 -04:00
parent 408f42daad
commit 7f6070a1b2
No known key found for this signature in database
3 changed files with 66 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

108
src/app/[orgId]/components/Header.tsx
View file

@ -10,9 +10,9 @@ import {
DropdownMenuItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger,
} from "@app/components/ui/dropdown-menu";
import { Separator } from "@app/components/ui/separator";
import Link from "next/link";
type HeaderProps = {
@ -33,54 +33,72 @@ export default function Header({ email, orgName, name }: HeaderProps) {
return (
<>
<div className="flex items-center justify-between">
<Badge variant="outline" className="text-md font-bold">
{orgName}
</Badge>
<div className="flex items-center">
<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
<Badge variant="secondary" className="text-md font-bold">
{orgName}
</Badge>
<div className="hidden md:block">
<div className="flex items-center gap-4 ml-6">
<Link
href="/docs"
className="text-stone-400 hover:text-stone-600"
>
<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>
Documentation
</Link>
<Link
href="/support"
className="text-stone-400 hover:text-stone-600"
>
Support
</Link>
</div>
</div>
</div>
<div className="flex items-center gap-3">
{/* Make the text truncate on smaller screens */}
<span className="text-lg font-medium truncate max-w-[150px] md:max-w-none">
{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 truncate">
{name}
</p>
)}
<p className="text-xs leading-none text-muted-foreground truncate">
{email}
</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div>
</div>
</>
);

2
src/app/[orgId]/components/TopbarNav.tsx
View file

@ -39,7 +39,7 @@ export function TopbarNav({
href={item.href.replace("{orgId}", orgId)}
className={cn(
"px-2 py-3 text-md",
pathname === item.href.replace("{orgId}", orgId)
pathname.startsWith(item.href.replace("{orgId}", orgId))
? "border-b-2 border-stone-600 text-stone-600"
: "hover:text-gray-600 text-stone-400",
"whitespace-nowrap",

4
src/app/[orgId]/layout.tsx
View file

@ -50,8 +50,8 @@ export default async function ConfigurationLaytout({
return (
<>
<div className="w-full bg-stone-200 border-b border-stone-300 mb-5 select-none sm:px-0 px-3">
<div className="container mx-auto flex flex-col content-between gap-3 pt-2">
<div className="w-full bg-stone-200 border-b border-stone-300 mb-6 select-none sm:px-0 px-3">
<div className="container mx-auto flex flex-col content-between gap-4 pt-2">
<Header
email={user.email}
orgName={params.orgId}