S shadcn · 07

주제 목록

Topic index

「주제별로 보기」 제목 아래 카드 없이 글자와 가는 선만으로 주제를 나눠요.

쓰는 규칙대표 글은 여기에 다시 나오지 않는다 — 같은 글이 홈에 두 번 보이지 않게. 「찾기」 홈 머리와 「바로가기」 목록은 같은 링크라 함께 고르지 않는다.

다른 이름: TopicIndexNavigationMenu
···
usage (Astro)
---
// src/pages/index.astro
import { TopicIndex } from '../components/registry';
---
<TopicIndex heading="주제별로 보기" topics={await topics(featured)} />
site.json
// sites/<사이트>/site.json — 적지 않으면 사이트 이름으로 자동으로 고른다
{
  "variants": { "TopicIndex": "sections" }
}
props (TypeScript)
export interface TopicIndexProps {
  heading: string;
  topics: Topic[];
  variant?: VariantOf<'TopicIndex'>;
}

sections 는 주제마다 한 칸씩 네 칸이 나란히 서고, 칸마다 이름·설명·글 세 편(선으로 구분)·「모두 보기」 링크가 와요. index 는 이름과 글 수, 설명 한 줄만 둔 두 열 목록이라 가장 가벼워요. lead 는 주제마다 한 줄로, 왼쪽에 이름, 가운데에 첫 글을 큰 제목과 설명으로, 오른쪽에 나머지 두 편을 작게 놓고 주제 사이를 가는 선으로 나눠요.

주제 안의 글까지 홈에서 보여 주려면 sections 나 lead, 길 안내만 하려면 index 가 맞아요. 세 변형 모두 상자 테두리가 없어 흰 화면이 많이 비어 보여요.

index 는 마우스를 올릴 때만 옅은 바탕이 깔려요.

이럴 때 — 변형 3

  1. sections주제마다 글 3편 주제마다 글이 세 편 넘게 고르게 있을 때.쓰는 사이트 4곳: babyplay, babysleep, birthprep, newborn
  2. index바로가기 줄 주제가 많고, 글은 주제 페이지에서 보게 하고 싶을 때 — 이름·설명·글 수만.쓰는 사이트 4곳: babyfood, feeding, milestone, vaccination
  3. lead첫 글 크게 주제마다 대표 글이 뚜렷할 때 — 첫 글 크게, 두 편 작게.쓰는 사이트 3곳: babysick, toddlerfood, 허브
페이지로 열기 ↗

항목 추가 요청

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