mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-08-16 23:41:11 +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, DropdownMenuItem,
DropdownMenuLabel, DropdownMenuLabel,
DropdownMenuSeparator, DropdownMenuSeparator,
DropdownMenuShortcut,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@app/components/ui/dropdown-menu"; } from "@app/components/ui/dropdown-menu";
import { Separator } from "@app/components/ui/separator";
import Link from "next/link"; import Link from "next/link";
type HeaderProps = { type HeaderProps = {
@ -33,54 +33,72 @@ export default function Header({ email, orgName, name }: HeaderProps) {
return ( return (
<> <>
<div className="flex items-center justify-between"> <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">
<div className="flex items-center gap-3"> <Badge variant="secondary" className="text-md font-bold">
<span className="text-lg font-medium"> {orgName}
{name || email} </Badge>
</span>
<DropdownMenu> <div className="hidden md:block">
<DropdownMenuTrigger asChild> <div className="flex items-center gap-4 ml-6">
<Button <Link
variant="ghost" href="/docs"
className="relative h-10 w-10 rounded-full" className="text-stone-400 hover:text-stone-600"
>
<Avatar className="h-10 w-10">
<AvatarFallback>
{getInitials()}
</AvatarFallback>
</Avatar>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent
className="w-56"
align="end"
forceMount
> >
<DropdownMenuLabel className="font-normal"> Documentation
<div className="flex flex-col space-y-1"> </Link>
{name && ( <Link
<p className="text-sm font-medium leading-none"> href="/support"
{name} className="text-stone-400 hover:text-stone-600"
</p> >
)} Support
<p className="text-xs leading-none text-muted-foreground"> </Link>
{email} </div>
</p>
</div>
</DropdownMenuLabel>
<DropdownMenuSeparator />
<DropdownMenuGroup>
<DropdownMenuItem>Profile</DropdownMenuItem>
<DropdownMenuItem>Log out</DropdownMenuItem>
</DropdownMenuGroup>
</DropdownMenuContent>
</DropdownMenu>
</div> </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> </div>
</> </>
); );

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

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

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

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