teqo-backup/docs/plans/c168-biblioteca-cortes-ui-draft.html

705 lines
33 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>UI draft — C168 · Acervo: biblioteca de cortes</title>
</head>
<body class="bg-zinc-950 text-zinc-100 antialiased">
<main class="mx-auto max-w-[1400px] p-6 sm:p-8">
<h1 class="text-lg font-medium text-zinc-100">
UI draft — Acervo: biblioteca de cortes (C168)
</h1>
<p class="mt-1 max-w-3xl text-sm text-zinc-400">
A assessoria reencontra um corte já feito, confere o discurso de origem, ajusta título e
descrição, baixa, compartilha e publica/despublica — sem refazer o corte.
</p>
<p class="mt-2 text-sm text-zinc-500">
Cinza = estrutura existente · <span class="text-amber-400">âmbar</span> = ação primária /
novo neste item · barras cinza = conteúdo não especificado. Cenas estáticas: sem interação,
sem dados reais.
</p>
<!-- ============================================================ -->
<!-- Cena 1 · desktop (~1280px) — lista de cortes -->
<!-- ============================================================ -->
<section class="mt-8">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 1 · desktop (~1280px) — /campanha/comunicacao/acervo/cortes
</p>
<div class="mt-3 overflow-x-auto">
<div
class="w-[1280px] max-w-full overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
>
<div class="flex min-h-[600px]">
<aside class="w-52 shrink-0 border-r border-zinc-800 bg-zinc-950/50 p-4">
<p class="px-3 text-xs tracking-wide text-zinc-500 uppercase">Campanha</p>
<nav class="mt-3 flex flex-col gap-1 text-sm">
<span class="rounded-lg bg-zinc-800 px-3 py-2 font-medium text-zinc-100"
>Comunicação</span
>
</nav>
<div class="mt-8 flex flex-col gap-1 text-sm text-zinc-500">
<span class="rounded-lg px-3 py-2">Meu perfil</span>
<span class="rounded-lg px-3 py-2">Sair</span>
</div>
</aside>
<div class="min-w-0 flex-1 p-6">
<div class="flex flex-wrap items-end justify-between gap-3">
<div>
<p class="text-xs text-zinc-500">← Acervo de falas</p>
<h2 class="mt-1 text-base font-medium">Cortes</h2>
<p class="mt-0.5 text-sm text-zinc-400">
O que já foi cortado — reencontre, ajuste o texto e republique.
</p>
</div>
<span class="text-xs text-zinc-500">12 cortes</span>
</div>
<div
class="mt-4 flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-2"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
class="size-4 shrink-0 text-zinc-500"
>
<circle cx="11" cy="11" r="7" />
<path d="m20 20-3.5-3.5" />
</svg>
<span class="text-sm text-zinc-500">Buscar por título ou descrição…</span>
<span class="ml-auto px-1 text-xs text-zinc-500">Busca</span>
</div>
<div class="mt-4 flex flex-col gap-3">
<!-- Item publicado -->
<article class="rounded-xl border border-zinc-800 bg-zinc-900 p-4">
<div class="flex flex-wrap items-center gap-2">
<span
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400"
>Publicado</span
>
<span class="text-xs text-zinc-500">Criado em 12/08/2026</span>
</div>
<h3 class="mt-2 text-sm font-medium text-zinc-100">
Saúde pública no interior da Bahia
</h3>
<div class="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
<span class="text-zinc-400">Fala · Breves Comunicações · 11/08/2026</span>
<span aria-hidden="true" class="text-zinc-600">·</span>
<span class="underline decoration-zinc-700 underline-offset-4 text-zinc-300"
>Ver fala no acervo</span
>
<span aria-hidden="true" class="text-zinc-600">·</span>
<span class="text-zinc-400">1min12s</span>
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
<button
type="button"
class="min-h-10 rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
>
Abrir corte
</button>
<button type="button" class="min-h-10 rounded-lg px-3 text-sm text-zinc-400">
Copiar link
</button>
</div>
</article>
<!-- Item publicado 2 -->
<article class="rounded-xl border border-zinc-800 bg-zinc-900 p-4">
<div class="flex flex-wrap items-center gap-2">
<span
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400"
>Publicado</span
>
<span class="text-xs text-zinc-500">Criado em 10/08/2026</span>
</div>
<h3 class="mt-2 text-sm font-medium text-zinc-100">
Financiamento tripartite e medicamentos
</h3>
<div class="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
<span class="text-zinc-400">Fala · Breves Comunicações · 09/08/2026</span>
<span aria-hidden="true" class="text-zinc-600">·</span>
<span class="underline decoration-zinc-700 underline-offset-4 text-zinc-300"
>Ver fala no acervo</span
>
<span aria-hidden="true" class="text-zinc-600">·</span>
<span class="text-zinc-400">2min03s</span>
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
<button
type="button"
class="min-h-10 rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
>
Abrir corte
</button>
<button type="button" class="min-h-10 rounded-lg px-3 text-sm text-zinc-400">
Copiar link
</button>
</div>
</article>
<!-- Item despublicado -->
<article class="rounded-xl border border-dashed border-zinc-800 bg-zinc-900 p-4">
<div class="flex flex-wrap items-center gap-2">
<span
class="rounded-md border border-dashed border-zinc-600 px-2 py-0.5 text-xs text-zinc-400"
>Despublicado</span
>
<span class="text-xs text-zinc-500">Criado em 08/08/2026</span>
</div>
<h3 class="mt-2 text-sm font-medium text-zinc-100">Obras e emprego na Bahia</h3>
<div class="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs">
<span class="text-zinc-400">Fala · Breves Comunicações · 08/08/2026</span>
<span aria-hidden="true" class="text-zinc-600">·</span>
<span class="underline decoration-zinc-700 underline-offset-4 text-zinc-300"
>Ver fala no acervo</span
>
<span aria-hidden="true" class="text-zinc-600">·</span>
<span class="text-zinc-400">45s</span>
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
<button
type="button"
class="min-h-10 rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
>
Abrir corte
</button>
<button type="button" class="min-h-10 rounded-lg px-3 text-sm text-zinc-400">
Copiar link
</button>
</div>
</article>
</div>
<div
class="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-zinc-800 pt-3 text-xs text-zinc-500"
>
<span>1–3 de 12 cortes</span>
<span class="flex items-center gap-2">
<span class="rounded-lg border border-zinc-800 px-2 py-1">Anterior</span>
<span class="rounded-lg border border-zinc-800 px-2 py-1 text-zinc-300"
>Página 1 de 4</span
>
<span class="rounded-lg border border-zinc-800 px-2 py-1">Próxima</span>
</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- Cena 2 · desktop — lista vazia -->
<!-- ============================================================ -->
<section class="mt-10">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 2 · desktop — lista vazia ("Nenhum corte ainda")
</p>
<div class="mt-3 overflow-x-auto">
<div
class="w-[1280px] max-w-full overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
>
<div class="flex min-h-[420px]">
<aside class="w-52 shrink-0 border-r border-zinc-800 bg-zinc-950/50 p-4">
<p class="px-3 text-xs tracking-wide text-zinc-500 uppercase">Campanha</p>
<nav class="mt-3 flex flex-col gap-1 text-sm">
<span class="rounded-lg bg-zinc-800 px-3 py-2 font-medium text-zinc-100"
>Comunicação</span
>
</nav>
</aside>
<div class="flex min-w-0 flex-1 flex-col p-6">
<p class="text-xs text-zinc-500">← Acervo de falas</p>
<h2 class="mt-1 text-base font-medium">Cortes</h2>
<div
class="flex flex-1 flex-col items-center justify-center gap-2 py-10 text-center"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
class="size-8 text-zinc-600"
>
<rect x="2" y="3" width="20" height="14" rx="2" />
<path d="M8 21h8M12 17v4" />
</svg>
<p class="text-sm font-medium text-zinc-200">Nenhum corte ainda</p>
<p class="max-w-sm text-xs text-zinc-500">
Quando você cortar um trecho de uma fala, ele fica guardado aqui para
reencontrar, baixar, ajustar o texto e republicar.
</p>
<button
type="button"
class="mt-2 min-h-11 rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
>
Ir para o acervo de falas
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- Cena 3 · desktop — detalhe do corte -->
<!-- ============================================================ -->
<section class="mt-10">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 3 · desktop — /campanha/comunicacao/acervo/cortes/[id] (player, origem, editar,
ações)
</p>
<div class="mt-3 overflow-x-auto">
<div
class="w-[1280px] max-w-full overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
>
<div class="flex min-h-[720px]">
<aside class="w-52 shrink-0 border-r border-zinc-800 bg-zinc-950/50 p-4">
<p class="px-3 text-xs tracking-wide text-zinc-500 uppercase">Campanha</p>
<nav class="mt-3 flex flex-col gap-1 text-sm">
<span class="rounded-lg bg-zinc-800 px-3 py-2 font-medium text-zinc-100"
>Comunicação</span
>
</nav>
</aside>
<div class="min-w-0 flex-1 p-6">
<p class="text-xs text-zinc-500">← Voltar aos cortes</p>
<div class="mt-3 grid gap-6 lg:grid-cols-[minmax(0,1fr)_300px]">
<div class="min-w-0">
<h2 class="text-lg font-medium">Saúde pública no interior da Bahia</h2>
<p class="mt-1 text-xs text-zinc-400">
Corte de 1min12s · criado em 12/08/2026
</p>
<!-- Player -->
<div
class="relative mt-4 flex aspect-video w-full items-center justify-center rounded-lg border border-zinc-800 bg-zinc-950"
>
<div
class="flex size-12 items-center justify-center rounded-full border border-zinc-700 text-zinc-300"
>
▶
</div>
<span class="absolute top-3 left-3 text-xs text-zinc-500">
Corte · 1min12s
</span>
<div class="absolute right-3 bottom-3 left-3 flex items-center gap-2">
<span class="h-1 flex-1 rounded-full bg-zinc-800">
<span class="block h-1 w-1/3 rounded-full bg-zinc-500"></span>
</span>
<span class="text-[10px] tabular-nums text-zinc-500">00:24 / 01:12</span>
</div>
</div>
<div class="mt-3 flex flex-wrap items-center gap-2">
<button
type="button"
class="min-h-11 rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
>
Baixar vídeo (MP4)
</button>
<button
type="button"
class="min-h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Abrir página pública
</button>
<button type="button" class="min-h-11 rounded-lg px-4 text-sm text-zinc-400">
Copiar link
</button>
<button type="button" class="min-h-11 rounded-lg px-4 text-sm text-zinc-400">
Compartilhar no WhatsApp
</button>
</div>
<p class="mt-2 text-xs text-zinc-500">
O link compartilhado é o mesmo da página pública: /corte/123
</p>
<!-- Editar título e descrição -->
<section class="mt-6 rounded-xl border border-zinc-800 p-4">
<h3 class="text-sm font-medium">Editar título e descrição</h3>
<p class="mt-0.5 text-xs text-zinc-500">
O que você salvar aqui aparece na página pública e no preview do link.
</p>
<div class="mt-4 flex flex-col gap-1.5">
<span class="text-sm text-zinc-300">Título</span>
<div
class="flex h-11 items-center rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
>
Saúde pública no interior da Bahia
</div>
</div>
<div class="mt-3 flex flex-col gap-1.5">
<span class="text-sm text-zinc-300">Descrição</span>
<div
class="h-24 rounded-lg border border-zinc-700 p-3 text-sm text-zinc-300"
>
O deputado fala sobre o acesso a medicamentos no interior e defende o
financiamento tripartite da saúde.
</div>
</div>
<div class="mt-3 flex items-center justify-end gap-2">
<button
type="button"
class="h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Descartar
</button>
<button
type="button"
class="h-11 rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
>
Salvar alterações
</button>
</div>
</section>
</div>
<aside class="space-y-4">
<section class="rounded-xl border border-zinc-800 p-4">
<h3 class="text-xs tracking-wide text-zinc-500 uppercase">
Discurso de origem
</h3>
<p class="mt-1.5 text-sm text-zinc-200">Breves Comunicações · 11/08/2026</p>
<p class="mt-1 text-xs text-zinc-500">Trecho 00:43–01:55 da fala</p>
<p
class="mt-2 text-sm underline decoration-zinc-700 underline-offset-4 text-zinc-300"
>
Ver fala no acervo
</p>
</section>
<section class="rounded-xl border border-zinc-800 p-4">
<h3 class="text-xs tracking-wide text-zinc-500 uppercase">Publicação</h3>
<div class="mt-2 flex items-center gap-2">
<span
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400"
>Publicado</span
>
</div>
<p class="mt-2 text-xs text-zinc-500">
Despublicado, o link público para de funcionar para quem já recebeu.
</p>
<button
type="button"
class="mt-3 h-11 w-full rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Despublicar
</button>
</section>
<section class="rounded-xl border border-dashed border-zinc-800 p-4">
<h3 class="text-xs tracking-wide text-zinc-500 uppercase">
Variante · despublicado
</h3>
<div class="mt-2">
<span
class="rounded-md border border-dashed border-zinc-600 px-2 py-0.5 text-xs text-zinc-400"
>Despublicado</span
>
</div>
<p class="mt-2 text-xs text-zinc-500">
Despublicado, o link público não responde.
</p>
<button
type="button"
class="mt-3 h-11 w-full rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
>
Publicar corte
</button>
</section>
</aside>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- Cena 4 · desktop — confirmação de despublicar -->
<!-- ============================================================ -->
<section class="mt-10">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 4 · desktop — confirmação de despublicar (kill switch)
</p>
<div
class="mt-3 overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950/70 p-6 sm:p-10"
>
<div class="mx-auto max-w-md rounded-xl border border-zinc-800 bg-zinc-900">
<div class="border-b border-zinc-800 p-4">
<div class="flex flex-wrap items-center gap-2">
<h2 class="text-sm font-medium">Despublicar este corte?</h2>
<span
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-xs font-medium text-amber-400"
>Publicado</span
>
</div>
<p class="mt-1 text-xs text-zinc-500">Saúde pública no interior da Bahia</p>
</div>
<div class="p-4">
<p class="text-sm text-zinc-300">
O link público deixa de funcionar para quem já recebeu. Você pode publicar de novo
quando quiser.
</p>
<p class="mt-2 text-xs text-zinc-500">
O corte continua na biblioteca como despublicado.
</p>
</div>
<div class="flex items-center justify-end gap-2 border-t border-zinc-800 p-4">
<button
type="button"
class="h-11 rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Cancelar
</button>
<button
type="button"
class="h-11 rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
>
Despublicar
</button>
</div>
</div>
</div>
</section>
<!-- ============================================================ -->
<!-- Cena 5 · mobile (~390px) — lista e detalhe -->
<!-- ============================================================ -->
<section class="mt-10">
<p class="text-xs tracking-wide text-zinc-500 uppercase">
Cena 5 · mobile (~390px) — lista de cortes e detalhe
</p>
<div class="mt-3 flex flex-wrap items-start gap-6">
<!-- Lista mobile -->
<div
class="w-[390px] max-w-full overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
>
<div
class="flex items-center justify-between border-b border-zinc-800 px-4 py-3 text-sm"
>
<span class="text-xs text-zinc-500">← Acervo</span>
<span class="font-medium">Cortes</span>
<span class="text-xs text-zinc-500">12</span>
</div>
<div class="p-4">
<div
class="flex items-center gap-2 rounded-lg border border-zinc-800 bg-zinc-950 p-2"
>
<svg
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
class="size-4 shrink-0 text-zinc-500"
>
<circle cx="11" cy="11" r="7" />
<path d="m20 20-3.5-3.5" />
</svg>
<span class="text-sm text-zinc-500">Buscar por título ou descrição…</span>
</div>
<div class="mt-3 flex flex-col gap-3">
<article class="rounded-xl border border-zinc-800 bg-zinc-900 p-3">
<div class="flex flex-wrap items-center gap-2">
<span
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-400"
>Publicado</span
>
<span class="text-[11px] text-zinc-500">Criado em 12/08/2026</span>
</div>
<h3 class="mt-2 text-sm font-medium text-zinc-100">
Saúde pública no interior da Bahia
</h3>
<p class="mt-1 text-[11px] text-zinc-400">
Fala · Breves Comunicações · 11/08/2026 · 1min12s
</p>
<p
class="mt-1 text-[11px] underline decoration-zinc-700 underline-offset-4 text-zinc-300"
>
Ver fala no acervo
</p>
<div class="mt-2 flex items-center gap-2">
<button
type="button"
class="min-h-10 flex-1 rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
>
Abrir corte
</button>
<button type="button" class="min-h-10 rounded-lg px-3 text-sm text-zinc-400">
Copiar link
</button>
</div>
</article>
<article class="rounded-xl border border-dashed border-zinc-800 bg-zinc-900 p-3">
<div class="flex flex-wrap items-center gap-2">
<span
class="rounded-md border border-dashed border-zinc-600 px-2 py-0.5 text-[10px] text-zinc-400"
>Despublicado</span
>
<span class="text-[11px] text-zinc-500">Criado em 08/08/2026</span>
</div>
<h3 class="mt-2 text-sm font-medium text-zinc-100">Obras e emprego na Bahia</h3>
<p class="mt-1 text-[11px] text-zinc-400">
Fala · Breves Comunicações · 08/08/2026 · 45s
</p>
<p
class="mt-1 text-[11px] underline decoration-zinc-700 underline-offset-4 text-zinc-300"
>
Ver fala no acervo
</p>
<div class="mt-2 flex items-center gap-2">
<button
type="button"
class="min-h-10 flex-1 rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
>
Abrir corte
</button>
<button type="button" class="min-h-10 rounded-lg px-3 text-sm text-zinc-400">
Copiar link
</button>
</div>
</article>
</div>
<div
class="mt-3 flex items-center justify-between border-t border-zinc-800 pt-3 text-[11px] text-zinc-500"
>
<span>1–3 de 12</span>
<span>Página 1 de 4</span>
</div>
</div>
</div>
<!-- Detalhe mobile -->
<div
class="w-[390px] max-w-full overflow-hidden rounded-xl border border-zinc-800 bg-zinc-900"
>
<div
class="flex items-center justify-between border-b border-zinc-800 px-4 py-3 text-sm"
>
<span class="text-xs text-zinc-500">← Cortes</span>
<span class="font-medium">Corte</span>
<span class="text-xs text-zinc-500">···</span>
</div>
<div class="p-4">
<h2 class="text-sm font-medium">Saúde pública no interior da Bahia</h2>
<p class="mt-1 text-[11px] text-zinc-400">Corte de 1min12s · criado em 12/08/2026</p>
<div
class="relative mt-3 flex aspect-video w-full items-center justify-center rounded-lg border border-zinc-800 bg-zinc-950"
>
<div
class="flex size-10 items-center justify-center rounded-full border border-zinc-700 text-sm text-zinc-300"
>
▶
</div>
<span class="absolute bottom-2 left-2 text-[10px] text-zinc-500">01:12</span>
</div>
<div class="mt-3 flex flex-col gap-2">
<button
type="button"
class="min-h-11 w-full rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
>
Baixar vídeo (MP4)
</button>
<button
type="button"
class="min-h-11 w-full rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Abrir página pública
</button>
<div class="flex gap-2">
<button
type="button"
class="min-h-11 flex-1 rounded-lg px-3 text-sm text-zinc-400"
>
Copiar link
</button>
<button
type="button"
class="min-h-11 flex-1 rounded-lg px-3 text-sm text-zinc-400"
>
WhatsApp
</button>
</div>
</div>
<section class="mt-4 rounded-xl border border-zinc-800 p-3">
<h3 class="text-[11px] tracking-wide text-zinc-500 uppercase">
Discurso de origem
</h3>
<p class="mt-1 text-sm text-zinc-200">Breves Comunicações · 11/08/2026</p>
<p class="mt-0.5 text-[11px] text-zinc-500">Trecho 00:43–01:55 da fala</p>
<p
class="mt-1.5 text-sm underline decoration-zinc-700 underline-offset-4 text-zinc-300"
>
Ver fala no acervo
</p>
</section>
<section class="mt-3 rounded-xl border border-zinc-800 p-3">
<h3 class="text-[11px] tracking-wide text-zinc-500 uppercase">Publicação</h3>
<div class="mt-1.5">
<span
class="rounded-md border border-amber-500/40 bg-amber-500/10 px-2 py-0.5 text-[10px] font-medium text-amber-400"
>Publicado</span
>
</div>
<p class="mt-1.5 text-[11px] text-zinc-500">
Despublicado, o link público para de funcionar para quem já recebeu.
</p>
<button
type="button"
class="mt-2 h-11 w-full rounded-lg border border-zinc-700 px-4 text-sm text-zinc-300"
>
Despublicar
</button>
</section>
<section class="mt-3 rounded-xl border border-zinc-800 p-3">
<h3 class="text-sm font-medium">Editar título e descrição</h3>
<div class="mt-3 flex flex-col gap-1.5">
<span class="text-[11px] text-zinc-400">Título</span>
<div
class="flex min-h-11 items-center rounded-lg border border-zinc-700 px-3 text-sm text-zinc-200"
>
Saúde pública no interior da Bahia
</div>
</div>
<div class="mt-3 flex flex-col gap-1.5">
<span class="text-[11px] text-zinc-400">Descrição</span>
<div class="min-h-20 rounded-lg border border-zinc-700 p-3 text-sm text-zinc-300">
O deputado fala sobre o acesso a medicamentos no interior.
</div>
</div>
<button
type="button"
class="mt-3 h-11 w-full rounded-lg bg-amber-500 px-4 text-sm font-medium text-zinc-950"
>
Salvar alterações
</button>
</section>
</div>
</div>
</div>
</section>
</main>
</body>
</html>