Studio
Редактор атомов · меняй пропсы — превью обновляется живьём
Chair
atoms/Chair.tsx · одиночный стул SVG
<Chair
flipped={false}
color="#B6BBB8"
width={11}
height={9}
/>ChairStrip
ряд из N стульев вдоль края контейнера
<div className="relative w-[160px] h-[40px] bg-card rounded-2xl">
<ChairStrip
position="top"
count={2}
fromPercent={20}
toPercent={80}
inset={3}
color="#B6BBB8"
/>
</div>TableShape
atoms/TableShape.tsx · тело + бирка + цифра — одна SVG
12
Бирка
<TableShape
number="12"
status="confirmed"
selected={false}
width={104}
height={56}
radius={24}
tag={{ width: 31, height: 47, radius: 15.5, offsetX: 5 }}
fontSize={18}
fontFamily={'"Inter", system-ui, sans-serif'}
/>TableCapacity
atoms/TableCapacity.tsx · 👥 N в одной SVG
<TableCapacity
capacity={4}
color="#355873"
iconSize={12}
fontSize={13}
gap={4}
/>TableTile (composed)
готовая молекула 104×56 — Chair + TableShape + TableCapacity
5
<TableTile
number="5"
capacity={4}
status="free"
selected={false}
/>TableTileVertical
вертикальный вариант · 45×84 · бирка сверху, капасити снизу, стулья по бокам
5
4
<TableTileVertical
number="5"
capacity={4}
status="free"
selected={false}
/>