refactor: polish settings toolbar
This commit is contained in:
parent
1abbd740a3
commit
0861a0d87e
@ -11,7 +11,6 @@ import {
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { ADMIN_SETTINGS_NAV_GROUPS } from "../_lib/settings-navigation";
|
||||
import type { AdminSettingsNavItem } from "../_lib/types";
|
||||
|
||||
@ -31,8 +30,8 @@ function SettingsQuickAction({
|
||||
const Icon = item.icon;
|
||||
const className =
|
||||
item.value === activeTab
|
||||
? "border-foreground/10 bg-foreground text-background shadow-sm hover:bg-foreground/90 dark:border-white/20 dark:bg-white dark:text-black dark:hover:bg-white/90"
|
||||
: "border-transparent bg-transparent text-muted-foreground hover:border-border/80 hover:bg-background hover:text-foreground";
|
||||
? "border-foreground/10 bg-foreground text-background shadow-sm hover:!bg-foreground/90 hover:!text-background dark:border-white/20 dark:bg-white dark:text-black dark:hover:!bg-white/90 dark:hover:!text-black"
|
||||
: "border-transparent bg-transparent text-muted-foreground hover:!border-border/80 hover:!bg-zinc-100 hover:!text-foreground dark:hover:!bg-zinc-900/50";
|
||||
const layoutClassName = stretched
|
||||
? "h-10 w-full min-w-0 justify-center gap-2 rounded-2xl border px-4"
|
||||
: "h-9 shrink-0 gap-2 rounded-full border px-3.5";
|
||||
@ -126,22 +125,7 @@ export function AdminSettingsNavigation({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="hidden min-w-0 items-center gap-2 md:flex">
|
||||
<div className="shrink-0 text-[11px] text-muted-foreground uppercase tracking-[0.18em]">
|
||||
Admin Console
|
||||
</div>
|
||||
|
||||
{activeItem ? (
|
||||
<>
|
||||
<span className="h-1 w-1 shrink-0 rounded-full bg-border" />
|
||||
<span className="shrink-0 text-muted-foreground text-xs">
|
||||
{activeItem.label}
|
||||
</span>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
<Separator className="mx-1 h-5 shrink-0" orientation="vertical" />
|
||||
|
||||
<div className="hidden min-w-0 items-center gap-3 md:flex">
|
||||
<div className="flex min-w-0 flex-1 items-center gap-2 overflow-x-auto">
|
||||
{ALL_SETTINGS_ITEMS.map((item) => (
|
||||
<div className="min-w-[118px] flex-1" key={item.value}>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user