fulldev-ui 0.7.0 → 0.9.0

package/src/components/blocks/header-1.astro

@@ -1,200 +1,127 @@
 ---
-import MenuIcon from "lucide-static/icons/menu.svg"
-
+import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-import { Header, HeaderActions } from "@/components/ui/header"
+import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
 import { Icon } from "@/components/ui/icon"
 import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
 import {
   NavigationMenu,
-  NavigationMenuContent,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
-  NavigationMenuSub,
-  NavigationMenuSubItem,
-  NavigationMenuSubLink,
-  NavigationMenuTrigger,
 } from "@/components/ui/navigation-menu"
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-} from "@/components/ui/sidebar"
-import { ThemeToggle } from "@/components/ui/theme-toggle"
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet"
 
-interface Props {
-  logo?: {
-    src?: string
+type Props = {
+  class?: string
+  logo: {
+    label: string
+    href: string
+    src?: any
+    srcLight?: any
+    srcDark?: any
     alt?: string
-    text?: string
-    href?: string
   }
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
-  }[]
-  socials?: string[]
-  menus?: {
-    text?: string
-    href?: string
+  navigation: {
+    label: string
+    href: string
     links?: {
-      text?: string
-      href?: string
+      label: string
+      href: string
     }[]
   }[]
+  buttons: {
+    label: string
+    href: string
+    icon?: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
 }
 
-const { logo, menus, links, socials } = Astro.props
+const { class: className, logo, navigation, buttons } = Astro.props
 ---
 
-<Header>
-  <Logo href={logo?.href || "/"}>
-    <LogoImage src={logo?.src} alt={logo?.alt} />
-    <LogoText>{logo?.text}</LogoText>
-  </Logo>
-  <NavigationMenu class="mr-auto @max-5xl:hidden">
-    <NavigationMenuList>
-      {
-        menus?.map((menu) => (
-          <NavigationMenuItem>
-            {menu.links && menu.links.length > 0 ? (
-              <>
-                <NavigationMenuTrigger
-                  class="inline-flex h-8 items-center bg-transparent px-3 py-0"
-                  href={menu.href}
-                >
-                  {menu.text}
-                </NavigationMenuTrigger>
-                <NavigationMenuContent>
-                  <NavigationMenuSub>
-                    {menu.links?.map((link) => (
-                      <NavigationMenuSubItem>
-                        <NavigationMenuSubLink href={link.href}>
-                          {link.text}
-                        </NavigationMenuSubLink>
-                      </NavigationMenuSubItem>
-                    ))}
-                  </NavigationMenuSub>
-                </NavigationMenuContent>
-              </>
-            ) : (
-              <NavigationMenuLink
-                class="inline-flex h-8 items-center bg-transparent px-3 py-0"
-                variant="trigger"
-                href={menu.href}
-              >
-                {menu.text}
-              </NavigationMenuLink>
-            )}
-          </NavigationMenuItem>
-        ))
-      }
-    </NavigationMenuList>
-  </NavigationMenu>
-  <HeaderActions class="@max-5xl:hidden">
-    {
-      socials?.map((social) => (
-        <>
-          <Button variant="ghost" size="icon-sm" href={social} target="_blank">
-            <Icon href={social} />
-          </Button>
-        </>
-      ))
-    }
-    <ThemeToggle />
-    {
-      links?.map(({ icon, text, ...link }, i) => (
-        <Button
-          variant={i === links.length - 1 ? "default" : "outline"}
-          size="sm"
-          {...link}
-        >
-          {icon && <Icon name={icon} />}
-          {text}
-        </Button>
-      ))
-    }
-  </HeaderActions>
-  <Sheet class="first:ml-auto">
-    <SheetTrigger
-      class="@5xl:hidden"
-      variant="ghost"
-      size="icon"
-      name="open-menu-button"
-    >
-      <MenuIcon class="size-5" />
-    </SheetTrigger>
-    <SheetContent class="overflow-y-auto px-4 py-12">
-      <SidebarMenu>
+<Header class={cn("", className)}>
+  <HeaderContainer class="justify-between gap-4">
+    <HeaderGroup>
+      <Logo href={logo.href}>
+        <LogoImage
+          src={logo.src}
+          srcLight={logo.srcLight}
+          srcDark={logo.srcDark}
+          alt={logo.alt}
+        />
+        {logo.label && <LogoText>{logo.label}</LogoText>}
+      </Logo>
+    </HeaderGroup>
+    <NavigationMenu class="hidden flex-none justify-start lg:flex">
+      <NavigationMenuList class="justify-start">
         {
-          menus?.map((menu) => (
-            <SidebarMenuItem>
-              {menu.links && menu.links.length > 0 ? (
-                <Collapsible>
-                  <CollapsibleTrigger>
-                    <SidebarMenuButton class="h-10 rounded-md px-4 text-xl">
-                      {menu.text}
-                    </SidebarMenuButton>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {menu.links?.map((link) => (
-                        <SidebarMenuSubItem>
-                          <SidebarMenuSubButton href={link.href}>
-                            {link.text}
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
-                </Collapsible>
-              ) : (
-                <SidebarMenuButton
-                  class="h-10 w-full rounded-md px-4 text-xl has-[>svg]:px-4"
-                  href={menu.href}
-                >
-                  {menu.text}
-                </SidebarMenuButton>
-              )}
-            </SidebarMenuItem>
-          ))
-        }
-      </SidebarMenu>
-      <HeaderActions class="flex flex-col gap-2">
-        {
-          links?.map(({ icon, text, ...link }, i) => (
-            <Button
-              variant={i === links.length - 1 ? "default" : "secondary"}
-              class="w-full"
-              {...link}
-            >
-              {icon && <Icon name={icon} />}
-              {text}
-            </Button>
-          ))
-        }
-      </HeaderActions>
-      <HeaderActions>
-        {
-          socials?.map((social) => (
-            <Button variant="ghost" size="icon" href={social}>
-              <Icon href={social} />
-            </Button>
+          navigation.map((item, index) => (
+            <NavigationMenuItem value={`nav-${index}`}>
+              <NavigationMenuLink href={item.href}>
+                {item.label}
+              </NavigationMenuLink>
+            </NavigationMenuItem>
           ))
         }
-      </HeaderActions>
-    </SheetContent>
-  </Sheet>
+      </NavigationMenuList>
+    </NavigationMenu>
+    <HeaderGroup class="ml-auto hidden flex-1 justify-end lg:flex">
+      <slot />
+      {
+        buttons.map(({ label, icon, ...button }) => (
+          <Button
+            as="a"
+            size={icon && !label ? "icon-sm" : "sm"}
+            aria-label={label}
+            target={button.href.startsWith("http") ? "_blank" : undefined}
+            rel={button.href.startsWith("http") ? "noreferrer" : undefined}
+            {...button}
+          >
+            {icon && <Icon name={icon} />}
+            {label}
+          </Button>
+        ))
+      }
+    </HeaderGroup>
+    <Sheet class="lg:hidden">
+      <SheetTrigger
+        variant="ghost"
+        size="icon-sm"
+        class="ml-auto"
+        aria-label="Open menu"
+      >
+        <Icon name="menu" />
+      </SheetTrigger>
+      <SheetContent side="right" class="p-0">
+        <SheetHeader class="sr-only">
+          <SheetTitle>Menu</SheetTitle>
+          <SheetDescription>Site navigation and actions.</SheetDescription>
+        </SheetHeader>
+        <div class="flex h-full flex-col gap-6 px-4 py-12">
+          <nav aria-label="Main navigation" class="flex flex-col gap-1">
+            {
+              navigation.map((item) => (
+                <SheetClose variant="ghost" class="justify-start">
+                  {item.label}
+                </SheetClose>
+              ))
+            }
+          </nav>
+          <div class="mt-auto flex flex-col gap-2">
+            <slot />
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  </HeaderContainer>
 </Header>

package/src/components/blocks/header-2.astro

@@ -1,195 +1,129 @@
 ---
-import MenuIcon from "lucide-static/icons/menu.svg"
-
+import { cn } from "@/lib/utils"
 import { Button } from "@/components/ui/button"
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible"
-import { Header, HeaderActions } from "@/components/ui/header"
+import { Header, HeaderContainer, HeaderGroup } from "@/components/ui/header"
 import { Icon } from "@/components/ui/icon"
 import { Logo, LogoImage, LogoText } from "@/components/ui/logo"
 import {
   NavigationMenu,
-  NavigationMenuContent,
   NavigationMenuItem,
   NavigationMenuLink,
   NavigationMenuList,
-  NavigationMenuSub,
-  NavigationMenuSubItem,
-  NavigationMenuSubLink,
-  NavigationMenuTrigger,
 } from "@/components/ui/navigation-menu"
-import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"
 import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  SidebarMenuSub,
-  SidebarMenuSubButton,
-  SidebarMenuSubItem,
-} from "@/components/ui/sidebar"
-import { ThemeToggle } from "@/components/ui/theme-toggle"
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet"
 
-interface Props {
-  logo?: {
-    src?: string
+type Props = {
+  class?: string
+  logo: {
+    label: string
+    href: string
+    src?: any
+    srcLight?: any
+    srcDark?: any
     alt?: string
-    text?: string
-    href?: string
   }
-  links?: {
-    icon?: string
-    text?: string
-    href?: string
-    target?: string
-  }[]
-  socials?: string[]
-  menus?: {
-    text?: string
-    href?: string
+  navigation: {
+    label: string
+    href: string
     links?: {
-      text?: string
-      href?: string
+      label: string
+      href: string
     }[]
   }[]
+  buttons: {
+    label: string
+    href: string
+    icon?: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
 }
 
-const { logo, menus, links, socials } = Astro.props
+const { class: className, logo, navigation, buttons } = Astro.props
 ---
 
-<Header>
-  <Logo href={logo?.href || "/"}>
-    <LogoImage src={logo?.src} alt={logo?.alt} />
-    <LogoText>{logo?.text}</LogoText>
-  </Logo>
-  <NavigationMenu class="absolute left-1/2 -translate-x-1/2 @max-5xl:hidden">
-    <NavigationMenuList>
-      {
-        menus?.map((menu) => (
-          <NavigationMenuItem>
-            {menu.links && menu.links.length > 0 ? (
-              <>
-                <NavigationMenuTrigger
-                  class="inline-flex h-8 items-center bg-transparent px-3 py-0"
-                  href={menu.href}
-                >
-                  {menu.text}
-                </NavigationMenuTrigger>
-                <NavigationMenuContent>
-                  <NavigationMenuSub>
-                    {menu.links?.map((link) => (
-                      <NavigationMenuSubItem>
-                        <NavigationMenuSubLink href={link.href}>
-                          {link.text}
-                        </NavigationMenuSubLink>
-                      </NavigationMenuSubItem>
-                    ))}
-                  </NavigationMenuSub>
-                </NavigationMenuContent>
-              </>
-            ) : (
-              <NavigationMenuLink
-                class="inline-flex h-8 items-center bg-transparent px-3 py-0"
-                variant="trigger"
-                href={menu.href}
-              >
-                {menu.text}
-              </NavigationMenuLink>
-            )}
-          </NavigationMenuItem>
-        ))
-      }
-    </NavigationMenuList>
-  </NavigationMenu>
-  <HeaderActions class="@max-5xl:hidden">
-    <ThemeToggle />
-    {
-      socials?.map((social) => (
-        <Button variant="ghost" size="icon-sm" href={social} target="_blank">
-          <Icon href={social} />
-        </Button>
-      ))
-    }
-    {
-      links?.map(({ icon, text, ...link }, i) => (
-        <Button
-          variant={i === links.length - 1 ? "default" : "ghost"}
-          size="sm"
-          {...link}
-        >
-          {icon && <Icon name={icon} />}
-          {text}
-        </Button>
-      ))
-    }
-  </HeaderActions>
-  <Sheet>
-    <SheetTrigger
-      class="@5xl:hidden"
-      variant="ghost"
-      size="icon"
-      name="open-menu-button"
+<Header variant="floating" class={cn("", className)}>
+  <HeaderContainer class="justify-between">
+    <HeaderGroup>
+      <Logo href={logo.href}>
+        <LogoImage
+          src={logo.src}
+          srcLight={logo.srcLight}
+          srcDark={logo.srcDark}
+          alt={logo.alt}
+        />
+        {logo.label && <LogoText>{logo.label}</LogoText>}
+      </Logo>
+    </HeaderGroup>
+    <NavigationMenu
+      class="absolute left-1/2 hidden max-w-none -translate-x-1/2 lg:flex"
     >
-      <MenuIcon class="size-5" />
-    </SheetTrigger>
-    <SheetContent class="overflow-y-auto px-4 py-12">
-      <SidebarMenu>
+      <NavigationMenuList>
         {
-          menus?.map((menu) => (
-            <SidebarMenuItem>
-              {menu.links && menu.links.length > 0 ? (
-                <Collapsible>
-                  <CollapsibleTrigger>
-                    <SidebarMenuButton>{menu.text}</SidebarMenuButton>
-                  </CollapsibleTrigger>
-                  <CollapsibleContent>
-                    <SidebarMenuSub>
-                      {menu.links?.map((link) => (
-                        <SidebarMenuSubItem>
-                          <SidebarMenuSubButton href={link.href}>
-                            {link.text}
-                          </SidebarMenuSubButton>
-                        </SidebarMenuSubItem>
-                      ))}
-                    </SidebarMenuSub>
-                  </CollapsibleContent>
-                </Collapsible>
-              ) : (
-                <SidebarMenuButton
-                  class="h-10 w-full rounded-md px-4 text-xl has-[>svg]:px-4"
-                  href={menu.href}
-                >
-                  {menu.text}
-                </SidebarMenuButton>
-              )}
-            </SidebarMenuItem>
-          ))
-        }
-      </SidebarMenu>
-      <HeaderActions>
-        {
-          links?.map(({ icon, text, ...link }, i) => (
-            <Button
-              variant={i === links.length - 1 ? "default" : "ghost"}
-              {...link}
-            >
-              {icon && <Icon name={icon} />}
-              {text}
-            </Button>
-          ))
-        }
-      </HeaderActions>
-      <HeaderActions>
-        {
-          socials?.map((social) => (
-            <Button variant="ghost" size="icon" href={social}>
-              <Icon href={social} />
-            </Button>
+          navigation.map((item, index) => (
+            <NavigationMenuItem value={`nav-${index}`}>
+              <NavigationMenuLink href={item.href}>
+                {item.label}
+              </NavigationMenuLink>
+            </NavigationMenuItem>
           ))
         }
-      </HeaderActions>
-    </SheetContent>
-  </Sheet>
+      </NavigationMenuList>
+    </NavigationMenu>
+    <HeaderGroup class="ml-auto hidden justify-end lg:flex">
+      <slot />
+      {
+        buttons.map(({ label, icon, ...button }) => (
+          <Button
+            as="a"
+            size={icon && !label ? "icon-sm" : "sm"}
+            aria-label={label}
+            target={button.href.startsWith("http") ? "_blank" : undefined}
+            rel={button.href.startsWith("http") ? "noreferrer" : undefined}
+            {...button}
+          >
+            {icon && <Icon name={icon} />}
+            {label}
+          </Button>
+        ))
+      }
+    </HeaderGroup>
+    <Sheet class="lg:hidden">
+      <SheetTrigger
+        variant="ghost"
+        size="icon-sm"
+        class="ml-auto"
+        aria-label="Open menu"
+      >
+        <Icon name="menu" />
+      </SheetTrigger>
+      <SheetContent side="right" class="p-0">
+        <SheetHeader class="sr-only">
+          <SheetTitle>Menu</SheetTitle>
+          <SheetDescription>Site navigation and actions.</SheetDescription>
+        </SheetHeader>
+        <div class="flex h-full flex-col gap-6 px-4 py-12">
+          <nav aria-label="Main navigation" class="flex flex-col gap-1">
+            {
+              navigation.map((item) => (
+                <SheetClose variant="ghost" class="justify-start">
+                  {item.label}
+                </SheetClose>
+              ))
+            }
+          </nav>
+          <div class="mt-auto flex flex-col gap-2">
+            <slot />
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  </HeaderContainer>
 </Header>