Disainisüsteem

BidWarsi oksjonimaja elav stiilijuhend. Iga näidis renderdatakse teematokenitest, nii et see püsib korrektne nii heledas kui ka tumedas režiimis — kasuta mõlema ülevaatamiseks teemalülitit.

Värvitokenid

Iga värvinäidis on maalitud tokeni utiliidiga (bg-primary, bg-accent…), mitte kunagi kõvakodeeritud heksväärtusega. Näidatud heksväärtused on ainult dokumentatsiooniks.

--background

#FFFFFF / #09090B

Pärgamendi soojus — lehe pind

--foreground

#0F1B2D / #FAFAFA

Tumesinine tint — põhitekst

--card

--card-foreground

#FFFFFF / #18181B

Tõstetud pinnad (kaardid, hüpikaknad)

--primary

--primary-foreground

#0F1B2D / #C9A227

Usaldus ja struktuur — põhitoimingud (tumesinine hele / kuldne tume)

--secondary

--secondary-foreground

#F4F4F5 / #27272A

Vaiksema rõhuasetusega toimingud ja pinnad

--muted

--muted-foreground

#F4F4F5 / #27272A

Summutatud pinnad + abitekst

--accent

--accent-foreground

#C9A227 / #C9A227

Tegevus ja tähelepanu — kuld, boost/jaga CTA-d

--destructive

--destructive-foreground

#B3402A / #E06A4F

Hävitavad toimingud

--warning

--warning-foreground

#FDE8C8 / #3A2E0B

Jälgimata tarne / vaidluse olekud

--border

#E4E4E7 / #3F3F46

Äärised ja eraldajad

--input

#E4E4E7 / #71717A

Vormiväljade kontuurid

--ring

#C9A227 / #C9A227

Fookusrõngad

Tüpograafia

Pealkirjad kasutavad seriif-fonti (Fraunces, font-display kaudu); põhitekst kasutab Interit.

Pealkiri — seriif (--font-display)

Pealkiri 1 — Haamer lööb üks kord

Pealkiri 2 — Varsti lõppevad

Pealkiri 3 — Oksjoni detailid

Põhitekst — Inter

Põhitekst — Paku hinda kaartidele, koomiksitele ja teistele kollektsioonikaupadele siduvatel C2C-oksjonitel läbipaistvate tasudega.

Väike — Ostja kaitse kehtib igale arveldatud tellimusele.

Vaigistatud — Tasud on alati näha enne pakkumise kinnitamist.

Komponendid

Ühised primitiivid teegist @auction/ui, renderdatud koos variantide ja lühikese kasutusnäitega.

Button

<Button variant="accent" size="lg">…</Button>

Badge

default
secondary
outline
warning
destructive
Esiletõstetud
<Badge variant="warning">…</Badge>
<Badge className="bg-accent text-accent-foreground">…</Badge>

Card

Kaardi koostis
Päise, sisu ja jaluse pesad

Kaardid on kuulutuste, dialoogide ja kokkuvõtete tõstetud pind.

<Card>
  <CardHeader><CardTitle>…</CardTitle></CardHeader>
  <CardContent>…</CardContent>
  <CardFooter>…</CardFooter>
</Card>

Input

<Input placeholder="…" />
<Input disabled placeholder="…" />

Skeleton

<Skeleton className="aspect-[4/3] w-full" />

Avatar

AHAH
<Avatar>
  <AvatarImage src="…" alt="…" />
  <AvatarFallback>AH</AvatarFallback>
</Avatar>

Mustrid

Kanoonilised kompositsioonid, mis on ehitatud ülaltoodud primitiividest — kopeeri need, ära leiuta uuesti.

Oksjonikaart

1999 Charizard Holo — PSA 9
Kaardid

Praegune pakkumine: 245,00 €

250,00 € + 12,50 € tasu = 262,50 €

Esiletõstetud
Lõppeb 2 t 14 min pärast

Hoiatusriba

Inforiba

Pakkumised on siduvad: oksjoni lõppedes võetakse summa võitja kaardilt automaatselt.