chore(plan-issue): formata o rascunho UI do B200 (prettier)
This commit is contained in:
parent
980f66983a
commit
d004a2b0eb
1 changed files with 199 additions and 55 deletions
|
|
@ -9,17 +9,27 @@
|
|||
<body class="bg-zinc-950 text-zinc-100 antialiased">
|
||||
<main class="mx-auto max-w-5xl p-8">
|
||||
<p class="text-sm text-zinc-400">
|
||||
Coordenação/assessoria no celular varrendo /campanha/municipios — densidade dos cards, alinhamento das labels e
|
||||
comportamento dos avatares. Cenas mobile 390px (sucessor de B196).
|
||||
Coordenação/assessoria no celular varrendo /campanha/municipios — densidade dos cards,
|
||||
alinhamento das labels e comportamento dos avatares. Cenas mobile 390px (sucessor de B196).
|
||||
</p>
|
||||
|
||||
<!-- ============ CENA: ATUAL (referência) ============ -->
|
||||
<h2 class="mt-8 text-sm font-semibold uppercase tracking-wide text-zinc-500">Atual (referência — 390px)</h2>
|
||||
<section data-shot="atual" class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950">
|
||||
<h2 class="mt-8 text-sm font-semibold uppercase tracking-wide text-zinc-500">
|
||||
Atual (referência — 390px)
|
||||
</h2>
|
||||
<section
|
||||
data-shot="atual"
|
||||
class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950"
|
||||
>
|
||||
<!-- header do app (56px) + barra de filtro 40px colada -->
|
||||
<div class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4">
|
||||
<div
|
||||
class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4"
|
||||
>
|
||||
<p class="text-sm font-semibold">Municípios</p>
|
||||
<span class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300">SR</span>
|
||||
<span
|
||||
class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300"
|
||||
>SR</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 border-b border-zinc-800 px-4 py-1">
|
||||
<div class="flex min-h-8 flex-1 items-center gap-1.5 rounded-lg px-2">
|
||||
|
|
@ -27,7 +37,10 @@
|
|||
class="min-h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500"
|
||||
placeholder="Digite para filtrar (município, território, cenário…)"
|
||||
/>
|
||||
<span class="flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400">✕</span>
|
||||
<span
|
||||
class="flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400"
|
||||
>✕</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -36,7 +49,9 @@
|
|||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex min-w-0 flex-col gap-0.5">
|
||||
<h3 class="text-lg leading-tight font-medium">Abaré</h3>
|
||||
<p class="text-sm text-zinc-400">Território de Identidade Chapada Diamantina · ZE 45</p>
|
||||
<p class="text-sm text-zinc-400">
|
||||
Território de Identidade Chapada Diamantina · ZE 45
|
||||
</p>
|
||||
</div>
|
||||
<div class="shrink-0 text-right">
|
||||
<p class="text-sm font-medium">12,4%</p>
|
||||
|
|
@ -46,9 +61,16 @@
|
|||
|
||||
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
|
||||
<div class="grid flex-1 grid-cols-3 gap-1">
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Pessimista</span>
|
||||
<span class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200">Central</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Otimista</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Pessimista</span
|
||||
>
|
||||
<span
|
||||
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
|
||||
>Central</span
|
||||
>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Otimista</span
|
||||
>
|
||||
</div>
|
||||
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
|
||||
<span class="ml-2 text-[11px] text-zinc-400">15.000</span>
|
||||
|
|
@ -75,10 +97,16 @@
|
|||
<span class="text-xs font-medium text-zinc-500">Assessores</span>
|
||||
<div class="flex w-full min-w-0 items-center overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">JM</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>JM</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">AP</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>AP</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -88,7 +116,10 @@
|
|||
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
|
||||
<div class="flex w-full min-w-0 items-center overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">CR</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>CR</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -98,7 +129,10 @@
|
|||
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
|
||||
<div class="flex w-full min-w-0 items-center overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">RS</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>RS</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -126,9 +160,16 @@
|
|||
|
||||
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
|
||||
<div class="grid flex-1 grid-cols-3 gap-1">
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Pessimista</span>
|
||||
<span class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200">Central</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Otimista</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Pessimista</span
|
||||
>
|
||||
<span
|
||||
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
|
||||
>Central</span
|
||||
>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Otimista</span
|
||||
>
|
||||
</div>
|
||||
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
|
||||
<span class="ml-2 text-[11px] text-zinc-400">9.800</span>
|
||||
|
|
@ -155,19 +196,34 @@
|
|||
<span class="text-xs font-medium text-zinc-500">Assessores</span>
|
||||
<div class="flex w-full min-w-0 items-center overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">JM</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>JM</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">AP</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>AP</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">CR</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>CR</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">LS</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>LS</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">RS</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>RS</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -177,10 +233,16 @@
|
|||
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
|
||||
<div class="flex w-full min-w-0 items-center overflow-hidden">
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">FT</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>FT</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex min-w-0 flex-1 justify-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">DA</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
|
||||
>DA</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -201,12 +263,22 @@
|
|||
</section>
|
||||
|
||||
<!-- ============ CENA: PROPOSTO ============ -->
|
||||
<h2 class="mt-10 text-sm font-semibold uppercase tracking-wide text-zinc-500">Proposto (390px)</h2>
|
||||
<section data-shot="proposto" class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950">
|
||||
<h2 class="mt-10 text-sm font-semibold uppercase tracking-wide text-zinc-500">
|
||||
Proposto (390px)
|
||||
</h2>
|
||||
<section
|
||||
data-shot="proposto"
|
||||
class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950"
|
||||
>
|
||||
<!-- header + barra de filtro mais alta (≈48px), sem pb → 1º card colado -->
|
||||
<div class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4">
|
||||
<div
|
||||
class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4"
|
||||
>
|
||||
<p class="text-sm font-semibold">Municípios</p>
|
||||
<span class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300">SR</span>
|
||||
<span
|
||||
class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300"
|
||||
>SR</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center gap-1.5 border-b border-zinc-800 px-4 pt-1 pb-0">
|
||||
<div class="flex min-h-10 flex-1 items-center gap-1.5 rounded-lg px-2">
|
||||
|
|
@ -214,7 +286,10 @@
|
|||
class="min-h-10 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500"
|
||||
placeholder="Digite para filtrar (município, território, cenário…)"
|
||||
/>
|
||||
<span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400">✕</span>
|
||||
<span
|
||||
class="flex size-9 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400"
|
||||
>✕</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -223,7 +298,9 @@
|
|||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex min-w-0 flex-col gap-0">
|
||||
<h3 class="text-lg leading-tight font-medium">Abaré</h3>
|
||||
<p class="text-sm leading-tight text-zinc-400">Território de Identidade Chapada Diamantina · ZE 45</p>
|
||||
<p class="text-sm leading-tight text-zinc-400">
|
||||
Território de Identidade Chapada Diamantina · ZE 45
|
||||
</p>
|
||||
</div>
|
||||
<div class="shrink-0 text-right">
|
||||
<p class="text-sm font-medium">12,4%</p>
|
||||
|
|
@ -233,9 +310,16 @@
|
|||
|
||||
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
|
||||
<div class="grid flex-1 grid-cols-3 gap-1">
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Pessimista</span>
|
||||
<span class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200">Central</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Otimista</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Pessimista</span
|
||||
>
|
||||
<span
|
||||
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
|
||||
>Central</span
|
||||
>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Otimista</span
|
||||
>
|
||||
</div>
|
||||
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
|
||||
<span class="ml-2 text-[11px] text-zinc-400">15.000</span>
|
||||
|
|
@ -261,8 +345,14 @@
|
|||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Assessores</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">JM</span>
|
||||
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">AP</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>JM</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>AP</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -270,7 +360,10 @@
|
|||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">CR</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>CR</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -278,7 +371,10 @@
|
|||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">RS</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>RS</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -295,7 +391,9 @@
|
|||
<div class="flex items-start justify-between gap-2">
|
||||
<div class="flex min-w-0 flex-col gap-0">
|
||||
<h3 class="text-lg leading-tight font-medium">Adustina</h3>
|
||||
<p class="text-sm leading-tight text-zinc-400">Território de Identidade Nordeste · ZE 62</p>
|
||||
<p class="text-sm leading-tight text-zinc-400">
|
||||
Território de Identidade Nordeste · ZE 62
|
||||
</p>
|
||||
</div>
|
||||
<div class="shrink-0 text-right">
|
||||
<p class="text-sm font-medium">7,1%</p>
|
||||
|
|
@ -305,9 +403,16 @@
|
|||
|
||||
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
|
||||
<div class="grid flex-1 grid-cols-3 gap-1">
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Pessimista</span>
|
||||
<span class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200">Central</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Otimista</span>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Pessimista</span
|
||||
>
|
||||
<span
|
||||
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
|
||||
>Central</span
|
||||
>
|
||||
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
|
||||
>Otimista</span
|
||||
>
|
||||
</div>
|
||||
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
|
||||
<span class="ml-2 text-[11px] text-zinc-400">9.800</span>
|
||||
|
|
@ -333,11 +438,26 @@
|
|||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Assessores</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">JM</span>
|
||||
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">AP</span>
|
||||
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">CR</span>
|
||||
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">LS</span>
|
||||
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">RS</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>JM</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>AP</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>CR</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>LS</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>RS</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -345,12 +465,30 @@
|
|||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">FT</span>
|
||||
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">DA</span>
|
||||
<span class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">MB</span>
|
||||
<span class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">TC</span>
|
||||
<span class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">VL</span>
|
||||
<span class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">PN</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>FT</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>DA</span
|
||||
>
|
||||
<span
|
||||
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>MB</span
|
||||
>
|
||||
<span
|
||||
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>TC</span
|
||||
>
|
||||
<span
|
||||
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>VL</span
|
||||
>
|
||||
<span
|
||||
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>PN</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -358,8 +496,14 @@
|
|||
<div class="flex w-full flex-col gap-1">
|
||||
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
|
||||
<div class="flex w-full min-w-0 items-center">
|
||||
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">RS</span>
|
||||
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">TB</span>
|
||||
<span
|
||||
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>RS</span
|
||||
>
|
||||
<span
|
||||
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
|
||||
>TB</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue