sh-ui-cli 0.25.0 → 0.32.0

package/data/registry/react/components/header/styles.css

@@ -8,6 +8,49 @@
   padding: 0 var(--space-3);
   background: var(--background);
   border-bottom: 1px solid var(--border);
+  transition: transform var(--duration-base) var(--ease-standard),
+    background-color var(--duration-base) var(--ease-standard);
+  /* hover/active 배경 — transparent/blur variant 가 currentColor 기반으로 재정의 */
+  --sh-ui-header-hover-bg: var(--background-muted);
+  /* blur variant 튜닝용 — instance 별 style 로 override 가능 */
+  --sh-ui-header-blur-opacity: 85%;
+  --sh-ui-header-blur-radius: 16px;
+}
+
+/* prefers-reduced-motion — stickyHide 슬라이드 애니메이션을 즉시 toggle 로 대체.
+   variant 전환의 background 트랜지션도 비활성화. */
+@media (prefers-reduced-motion: reduce) {
+  .sh-ui-header {
+    transition: none;
+  }
+}
+
+/* variant */
+.sh-ui-header--solid {
+  background: var(--background);
+}
+.sh-ui-header--transparent {
+  background: transparent;
+  border-bottom-color: transparent;
+  /* 컬러풀 배경 위에서도 자연스러운 hover — 텍스트 색의 14% 오버레이 */
+  --sh-ui-header-hover-bg: color-mix(in srgb, currentColor 14%, transparent);
+}
+.sh-ui-header--blur {
+  background: color-mix(in srgb, var(--background) var(--sh-ui-header-blur-opacity), transparent);
+  backdrop-filter: saturate(180%) blur(var(--sh-ui-header-blur-radius));
+  -webkit-backdrop-filter: saturate(180%) blur(var(--sh-ui-header-blur-radius));
+  --sh-ui-header-hover-bg: color-mix(in srgb, currentColor 14%, transparent);
+}
+/* backdrop-filter 미지원 브라우저 폴백 — 더 불투명한 배경으로 가독성 확보 */
+@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+  .sh-ui-header--blur {
+    background: var(--background);
+  }
+}
+
+/* sticky-hide — sticky 컨텍스트는 사용자가 직접 (예: position:sticky; top:0) 적용. */
+.sh-ui-header[data-sticky-hide][data-hidden] {
+  transform: translateY(-100%);
 }
 
 /* ───── Brand ───── */
@@ -17,13 +60,11 @@
   gap: var(--space-2);
   flex-shrink: 0;
 }
-
 .sh-ui-header__logo {
   display: inline-flex;
   align-items: center;
   color: var(--foreground);
 }
-
 .sh-ui-header__title {
   font-size: var(--text-base);
   font-weight: var(--weight-bold);
@@ -47,7 +88,7 @@
   transition: background-color var(--duration-fast);
 }
 .sh-ui-header__trigger:hover {
-  background: var(--background-muted);
+  background: var(--sh-ui-header-hover-bg);
 }
 .sh-ui-header__trigger:focus-visible {
   outline: var(--border-width-strong) solid var(--foreground);
@@ -87,7 +128,7 @@
 }
 .sh-ui-header__item:hover {
   color: var(--foreground);
-  background: var(--background-muted);
+  background: var(--sh-ui-header-hover-bg);
 }
 .sh-ui-header__item[data-active] {
   color: var(--foreground);
@@ -107,6 +148,102 @@
   flex-shrink: 0;
 }
 
+/* ───── 반응형 가시성 유틸 (HeaderDesktopOnly / HeaderMobileOnly) ─────
+ * display: contents 로 wrapper 가 레이아웃에 잡히지 않게 함 — 부모(HeaderActions 등)의 flex 흐름 유지.
+ */
+.sh-ui-header__desktop-only {
+  display: contents;
+}
+.sh-ui-header__mobile-only {
+  display: none;
+}
+
+/* ───── NavGroup ─────
+ * inline 모드에서는 자식만 펼친 것처럼 평면 렌더(라벨 숨김).
+ * drawer 모드에서는 라벨 + 들여쓴 항목.
+ */
+.sh-ui-header__group--inline {
+  display: contents;
+}
+.sh-ui-header__group--drawer {
+  display: flex;
+  flex-direction: column;
+  margin-top: var(--space-3);
+}
+.sh-ui-header__group--drawer:first-child {
+  margin-top: 0;
+}
+.sh-ui-header__group-label {
+  display: flex;
+  align-items: center;
+  height: 2rem;
+  padding: 0 var(--space-2);
+  font-size: var(--text-xs);
+  font-weight: var(--weight-medium);
+  color: var(--foreground-muted);
+}
+.sh-ui-header__group-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+/* ───── Menu (서브메뉴) — inline 모드 = dropdown ───── */
+.sh-ui-header__menu {
+  position: relative;
+}
+.sh-ui-header__menu--inline {
+  display: inline-block;
+}
+.sh-ui-header__menu-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-1);
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+  font-weight: var(--weight-medium);
+  color: var(--foreground-muted);
+  background: transparent;
+  border: 0;
+  border-radius: calc(var(--radius) - 2px);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color var(--duration-fast), background-color var(--duration-fast);
+}
+.sh-ui-header__menu-trigger:hover,
+.sh-ui-header__menu-trigger[data-open] {
+  color: var(--foreground);
+  background: var(--sh-ui-header-hover-bg);
+}
+.sh-ui-header__menu-trigger:focus-visible {
+  outline: var(--border-width-strong) solid var(--foreground);
+  outline-offset: 2px;
+}
+.sh-ui-header__chevron {
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.sh-ui-header__menu-trigger[data-open] .sh-ui-header__chevron {
+  transform: rotate(180deg);
+}
+
+/* inline 모드 dropdown 은 portal 로 document.body 에 렌더된다 — 부모 overflow 영향 받지 않음. */
+.sh-ui-header__menu-content--portal {
+  z-index: var(--z-dropdown, 50);
+  padding: var(--space-1);
+  background: var(--background);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.18);
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  color: var(--foreground);
+}
+.sh-ui-header__menu-content--portal .sh-ui-header__item {
+  padding: var(--space-2) var(--space-3);
+  font-size: var(--text-sm);
+}
+
 /* ───── Drawer (backdrop + panel) — 기본 숨김 ───── */
 .sh-ui-header__backdrop,
 .sh-ui-header__drawer {
@@ -115,19 +252,23 @@
 
 /* ───── Mobile (< breakpoint.md) ───── */
 @media (max-width: 767px) {
-  /* 햄버거 노출 & 좌측 배치 */
   .sh-ui-header__trigger {
     display: inline-flex;
     order: -1;
   }
-  /* inline nav 숨김 */
   .sh-ui-header__nav {
     display: none;
   }
-  /* 모바일에서 gap 조정 */
   .sh-ui-header {
     gap: var(--space-2);
   }
+  /* 가시성 유틸 토글 */
+  .sh-ui-header__desktop-only {
+    display: none;
+  }
+  .sh-ui-header__mobile-only {
+    display: contents;
+  }
 
   /* backdrop */
   .sh-ui-header__backdrop {
@@ -148,7 +289,7 @@
 
   /* drawer panel */
   .sh-ui-header__drawer {
-    display: block;
+    display: flex;
     position: fixed;
     left: 0;
     top: 0;
@@ -159,7 +300,6 @@
     z-index: var(--z-modal);
     transform: translateX(-100%);
     transition: transform var(--duration-base) var(--ease-standard);
-    display: flex;
     flex-direction: column;
     overflow-y: auto;
   }
@@ -187,4 +327,24 @@
     font-size: var(--text-sm);
     border-radius: calc(var(--radius) - 2px);
   }
+
+  /* Menu in drawer = collapsible */
+  .sh-ui-header__menu--drawer {
+    display: flex;
+    flex-direction: column;
+  }
+  .sh-ui-header__menu--drawer > .sh-ui-header__menu-trigger {
+    justify-content: space-between;
+    width: 100%;
+    padding: var(--space-3) var(--space-3);
+  }
+  .sh-ui-header__menu--drawer > .sh-ui-header__menu-content {
+    display: flex;
+    flex-direction: column;
+    padding: var(--space-1) 0 var(--space-1) var(--space-4);
+    gap: 1px;
+  }
+  .sh-ui-header__menu--drawer > .sh-ui-header__menu-content[hidden] {
+    display: none;
+  }
 }

package/data/registry/react/components/markdown-editor/index.tsx

@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { CodeEditor } from "../code-editor";
+import "./styles.css";
+
+export interface MarkdownEditorProps {
+  /**
+   * Controlled — 현재 마크다운. 명시 시 외부 상태가 진실원천.
+   * 미지정이면 uncontrolled — 컴포넌트가 자체 내부 상태로 동작.
+   */
+  value?: string;
+  /**
+   * Uncontrolled 초기값. value 미지정 시에만 사용된다.
+   * @default ""
+   */
+  defaultValue?: string;
+  /** 마크다운이 바뀔 때마다 호출 (controlled · uncontrolled 모두). */
+  onChange?: (value: string) => void;
+  /** 비어 있을 때 표시할 placeholder. */
+  placeholder?: string;
+  /** 읽기 전용. 키 입력 차단, 미리보기는 그대로 렌더. */
+  readOnly?: boolean;
+  /**
+   * 미리보기 패널 표시 여부.
+   * @default true
+   */
+  preview?: boolean;
+  /**
+   * 미리보기 위치. 좁은 화면(<768px)에서는 항상 아래로 쌓임.
+   * @default "right"
+   */
+  previewPosition?: "right" | "bottom";
+  /** 에디터·미리보기 영역의 최소 높이 (CSS 길이 단위). */
+  minHeight?: string;
+  /** 에디터·미리보기 영역의 최대 높이. 초과 시 내부 스크롤. */
+  maxHeight?: string;
+  className?: string;
+  /** 에디터 영역에 부여할 aria-label. */
+  "aria-label"?: string;
+}
+
+function cx(...args: (string | undefined | false | null)[]) {
+  return args.filter(Boolean).join(" ");
+}
+
+/**
+ * 마크다운 에디터 — CodeEditor(소스) + react-markdown(라이브 프리뷰)의 합성.
+ *
+ * Controlled (value/onChange) · Uncontrolled (defaultValue) 모두 지원. 미리보기 패널이
+ * 현재 마크다운을 필요로 하므로 uncontrolled 모드에서도 내부 상태로 트래킹.
+ *
+ * 미리보기는 GFM(테이블·체크박스·strikethrough)을 지원하고, raw HTML은 기본적으로
+ * 차단(react-markdown 기본 동작)되어 사용자 입력으로부터의 XSS가 자동 방어된다.
+ */
+export function MarkdownEditor({
+  value: valueProp,
+  defaultValue,
+  onChange,
+  placeholder,
+  readOnly,
+  preview = true,
+  previewPosition = "right",
+  minHeight,
+  maxHeight,
+  className,
+  "aria-label": ariaLabel = "Markdown editor",
+}: MarkdownEditorProps) {
+  const isControlled = valueProp !== undefined;
+  const [internalValue, setInternalValue] = useState(valueProp ?? defaultValue ?? "");
+  const value = isControlled ? valueProp : internalValue;
+
+  const handleChange = (next: string) => {
+    if (!isControlled) setInternalValue(next);
+    onChange?.(next);
+  };
+
+  return (
+    <div
+      className={cx(
+        "sh-ui-md-editor",
+        preview && `sh-ui-md-editor--${previewPosition}`,
+        !preview && "sh-ui-md-editor--no-preview",
+        className,
+      )}
+      data-readonly={readOnly || undefined}
+    >
+      <div className="sh-ui-md-editor__source">
+        <CodeEditor
+          value={value}
+          onChange={handleChange}
+          language="markdown"
+          placeholder={placeholder}
+          readOnly={readOnly}
+          minHeight={minHeight}
+          maxHeight={maxHeight}
+          aria-label={ariaLabel}
+        />
+      </div>
+      {preview && (
+        <div
+          className="sh-ui-md-editor__preview"
+          role="region"
+          aria-label="Preview"
+          style={
+            {
+              "--sh-ui-md-editor-min-height": minHeight,
+              "--sh-ui-md-editor-max-height": maxHeight,
+            } as React.CSSProperties
+          }
+        >
+          <div className="sh-ui-md-editor__preview-inner">
+            <ReactMarkdown remarkPlugins={[remarkGfm]}>{value}</ReactMarkdown>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/data/registry/react/components/markdown-editor/styles.css

@@ -0,0 +1,160 @@
+.sh-ui-md-editor {
+  display: grid;
+  gap: var(--space-3);
+}
+.sh-ui-md-editor--right {
+  grid-template-columns: 1fr 1fr;
+}
+.sh-ui-md-editor--bottom,
+.sh-ui-md-editor--no-preview {
+  grid-template-columns: 1fr;
+}
+
+@media (max-width: 768px) {
+  .sh-ui-md-editor--right {
+    grid-template-columns: 1fr;
+  }
+}
+
+.sh-ui-md-editor__source {
+  min-width: 0;
+}
+
+.sh-ui-md-editor__preview {
+  min-width: 0;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background);
+  overflow: hidden;
+}
+
+.sh-ui-md-editor__preview-inner {
+  padding: var(--space-3) var(--space-4);
+  min-height: var(--sh-ui-md-editor-min-height, 7.5rem);
+  max-height: var(--sh-ui-md-editor-max-height, 25rem);
+  overflow-y: auto;
+  font-size: 0.875rem;
+  line-height: 1.65;
+  color: var(--foreground);
+}
+
+/* 마크다운 본문 타이포그래피 — 토큰 기반, 페이지 기본 스타일과 충돌 없도록 자기 스코프 안에서만 */
+.sh-ui-md-editor__preview-inner > :first-child {
+  margin-top: 0;
+}
+.sh-ui-md-editor__preview-inner > :last-child {
+  margin-bottom: 0;
+}
+.sh-ui-md-editor__preview-inner h1,
+.sh-ui-md-editor__preview-inner h2,
+.sh-ui-md-editor__preview-inner h3,
+.sh-ui-md-editor__preview-inner h4,
+.sh-ui-md-editor__preview-inner h5,
+.sh-ui-md-editor__preview-inner h6 {
+  margin-top: var(--space-4);
+  margin-bottom: var(--space-2);
+  font-weight: 600;
+  line-height: 1.3;
+  color: var(--foreground);
+}
+.sh-ui-md-editor__preview-inner h1 { font-size: 1.5rem; }
+.sh-ui-md-editor__preview-inner h2 { font-size: 1.25rem; }
+.sh-ui-md-editor__preview-inner h3 { font-size: 1.125rem; }
+.sh-ui-md-editor__preview-inner h4,
+.sh-ui-md-editor__preview-inner h5,
+.sh-ui-md-editor__preview-inner h6 { font-size: 1rem; }
+
+.sh-ui-md-editor__preview-inner p,
+.sh-ui-md-editor__preview-inner ul,
+.sh-ui-md-editor__preview-inner ol,
+.sh-ui-md-editor__preview-inner blockquote,
+.sh-ui-md-editor__preview-inner pre,
+.sh-ui-md-editor__preview-inner table {
+  margin-top: 0;
+  margin-bottom: var(--space-3);
+}
+
+.sh-ui-md-editor__preview-inner ul,
+.sh-ui-md-editor__preview-inner ol {
+  padding-left: var(--space-5);
+}
+.sh-ui-md-editor__preview-inner li {
+  margin-bottom: var(--space-1);
+}
+.sh-ui-md-editor__preview-inner li > input[type="checkbox"] {
+  margin-right: var(--space-2);
+}
+
+.sh-ui-md-editor__preview-inner a {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.sh-ui-md-editor__preview-inner a:hover {
+  text-decoration-thickness: 2px;
+}
+
+.sh-ui-md-editor__preview-inner blockquote {
+  padding: var(--space-2) var(--space-3);
+  border-left: 3px solid var(--border-strong);
+  background: var(--background-subtle);
+  color: var(--foreground-muted);
+  border-radius: 0 calc(var(--radius) - 2px) calc(var(--radius) - 2px) 0;
+}
+.sh-ui-md-editor__preview-inner blockquote > :last-child {
+  margin-bottom: 0;
+}
+
+.sh-ui-md-editor__preview-inner code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.875em;
+  padding: 0.125rem 0.375rem;
+  border-radius: calc(var(--radius) - 4px);
+  background: var(--background-muted);
+  color: var(--foreground);
+}
+.sh-ui-md-editor__preview-inner pre {
+  padding: var(--space-3);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background-subtle);
+  overflow-x: auto;
+  font-size: 0.8125rem;
+  line-height: 1.6;
+}
+.sh-ui-md-editor__preview-inner pre > code {
+  padding: 0;
+  background: transparent;
+  font-size: inherit;
+}
+
+.sh-ui-md-editor__preview-inner hr {
+  border: 0;
+  border-top: 1px solid var(--border);
+  margin: var(--space-4) 0;
+}
+
+.sh-ui-md-editor__preview-inner table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.875rem;
+}
+.sh-ui-md-editor__preview-inner th,
+.sh-ui-md-editor__preview-inner td {
+  padding: var(--space-2) var(--space-3);
+  border: 1px solid var(--border);
+  text-align: left;
+}
+.sh-ui-md-editor__preview-inner thead {
+  background: var(--background-subtle);
+}
+
+.sh-ui-md-editor__preview-inner img {
+  max-width: 100%;
+  height: auto;
+  border-radius: calc(var(--radius) - 2px);
+}
+
+.sh-ui-md-editor__preview-inner del {
+  color: var(--foreground-muted);
+}

package/data/registry/react/components/page-toc/index.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import * as React from "react";
+import "./styles.css";
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
+
+export interface PageTOCProps {
+  /**
+   * 스캔할 컨테이너 selector. 기본 `"main"`.
+   */
+  containerSelector?: string;
+  /**
+   * 외부 신호로 TOC 재스캔. Next.js 사용 시 `usePathname()` 결과를 그대로 전달하면
+   * 라우트 변경 때마다 자동 갱신. 같은 페이지 안에서 헤딩이 동적으로 바뀌면 이 값을 갱신.
+   */
+  routeKey?: string;
+  /**
+   * sticky 헤더 아래로 헤딩이 가려지지 않도록 띄울 거리(rem). `scroll-margin-top` 으로 적용.
+   * @default 5
+   */
+  headerOffsetRem?: number;
+  /**
+   * 라벨 텍스트.
+   * @default "On this page"
+   */
+  label?: React.ReactNode;
+  /**
+   * 수집할 헤딩 레벨.
+   * @default ["h2", "h3"]
+   */
+  levels?: HeadingLevel[];
+  /**
+   * 제외할 헤딩 selector. 컨테이너 안에서 이 selector 의 자손인 헤딩은 무시.
+   * 데모 미리보기·중첩 위젯 등을 TOC 에서 빼고 싶을 때 사용.
+   */
+  excludeSelector?: string;
+  /** 추가 클래스. */
+  className?: string;
+}
+
+const slugify = (text: string): string =>
+  text
+    .trim()
+    .toLowerCase()
+    .replace(/[^\w\s가-힣-]/g, "")
+    .replace(/\s+/g, "-");
+
+interface TocItem {
+  id: string;
+  text: string;
+  level: HeadingLevel;
+}
+
+const cx = (...args: (string | undefined | false | null)[]) =>
+  args.filter(Boolean).join(" ");
+
+/**
+ * 페이지 내 자동 목차 (On this page).
+ *
+ * 컨테이너 안의 지정한 헤딩 레벨을 스캔해 자동 slugify · id 부여 · `IntersectionObserver` 로
+ * 현재 보이는 섹션을 active 표시 · 클릭 시 smooth scroll. 라우터 비종속 — `routeKey` 를
+ * 외부에서 갱신하면 재스캔된다.
+ */
+export function PageTOC({
+  containerSelector = "main",
+  routeKey,
+  headerOffsetRem = 5,
+  label = "On this page",
+  levels = ["h2", "h3"],
+  excludeSelector,
+  className,
+}: PageTOCProps) {
+  const [items, setItems] = React.useState<TocItem[]>([]);
+  const [activeId, setActiveId] = React.useState<string | null>(null);
+
+  // levels 가 inline 배열(["h2", "h3"]) 로 전달되면 매 렌더마다 새 참조라 useEffect 가
+  // 무한 루프에 빠짐. 내용 기반 안정 키로 비교하고, 효과 안에서는 ref 로 최신 값 사용.
+  const levelsKey = levels.join(",");
+  const levelsRef = React.useRef(levels);
+  levelsRef.current = levels;
+
+  React.useEffect(() => {
+    const container = document.querySelector(containerSelector);
+    if (!container) {
+      setItems([]);
+      return;
+    }
+
+    const headingSelector = levelsRef.current.join(", ");
+    let headings = Array.from(
+      container.querySelectorAll<HTMLHeadingElement>(headingSelector),
+    );
+    if (excludeSelector) {
+      headings = headings.filter((h) => !h.closest(excludeSelector));
+    }
+
+    const usedIds = new Set<string>();
+    const collected: TocItem[] = headings.map((h) => {
+      const text = h.textContent?.trim() ?? "";
+      let id = h.id || slugify(text);
+      let suffix = 2;
+      const base = id;
+      while (!id || usedIds.has(id)) {
+        id = `${base}-${suffix++}`;
+      }
+      usedIds.add(id);
+      if (!h.id) h.id = id;
+      h.style.scrollMarginTop = `${headerOffsetRem}rem`;
+      const level = h.tagName.toLowerCase() as HeadingLevel;
+      return { id, text, level };
+    });
+
+    setItems(collected);
+
+    if (collected.length === 0) return;
+
+    const remInPx =
+      parseFloat(getComputedStyle(document.documentElement).fontSize) || 16;
+    const topOffsetPx = Math.round(headerOffsetRem * remInPx);
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top);
+        if (visible.length > 0) {
+          setActiveId(visible[0].target.id);
+        }
+      },
+      {
+        rootMargin: `-${topOffsetPx}px 0px -70% 0px`,
+        threshold: 0,
+      },
+    );
+
+    headings.forEach((h) => observer.observe(h));
+    return () => observer.disconnect();
+  }, [containerSelector, headerOffsetRem, levelsKey, excludeSelector, routeKey]);
+
+  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>, id: string) => {
+    event.preventDefault();
+    const el = document.getElementById(id);
+    if (!el) return;
+    el.scrollIntoView({ behavior: "smooth", block: "start" });
+    history.replaceState(null, "", `#${id}`);
+    setActiveId(id);
+  };
+
+  if (items.length === 0) return null;
+
+  return (
+    <nav
+      className={cx("sh-ui-page-toc", className)}
+      aria-label={typeof label === "string" ? label : "목차"}
+    >
+      <div className="sh-ui-page-toc__label">{label}</div>
+      <ul className="sh-ui-page-toc__list">
+        {items.map((item) => (
+          <li key={item.id} data-level={item.level.replace("h", "")}>
+            <a
+              href={`#${item.id}`}
+              onClick={(e) => handleClick(e, item.id)}
+              className="sh-ui-page-toc__link"
+              data-active={activeId === item.id ? "true" : undefined}
+              aria-current={activeId === item.id ? "true" : undefined}
+            >
+              {item.text}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  );
+}