fumadocs-ui
Version:
The Radix UI version of Fumadocs UI
69 lines (68 loc) • 3.44 kB
JavaScript
"use client";
import { cn } from "../../../utils/cn.js";
import { buttonVariants } from "../../../components/ui/button.js";
import { SidebarTrigger } from "../../../components/sidebar/base.js";
import { LayoutTabsDropdown } from "../layout-tabs.js";
import { useGlassLayout } from "../index.js";
import { jsx, jsxs } from "react/jsx-runtime";
import { ChevronsUpDown, LanguagesIcon, MessageCircleIcon, SidebarIcon } from "lucide-react";
import { useTranslations } from "@fuma-translate/react";
//#region src/layouts/glass/slots/header.tsx
const baseVariants = "rounded-full bg-fd-popover/80 text-fd-popover-foreground border backdrop-blur-sm shadow-sm";
function Header({ className, ...props }) {
const { props: { tabs, aiChat }, slots } = useGlassLayout();
const t = useTranslations();
const sidebar = slots.sidebar.use();
return /* @__PURE__ */ jsxs("div", {
className: cn("sticky flex flex-row justify-end gap-2 [grid-area:left-margin/left-margin/right/right] z-20 px-4 md:top-0 md:pt-2 md:px-2 md:h-12 md:bg-linear-to-b md:from-fd-background max-md:bottom-0 max-md:mt-auto max-md:h-16 max-md:pb-4 max-md:bg-linear-to-t max-md:from-fd-background", className),
...props,
children: [
sidebar.collapsible && sidebar.collapsed && /* @__PURE__ */ jsx("button", {
"aria-label": t("Show Sidebar", { note: "sidebar" }),
className: cn(buttonVariants({
size: "icon-sm",
variant: "secondary"
}), baseVariants, "size-10 me-auto shrink-0 max-md:hidden"),
onClick: () => sidebar.setCollapsed(false),
children: /* @__PURE__ */ jsx(SidebarIcon, {})
}),
slots.searchTrigger && /* @__PURE__ */ jsx(slots.searchTrigger.sm, {
color: "secondary",
size: "icon",
className: cn(baseVariants, "size-12 shrink-0 md:hidden")
}),
tabs.length > 0 && /* @__PURE__ */ jsx(LayoutTabsDropdown, {
tabs,
size: "lg",
className: cn(baseVariants, "min-w-0 ps-4 pe-3 flex-1 [&_svg]:size-5 md:hidden")
}),
slots.searchTrigger && /* @__PURE__ */ jsx("div", {
className: "@container flex justify-end flex-1 max-md:hidden",
children: /* @__PURE__ */ jsx(slots.searchTrigger.full, { className: cn(baseVariants, "text-fd-muted-foreground ps-3 w-full @sm:max-w-[200px]") })
}),
aiChat && !aiChat.open && /* @__PURE__ */ jsxs("button", {
className: cn(buttonVariants({ variant: "secondary" }), baseVariants, "px-3 gap-2 text-fd-muted-foreground shrink-0 max-md:hidden"),
onClick: () => aiChat.onOpenChange(true),
children: [/* @__PURE__ */ jsx(MessageCircleIcon, { className: "size-4" }), t("Ask AI", { note: "AI chat button" })]
}),
slots.languageSelect && /* @__PURE__ */ jsxs(slots.languageSelect.root, {
className: cn(baseVariants, "px-3 rounded-full max-md:hidden"),
children: [
/* @__PURE__ */ jsx(LanguagesIcon, { className: "size-4 text-fd-muted-foreground shrink-0" }),
/* @__PURE__ */ jsx(slots.languageSelect.text, {}),
/* @__PURE__ */ jsx(ChevronsUpDown, { className: "size-3.5 text-fd-muted-foreground shrink-0" })
]
}),
slots.themeSwitch && /* @__PURE__ */ jsx(slots.themeSwitch, { className: cn(baseVariants, "shrink-0 px-1.5 max-md:hidden") }),
/* @__PURE__ */ jsx(SidebarTrigger, {
className: cn(buttonVariants({
variant: "secondary",
size: "icon"
}), baseVariants, "shrink-0 size-12 md:hidden"),
children: /* @__PURE__ */ jsx(SidebarIcon, {})
})
]
});
}
//#endregion
export { Header };