fulldev-ui 0.7.0 → 0.9.0

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

@@ -1,213 +1,133 @@
 ---
-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 { Separator } from "@/components/ui/separator"
 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 githubStarCount = (
-  await (await fetch("https://api.github.com/repos/fulldotdev/ui")).json()
-).stargazers_count
+const { class: className, logo, navigation, buttons } = Astro.props
 ---
 
-<Header class="bg-background/60 backdrop-blur-md">
-  <Logo href={logo?.href || "/"}>
-    <LogoImage src={logo?.src} alt={logo?.alt} />
-    <LogoText>{logo?.text}</LogoText>
-  </Logo>
-  <NavigationMenu class="mr-auto @max-5xl:hidden">
-    <NavigationMenuList>
+<Header class={cn("border-b", 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>
+    <HeaderGroup class="ml-auto hidden justify-end gap-1 lg:flex">
+      <NavigationMenu class="hidden max-w-none justify-end lg:flex">
+        <NavigationMenuList>
+          {
+            navigation.map((item, index) => (
+              <NavigationMenuItem value={`nav-${index}`}>
+                <NavigationMenuLink href={item.href}>
+                  {item.label}
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            ))
+          }
+        </NavigationMenuList>
+      </NavigationMenu>
+      <Separator
+        orientation="vertical"
+        class="mx-1 hidden h-5 self-center lg:block"
+      />
+      <slot />
       {
-        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>
+        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>
         ))
       }
-    </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" : "outline"}
-          size="sm"
-          {...link}
-        >
-          {icon && <Icon name={icon} />}
-          {text}
-        </Button>
-      ))
-    }
-    <Button
-      variant="outline"
-      size="sm"
-      href="https://github.com/fulldotdev/ui"
-      target="_blank"
-    >
-      <Icon name="github" />
-      {githubStarCount}
-    </Button>
-  </HeaderActions>
-  <Sheet class="first:ml-auto @5xl:hidden">
-    <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>
-        {
-          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>
-          ))
-        }
-      </HeaderActions>
-    </SheetContent>
-  </Sheet>
+    </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>
+          <Separator />
+          <div class="mt-auto flex flex-col gap-2">
+            <slot />
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  </HeaderContainer>
 </Header>

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

@@ -0,0 +1,219 @@
+---
+import type { ImageMetadata } from "astro"
+import { Image } from "astro:assets"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+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,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu"
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet"
+
+type Props = {
+  class?: string
+  logo: {
+    label: string
+    href: string
+    src?: any
+    srcLight?: any
+    srcDark?: any
+    alt?: string
+  }
+  navigation: {
+    label: string
+    href: string
+    description?: string
+    active?: boolean
+    image?: {
+      src: ImageMetadata
+      alt: string
+    }
+    links?: {
+      label: string
+      href: string
+      description?: string
+      icon?: string
+      active?: boolean
+    }[]
+  }[]
+  buttons: {
+    label: string
+    href: string
+    icon?: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
+}
+
+const { class: className, logo, navigation, buttons } = Astro.props
+---
+
+<Header class={cn("border-b", 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"
+      align="center"
+    >
+      <NavigationMenuList>
+        {
+          navigation.map((item, index) =>
+            item.links?.length ? (
+              <NavigationMenuItem value={`nav-${index}`}>
+                <NavigationMenuTrigger>{item.label}</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <div class="grid w-[min(46rem,calc(100vw-2rem))] gap-2 p-1 lg:grid-cols-[1fr_1.1fr]">
+                    <NavigationMenuLink
+                      href={item.href}
+                      active={item.active}
+                      class="bg-muted/50 hover:bg-muted focus:bg-muted flex min-h-40 flex-col items-start justify-end gap-3 p-4 text-left"
+                    >
+                      {item.image && (
+                        <Image
+                          src={item.image.src}
+                          alt={item.image.alt}
+                          class="mb-auto aspect-[16/9] w-full rounded-md object-cover"
+                          widths={[320, 480, 640]}
+                          sizes="(min-width: 1024px) 22rem, 100vw"
+                        />
+                      )}
+                      <span class="text-base font-medium">{item.label}</span>
+                      {item.description && (
+                        <span class="text-muted-foreground text-sm leading-relaxed">
+                          {item.description}
+                        </span>
+                      )}
+                    </NavigationMenuLink>
+                    <div class="grid gap-1">
+                      {item.links.map((link) => (
+                        <NavigationMenuLink
+                          href={link.href}
+                          active={link.active}
+                          class="items-start gap-3 p-3"
+                        >
+                          {link.icon && (
+                            <Icon
+                              name={link.icon}
+                              class="text-muted-foreground mt-0.5"
+                            />
+                          )}
+                          <span class="grid gap-1">
+                            <span class="font-medium">{link.label}</span>
+                            {link.description && (
+                              <span class="text-muted-foreground text-sm leading-relaxed">
+                                {link.description}
+                              </span>
+                            )}
+                          </span>
+                        </NavigationMenuLink>
+                      ))}
+                    </div>
+                  </div>
+                </NavigationMenuContent>
+              </NavigationMenuItem>
+            ) : (
+              <NavigationMenuItem value={`nav-${index}`}>
+                <NavigationMenuLink
+                  href={item.href}
+                  active={item.active}
+                  class={navigationMenuTriggerStyle()}
+                >
+                  {item.label}
+                </NavigationMenuLink>
+              </NavigationMenuItem>
+            )
+          )
+        }
+      </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 overflow-y-auto px-4 py-12">
+          <nav aria-label="Main navigation" class="flex flex-col gap-4">
+            {
+              navigation.map((item) => (
+                <div class="grid gap-1">
+                  <SheetClose variant="ghost" class="justify-start font-medium">
+                    {item.label}
+                  </SheetClose>
+                  {item.links?.length && (
+                    <div class="border-border ml-3 grid gap-1 border-l pl-3">
+                      {item.links.map((link) => (
+                        <SheetClose
+                          variant="ghost"
+                          class="text-muted-foreground justify-start"
+                        >
+                          {link.icon && <Icon name={link.icon} />}
+                          {link.label}
+                        </SheetClose>
+                      ))}
+                    </div>
+                  )}
+                </div>
+              ))
+            }
+          </nav>
+          <div class="mt-auto flex flex-col gap-2">
+            <slot />
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  </HeaderContainer>
+</Header>