Katalog Komponen Pratinjau

Rute /components adalah satu-satunya tempat di repository ini yang menampilkan seluruh variant dan ukuran komponen secara berdampingan. Berkas halamannya dibuka dengan 'use client', mengimpor Button, IconButton, TextButton, empat komponen link, NextImage, dan Skeleton, lalu mengekspor ComponentPage sebagai default: src/app/components/page.tsx:1-23¹. Halaman ini tidak menyimpan data; isinya hanya state lokal mode dan color ditambah penanda textColor untuk teks keterangan: src/app/components/page.tsx:27-35².

Dari beranda katalog dibuka lewat ButtonLink dengan variant='light' dan href='/components': src/app/page.tsx:41-43³. Pembungkus halaman adalah section yang kelasnya dipilih dari mode (bg-dark atau bg-white) ditambah nama warna terpilih, dengan div berkelas layout min-h-screen py-20 di dalamnya: src/app/components/page.tsx:38-50⁴.

Diagram komposisi katalog

Warna di diagram membawa makna: amber untuk titik masuk dan state halaman, ungu untuk kelompok komponen, hijau untuk komponen dasar yang dipakai ulang oleh komponen lain.

graph TD
  catalog["/components · ComponentPage"]
  controls["useState: mode + color"]
  surface["section: bg-dark atau bg-white + color"]
  btnGroup["Buttons"]
  linkGroup["Links"]
  mediaGroup["Media dan placeholder"]
  Button["Button"]
  IconButton["IconButton"]
  TextButton["TextButton"]
  ButtonLink["ButtonLink"]
  ArrowLink["ArrowLink"]
  PrimaryLink["PrimaryLink"]
  UnderlineLink["UnderlineLink"]
  UnstyledLink["UnstyledLink"]
  NextImage["NextImage"]
  Skeleton["Skeleton"]

  catalog --> controls
  controls --> surface
  surface --> btnGroup
  surface --> linkGroup
  surface --> mediaGroup
  btnGroup --> Button
  btnGroup --> IconButton
  btnGroup --> TextButton
  linkGroup --> ButtonLink
  linkGroup --> ArrowLink
  linkGroup --> PrimaryLink
  linkGroup --> UnderlineLink
  mediaGroup --> NextImage
  mediaGroup --> Skeleton
  ButtonLink --> UnstyledLink
  ArrowLink --> UnderlineLink

  style catalog fill:#f59e0b,color:#000
  style controls fill:#f59e0b,color:#000
  style surface fill:#f59e0b,color:#000
  style btnGroup fill:#8b5cf6,color:#fff
  style linkGroup fill:#8b5cf6,color:#fff
  style mediaGroup fill:#8b5cf6,color:#fff
  style UnstyledLink fill:#2d7d46,color:#fff
  style UnderlineLink fill:#2d7d46,color:#fff
%% fig: Komposisi katalog komponen
%% desc: Halaman /components mengelompokkan tombol, link, serta media, dengan ButtonLink dan ArrowLink mewarisi UnstyledLink dan UnderlineLink.

Kontrak variant dan ukuran

Setiap komponen mendeklarasikan variant dan ukuran sebagai as const, sehingga nilai yang tampil di pratinjau adalah himpunan tertutup, bukan string bebas. Button dan ButtonLink juga memakai default yang sama, yaitu 'primary' dan 'base': src/components/buttons/Button.tsx:31-32⁵ dan src/components/links/ButtonLink.tsx:37-38⁶.

TextButton tidak punya prop size, dan IconButton tidak menerima size sama sekali; keduanya hanya mengekspos variant plus isLoading/isDarkBg untuk IconButton: src/components/buttons/TextButton.tsx:5-9¹⁰ dan src/components/buttons/IconButton.tsx:8-14⁹.

String kelas yang disalin dua kali

Button dan ButtonLink memakai daftar kelas size dan variant yang sama, tetapi ditulis ulang di dua berkas: src/components/buttons/Button.tsx:48-99¹³ dan src/components/links/ButtonLink.tsx:51-99¹⁴. Pembagian ini disengaja karena Button merender button sedangkan ButtonLink merender UnstyledLink, namun tidak ada satu sumber kelas bersama.

⚠️ Mengubah padding di blok size Button tidak otomatis mengubah ButtonLink. Pratinjau akan menampilkan dua tombol dengan tinggi berbeda tanpa error build, jadi kedua blok harus disunting bersamaan. Rincian per komponen ada di Komponen Tombol dan Komponen Link.

Panel mode gelap dan palet warna

mode bertipe 'dark' | 'light' dan tombol pratinjau memakai variant kebalikannya, sehingga label berubah dari Set to light ke Set to dark: src/app/components/page.tsx:52-60¹⁵. Nilai mode juga diteruskan sebagai isDarkBg ke variant outline dan ghost, agar hover memakai gray-900/gray-800 dan bukan primary-50: src/components/buttons/Button.tsx:68-74¹⁶.

color bertipe Color, yaitu irisan dari colorList. select merender 22 nama warna Tailwind berurutan dari slate sampai rose, dan nama warna itu dipasang langsung sebagai kelas pada section: src/app/components/page.tsx:62-88¹⁷ dan src/app/components/page.tsx:438-461¹⁸. Nilai --color-primary-* untuk tiap palet berada di globals.css dan dibahas di Styling, Token Warna, dan Tema.

Dua belas bagian pratinjau

Seluruh pratinjau adalah satu <ol> berisi dua belas <li>, masing-masing dengan <h2> sebagai judul: src/app/components/page.tsx:62-431¹⁹.

Satu komponen link tidak pernah muncul di katalog: IconLink ada di src/components/links/, tetapi tidak termasuk daftar impor halaman: src/app/components/page.tsx:1-23¹. Katalog hanya menampilkan sepuluh komponen yang diimpor secara eksplisit.

Jebakan pada bagian media

NextImage merender figure dengan lebar ${width}px hanya bila className tidak memuat w-; jika ada w-, lebar figure diserahkan ke kelas tersebut: src/components/NextImage.tsx:34-42²⁰. Pratinjau memanggil useSkeleton dengan className='w-32 md:w-40' dan width='180', sehingga angka 180 tidak menentukan lebar figure di layar: src/app/components/page.tsx:410-430²¹.

useSkeleton menaruh status awal 'loading' dan memasang animate-pulse sampai onLoadingComplete dipanggil: src/components/NextImage.tsx:45-53²². Komentar di berkas mengingatkan bahwa skeleton sebaiknya tidak dipakai bila gambar transparan: src/components/NextImage.tsx:19-23²³.

Skeleton hanya memberi kelas animate-shimmer dan gradient latar; gerakannya berasal dari token --animate-shimmer: shimmer 1.3s linear infinite di @theme dan @keyframes shimmer yang menggeser background-position dari -700px ke 700px, sejalan dengan backgroundSize: '700px 100%' di komponen: src/components/Skeleton.tsx:7-19¹², src/styles/globals.css:24-27²⁴, dan src/styles/globals.css:55-62²⁵.

⚠️ Tanpa token --animate-shimmer, Skeleton tetap tampil tetapi diam, karena kelas animate-shimmer tidak punya definisi @keyframes lain di repository ini.

Halaman client tanpa metadata

Karena berkas ini dibuka dengan 'use client', halaman tidak mengekspor metadata seperti halaman server lainnya; judul dan deskripsi mengikuti layout: src/app/components/page.tsx:1-23¹. Rantai metadata itu dibahas di App Router, Layout, dan Metadata.