Link Group

A group of related links with optional title for navigation or footer sections.

Preview
Source

Company

---
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

CLI
Manual

 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>
  )
}

Usage

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>