S shadcn · 09

허브 사이트 목록

Hub directory

사이트를 아기 시기 순서로 묶어요. 시기마다 작은 순번과 큰 이름, 사이트는 카드·표·세로선 중 하나로 보여요.

쓰는 규칙시기마다 이름표가 있어서 홈 머리의 시기 링크를 누르면 그 자리로 바로 내려간다.

다른 이름: HubDirectory
···
usage (Astro)
---
// src/pages/index.astro
import { HubDirectory } from '../components/registry';
---
<HubDirectory stages={stageGroups} empty="첫 사이트를 준비하고 있어요. 곧 이곳에서 주제별 사이트를 고를 수 있어요." />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "HubDirectory": "stages" }
}
props (TypeScript)
export interface HubDirectoryProps {
  stages: HubStage[];
  /** 사이트가 하나도 없을 때 문장 */
  empty: string;
  variant?: VariantOf<'HubDirectory'>;
}

stages 는 왼쪽에 시기(순번·이름·설명), 오른쪽에 테두리 있는 사이트 카드가 두 열로 놓이고 시기 사이를 가는 선으로 나눠요. table 은 한 장의 표로 시기, 사이트, 이런 내용, 글 수 네 열이고 같은 시기 안의 사이트가 이어서 나와요. timeline 은 왼쪽에 회색 세로선과 작은 점이 시기마다 찍히고, 그 아래에 사이트 이름과 소개가 상자 없이 나와요.

사이트가 여럿이라 한눈에 훑게 하려면 table, 시기마다 눈에 띄게 나누려면 stages, 읽는 흐름을 강조하려면 timeline 이에요.

홈 머리의 시기 링크를 누르면 해당 시기 칸으로 바로 이동해요.

이럴 때 — 변형 3

  1. stages시기 칸 시기마다 사이트가 두 곳 넘게 있을 때 — 시기 | 사이트 상자.쓰는 사이트 4곳: babyfood, birthprep, milestone, newborn
  2. table표 한눈에 비교하는 게 가장 중요할 때 — 시기 | 사이트 | 이런 내용 | 글 수.쓰는 사이트 3곳: babyplay, babysick, toddlerfood
  3. timeline세로 단계 순서(임신 → 신생아 → 돌)가 가장 중요한 정보일 때.쓰는 사이트 4곳: babysleep, feeding, vaccination, 허브
페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.