Patterns
MediaRow
포스터 썸네일이 달린 공연 한 줄.
import { MediaRow } from '@coldsurfers/surf-ui/cards'모
토 10.10 · 12:00모보 페스티벌파주 · 아시아출판문화정보센터88,000원2TM3180인
일 10.11 · 14:00인터스텔라 필름콘서트경희대 평화의전당69,000~원놀유니버스 외 217V
일 10.11 · 17:00V.O.S 콘서트용인포은아트홀import { MediaRow } from '@coldsurfers/surf-ui/cards'import { StatPill } from '@coldsurfers/surf-ui/primitives'export default function Example() { return ( <div data-surface="ink" style={{ display: 'flex', flexDirection: 'column', gap: 8, width: '100%', maxWidth: 390, padding: 20, borderRadius: 24, background: 'var(--surf-bg-base)', }} > <MediaRow cover="모" kicker="토 10.10 · 12:00" title="모보 페스티벌" meta="파주 · 아시아출판문화정보센터" footer={ <> 88,000원 <StatPill value="2TM" /> </> } aside={ <> <StatPill icon="🔥" value="31" tone="hot" /> <StatPill icon="👁" value="80" /> </> } /> <MediaRow selected cover="인" kicker="일 10.11 · 14:00" title="인터스텔라 필름콘서트" meta="경희대 평화의전당" footer={ <> 69,000~원 <StatPill value="놀유니버스 외 2" /> </> } aside={<StatPill icon="👁" value="17" />} /> <MediaRow dimmed cover="V" kicker="일 10.11 · 17:00" title="V.O.S 콘서트" meta="용인포은아트홀" /> </div> )}PickRow 에 썸네일을 더한 줄입니다(Figma 1028:331). 시각 키커 · 제목 · 장소 · 아래 줄(footer) · 오른쪽 칸(aside)이 섭니다.
고른 줄은 selected, 고른 뒤 나머지는 dimmed 입니다. 포스터가 없으면 cover(보통 이니셜)가 색면 위에 섭니다.
줄을 눌러 시트를 열거나 이동하려면 asChild 로 button · 라우터 Link 를 넘깁니다 — 그 자식의 글이 제목이 되고 나머지가 둘레에 그려집니다.
Props
Prop
Type
그 밖의 Omit<HTMLAttributes<HTMLElement>, 'title'> 속성은 루트 엘리먼트로 그대로 통과한다.