Use ao criar qualquer componente de interface do OBigode: telas, cards, formulários, modais, navegação, listas ou qualquer elemento visual. O OBigode é um PWA mobile-first tratado como app nativo.
Antes de criar qualquer componente, leia:
src/components/ui/ — componentes shadcn/ui disponíveis (não recrie o que já existe)src/components/shared/BottomNav.tsx — padrão de navegação inferiortailwind.config.ts — tokens de cor e tipografia do projeto#18181B, superfícies #27272A)#F59E0B) — use para CTAs, ícones ativos, destaquesrounded-xlshadow-zinc-900/50 para manter coerência no darkmd: e lg:min-h-[48px] min-w-[48px] em elementos clicáveisactive: statepb-20 no layout das páginas autenticadasfixed bottom-0) ou páginas novassrc/components/ui/ (shadcn)?"use client")?// src/components/[categoria]/NomeComponente.tsx
// Adicione "use client" SOMENTE se necessário
// "use client"
import { type FC } from "react"
interface NomeComponenteProps {
// props tipadas — nunca use any
}
const NomeComponente: FC<NomeComponenteProps> = ({ ...props }) => {
return (
// JSX aqui
)
}
export default NomeComponente
<button className="
w-full flex items-center gap-4 p-4
bg-zinc-800 rounded-xl border border-zinc-700
active:scale-[0.98] transition-transform
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-amber-500
">
<button className="
w-full h-12 rounded-xl
bg-amber-500 text-zinc-900 font-semibold
active:bg-amber-400 transition-colors
disabled:opacity-40 disabled:pointer-events-none
">
<div className="
fixed bottom-0 left-0 right-0
bg-zinc-900 rounded-t-2xl border-t border-zinc-800
p-6 pb-safe
">
<div className="flex flex-col items-center gap-3 py-16 text-zinc-500">
<IconeRelevante className="w-10 h-10" />
<p className="text-sm">Nenhum [item] ainda</p>
</div>
<button> sem texto visível deve ter aria-labelalt=""; imagens com conteúdo: alt descritivoaria-busy="true"text-zinc-100 para contraste adequado