Theme Editor

⌘E

Background

L 0.5

C 0.2

H 250

Foreground

L 0.5

C 0.2

H 250

Primary

L 0.5

C 0.2

H 250

Primary FG

L 0.5

C 0.2

H 250

Secondary

L 0.5

C 0.2

H 250

Secondary FG

L 0.5

C 0.2

H 250

Accent

L 0.5

C 0.2

H 250

Accent FG

L 0.5

C 0.2

H 250

Card

L 0.5

C 0.2

H 250

Card FG

L 0.5

C 0.2

H 250

Popover

L 0.5

C 0.2

H 250

Popover FG

L 0.5

C 0.2

H 250

Muted

L 0.5

C 0.2

H 250

Muted FG

L 0.5

C 0.2

H 250

Border

L 0.5

C 0.2

H 250

Input

L 0.5

C 0.2

H 250

Ring

L 0.5

C 0.2

H 250

Destructive

L 0.5

C 0.2

H 250

Destructive FG

L 0.5

C 0.2

H 250

Chart 1

L 0.5

C 0.2

H 250

Chart 2

L 0.5

C 0.2

H 250

Chart 3

L 0.5

C 0.2

H 250

Chart 4

L 0.5

C 0.2

H 250

Chart 5

L 0.5

C 0.2

H 250

Theme Editor

⌘E

Background

L 0.5

C 0.2

H 250

Foreground

L 0.5

C 0.2

H 250

Primary

L 0.5

C 0.2

H 250

Primary FG

L 0.5

C 0.2

H 250

Secondary

L 0.5

C 0.2

H 250

Secondary FG

L 0.5

C 0.2

H 250

Accent

L 0.5

C 0.2

H 250

Accent FG

L 0.5

C 0.2

H 250

Card

L 0.5

C 0.2

H 250

Card FG

L 0.5

C 0.2

H 250

Popover

L 0.5

C 0.2

H 250

Popover FG

L 0.5

C 0.2

H 250

Muted

L 0.5

C 0.2

H 250

Muted FG

L 0.5

C 0.2

H 250

Border

L 0.5

C 0.2

H 250

Input

L 0.5

C 0.2

H 250

Ring

L 0.5

C 0.2

H 250

Destructive

L 0.5

C 0.2

H 250

Destructive FG

L 0.5

C 0.2

H 250

Chart 1

L 0.5

C 0.2

H 250

Chart 2

L 0.5

C 0.2

H 250

Chart 3

L 0.5

C 0.2

H 250

Chart 4

L 0.5

C 0.2

H 250

Chart 5

L 0.5

C 0.2

H 250

Link Group

Figma

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

Preview
Source

Company

---
import { LinkGroup, LinkGroupItem, LinkGroupList, LinkGroupTitle } from '@bejamas/ui/components/link-group';
---

<LinkGroup>
  <LinkGroupTitle>Company</LinkGroupTitle>
  <LinkGroupList>
    <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
    <LinkGroupItem><a href="/about">About</a></LinkGroupItem>
  </LinkGroupList>
</LinkGroup>

 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.
 * @figmaUrl https://www.figma.com/design/koxai7zw5vIuBzuVxe5T2l/bejamas-ui?node-id=2166-6001&t=YFStJ3V8fXEO8QD8-4
 *
 * @preview
 *
 * <LinkGroup>
 *   <LinkGroupTitle>Company</LinkGroupTitle>
 *   <LinkGroupList>
 *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
 *     <LinkGroupItem><a href="/about">About</a></LinkGroupItem>
 *   </LinkGroupList>
 * </LinkGroup>
 *
 * @usage
 *
 * ```astro
 * ---
 * import { LinkGroup, LinkGroupTitle, LinkGroupList, LinkGroupItem } from '@bejamas/ui/components/link-group';
 * ---
 *
 * <LinkGroup>
 *   <LinkGroupTitle>Company</LinkGroupTitle>
 *   <LinkGroupList>
 *     <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
 *   </LinkGroupList>
 * </LinkGroup>
 * ```
 */

import type { HTMLAttributes, HTMLTag } from "astro/types";
import { cn } from "@bejamas/ui/lib/utils";

type Props = {
  as?: HTMLTag;
  class?: string;
} & HTMLAttributes<"div">;

const {
  as: Tag = "div",
  class: className = "",
  ...rest
} = Astro.props as Props;
---

<Tag
  {...rest}
  data-slot="link-group"
  class={cn("flex flex-col gap-2", className)}
>
  <slot />
</Tag>

Usage

---
import { LinkGroup, LinkGroupTitle, LinkGroupList, LinkGroupItem } from '@bejamas/ui/components/link-group';
---

<LinkGroup>
  <LinkGroupTitle>Company</LinkGroupTitle>
  <LinkGroupList>
    <LinkGroupItem><a href="/">Home</a></LinkGroupItem>
  </LinkGroupList>
</LinkGroup>