Link Group
A group of related links with optional title for navigation or footer sections.
---import LinkGroup from '@bejamas/ui/components/LinkGroup.astro';---
<LinkGroup> <LinkGroup part="title">Company</LinkGroup> <LinkGroup part="list"> <LinkGroup part="item"> <a href="/">Home</a> </LinkGroup> <LinkGroup part="item"> <a href="/about">About</a> </LinkGroup> </LinkGroup></LinkGroup>Installation
Section titled “Installation” bunx bejamas add link-group npx bejamas add link-group pnpm dlx bejamas add link-group yarn dlx bejamas add link-group---/** * @component LinkGroup * @title Link Group * @description A group of related links with optional title for navigation or footer sections. * @status stable * * Parts: * - root (default): wrapper container * - title: section title * - list: list wrapper * - item: list item wrapper * * @preview * * <LinkGroup> * <LinkGroup part="title">Company</LinkGroup> * <LinkGroup part="list"> * <LinkGroup part="item"> * <a href="/">Home</a> * </LinkGroup> * <LinkGroup part="item"> * <a href="/about">About</a> * </LinkGroup> * </LinkGroup> * </LinkGroup> * * @usage * * Use parts to compose the group: * * ```astro * --- * import LinkGroup from '@/components/ui/LinkGroup.astro'; * --- * <LinkGroup> * <LinkGroup part="title">Company</LinkGroup> * <LinkGroup part="list"> * <LinkGroup part="item"> * <a href="/">Home</a> * </LinkGroup> * </LinkGroup> * </LinkGroup> * ``` */
import type { HTMLAttributes, HTMLTag } from "astro/types";import { cn } from "@bejamas/ui/lib/utils";
type LinkGroupPart = "root" | "title" | "list" | "item";
type LinkGroupRootProps = { part?: "root"; as?: HTMLTag; class?: string;} & HTMLAttributes<"div">;
type LinkGroupTitleProps = { part: "title"; as?: HTMLTag; class?: string;} & HTMLAttributes<"h4">;
type LinkGroupListProps = { part: "list"; as?: HTMLTag; class?: string;} & HTMLAttributes<"ul">;
type LinkGroupItemProps = { part: "item"; as?: HTMLTag; class?: string;} & HTMLAttributes<"li">;
type Props = | LinkGroupRootProps | LinkGroupTitleProps | LinkGroupListProps | LinkGroupItemProps;
const { part: rawPart, as: Tag = "div" as HTMLTag, class: className = "", ...rest} = Astro.props as Props;
const part = (rawPart ?? "root") as LinkGroupPart;---
{ part === "root" && ( <Tag {...rest} data-slot="link-group" class={cn("flex flex-col gap-2", className)} > <slot name="title" /> <slot name="list" /> <slot /> </Tag> )}
{ part === "title" && ( <Tag {...rest} data-slot="link-group-title" class={cn("text-lg mb-2 text-current", className)} > <slot /> </Tag> )}
{ part === "list" && ( <Tag {...rest} data-slot="link-group-list" class={cn("flex flex-col gap-1", className)} > <slot /> </Tag> )}
{ part === "item" && ( <Tag {...rest} data-slot="link-group-item" class={cn( "[&_a]:transition-colors [&_a]:underline-offset-4 [&_a:hover]:underline [&_a]:text-footer-primary/60 [&_a]:text-muted-foreground", className, )} > <slot /> </Tag> )}Use parts to compose the group:
---import LinkGroup from '@/components/ui/LinkGroup.astro';---<LinkGroup> <LinkGroup part="title">Company</LinkGroup> <LinkGroup part="list"> <LinkGroup part="item"> <a href="/">Home</a> </LinkGroup> </LinkGroup></LinkGroup>