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

4
<TableCapacity
  capacity={4}
  color="#355873"
  iconSize={12}
  fontSize={13}
  gap={4}
/>

TableTile (composed)

готовая молекула 104×56 — Chair + TableShape + TableCapacity

5
4
<TableTile
  number="5"
  capacity={4}
  status="free"
  selected={false}
/>

TableTileVertical

вертикальный вариант · 45×84 · бирка сверху, капасити снизу, стулья по бокам

5
4
<TableTileVertical
  number="5"
  capacity={4}
  status="free"
  selected={false}
/>

Command Palette

Search for a command to run...