Widgets catalog
Inventário dos widgets e das configs de apresentação config-driven do template. O padrão por trás deles (variant key + registry + resolver, config-driven, override por arquivo) está descrito em Layout Composition e o caso canônico em Layout — Sidebar Buttons. Esta página é o mapa: o que existe, onde está e quem consome.
Onde as coisas moram
| Camada | Local |
|---|---|
| Config brand-editável | app/config/widgets/<nome>.ts — 37 arquivos hoje |
| Componentes de widget autocontidos | app/widgets/<nome>/ — 17 pastas + shared/ |
| Componentes que só consomem config | espalhados por app/components/, app/layouts/variants/ |
| Tipos | app/types/<nome>.ts |
:::info Nem toda config tem pasta em app/widgets/
Cerca de metade das 37 configs não descreve um widget montável, e sim a apresentação de um
componente que vive em app/components/ (cards, títulos de seção, CTA, partes do footer). O
denominador comum é o mecanismo — config tipada + override por substituição de arquivo — não a
localização.
:::
Para a lista viva: ls app/config/widgets/ e ls app/widgets/.
Widgets montáveis (têm pasta em app/widgets/)
| Config | Export | Pasta | Default | Papel |
|---|---|---|---|---|
sidebar-buttons.ts | sidebarButtonsConfig | sidebar-buttons/ | variant: "colored" | CTAs no rail da sidebar. Catálogo fechado de intents + customItems. Variantes: colored, gradient, icon-tiles |
topbar-notifications.ts | topbarNotificationsConfig | topbar-notifications/ | enabled: [] | Barra rotativa no topo. Client-only (nunca renderiza no SSR) |
bottom-notifications.ts | bottomNotificationsConfig | bottom-notifications/ | enabled: ["rewards_available", "download_app", "tournament", …] | CTA flutuante no rodapé. enabled: [] desliga. A lógica de runtime (ícones, CTAs, handlers, storage, predicados shouldShow) fica em handlers.ts e não é overridable |
campaign-widget.ts | campaignWidgetConfig | campaign-widget/ | enabled: false | Presentinho flutuante de campanha sazonal. Modos link | iframe | multi |
home-banner.ts | homeBannerConfig | home-banner/ | enabled: true | Carrossel hero da home (preserva o legado 1:1) |
home-leagues.ts | homeLeaguesConfig | home-leagues/ | variant: "default" | Row de ligas esportivas curadas, com SVGs de liga por campeonato |
stories.ts | storiesConfig | stories/ | enabled: false | Stories no topo da home |
top-games.ts | topGamesConfig | top-games/ | variant: "showcase" | Ranking "maiores pagadores" |
featured-game.ts | featuredGameConfig | featured-game/ | enabled: false | Destaque de um jogo único com preview de vídeo |
recommended-games.ts | recommendedGamesConfig | recommended-games/ | variant: "bento" | Bloco de jogos recomendados |
horizontal-menu.ts | horizontalMenuConfig | horizontal-menu/ | enabled: false | Menu horizontal de pills com imagem |
quick-access-menu.ts | quickAccessMenuConfig | quick-access-menu/ | enabled: false | Botão (+) de acesso rápido |
game-assistant.ts | gameAssistantConfig | game-assistant/ | enabled: false | Assistente flutuante in-game (card + bottom sheets) |
sidebar-profiles.ts | sidebarProfilesConfig | sidebar-profiles/ | enabled: false | Perfis (influenciadores) na sidebar |
profile-card.ts | profileCardConfig | profile/ | variant: "simple" | Card de perfil (avatar + nome + CTA) |
Pastas em app/widgets/ sem config dedicada: profiles-home-row/ (row de perfis na home, gateada
pelo config de profiles/), top-10-games/ (lê paidTodayWinsConfig) e shared/ (primitivas
comuns, não é widget).
Configs de apresentação (consumidas por componentes)
Cards e catálogo
| Config | Export | Consumidor | Papel |
|---|---|---|---|
game-card.ts | gameCardConfig | app/utils/game-artwork.ts | Forma do card de jogo. Alimenta o perfil único de arte (getGameArtworkProps) |
provider-card.ts | providerCardConfig | components/home/ProviderCard.tsx, ProviderCardChip.tsx | Card de provedor |
providers-section.ts | providersSectionConfig | components/home/ProvidersCarousel.tsx | Moldura da seção de provedores (frame: "none" por default preserva o comportamento atual) |
game-stats-card.ts | gameStatsCardConfig | components/games/GameStats.tsx | Cards do bloco de estatísticas na página do jogo |
game-winner-card.ts | gameWinnerCardConfig | components/games/GameWinners.tsx | Cards do bloco de ganhadores na página do jogo |
pre-game-rows.ts | preGameRows | components/games/pre-game/ | Rows da seção "Confira também" do drawer de pre-game |
favorites-row.ts | favoritesRowConfig | components/home/FavoritesRow.tsx, RecentlyPlayedRow.tsx | Comportamento do card vazio (emptyCardAction: "casino") |
paid-today-wins.ts | paidTodayWinsConfig | components/home/WinsCarousel.tsx, widgets/top-10-games/ | Defaults da variante "pagou hoje" dos maiores ganhos (ativada por featuresConfig.winsCardStyle: "paid-today") |
Gamificação e conteúdo
| Config | Export | Consumidor | Papel |
|---|---|---|---|
mission-card.ts | missionCardConfig | components/gamification/MissionsSection.tsx | Card de missão (variant: "stacked" + compact é o default promovido) |
tournament-card.ts | tournamentCardConfig | components/gamification/TournamentsSection.tsx | Card de torneio |
post-card.ts | postCardConfig | components/content/WpPostCard.tsx | Card de listagem de Blog e Promoções |
Chrome compartilhado
| Config | Export | Consumidor | Papel |
|---|---|---|---|
section-titles.ts | sectionTitlesConfig | components/section-title/resolve.ts | Título de seção por contexto. Variantes section-title-default e section-title-gradient |
section-titles.defaults.ts | defaultSectionTitlesConfig | o próprio override da brand | Helper, não config: recebe um parcial e faz deep merge com o default, devolvendo um objeto totalmente tipado |
cta-button.ts | ctaButtonConfig | components/ui/cta-button/resolve.ts | Defaults do primitivo <CtaButton> (a variante global vive em layoutConfig.componentVariants.ctaButton) |
floating-widgets.ts | floatingWidgetsConfig | components/layout/LastGameFloatingWidget.tsx, widgets/bottom-notifications/ | Liga/desliga cada card flutuante do canto inferior direito (enabled: true). A ordenação é do floatingStack — ver State Management |
Footer
Todos consumidos por app/layouts/variants/footer/parts/.
| Config | Export | Papel |
|---|---|---|
footer-accordion.ts | footerAccordion | Acordeão de navegação. Quando ligado, substitui a navegação padrão de 3 colunas |
footer-contacts.ts | footerContacts | Faixa de contatos por e-mail (abaixo dos selos) |
footer-community-extras.ts | footerCommunityExtras | Links extras na coluna COMUNIDADE |
footer-socials.ts | footerSocialExtras | Links sociais extras |
Painel do usuário
| Config | Export | Consumidor | Papel |
|---|---|---|---|
user-panel-data-menu.ts | userPanelDataMenuConfig | components/user/panel/UserPanelTabDados.tsx | Linhas do menu "Dados", mapeadas nas rotas da área do usuário |
user-panel-shortcuts.ts | userPanelShortcutsConfig | components/user/panel/UserPanelShortcuts.tsx | Carrossel de 4 atalhos na aba Perfil |
Sem consumidor hoje
| Config | Situação |
|---|---|
wins-widget.ts (winsWidgetConfig) | O export não é importado em nenhum lugar de app/ nem de overrides/. A variação real do widget de ganhos vem de featuresConfig.winsCardStyle ("default" | "paid-today"), consumida em components/home/WinsCarousel.tsx. Tratar como config inerte até ser ligada ou removida |
Padrões
Os dois formatos de config que aparecem repetidamente:
// 1. Widget ligável — `enabled` + itens
export const horizontalMenuConfig: HorizontalMenuConfig = {
enabled: false,
items: [],
};
// 2. Apresentação — `variant` (chave de um registry fechado)
export const missionCardConfig: MissionCardConfig = {
variant: "stacked",
// …
};
Em ambos, o base entrega o default desligado ou visualmente idêntico ao que já estava no ar, e a brand liga por override. É isso que garante que adicionar um widget não muda nenhuma brand existente.
:::danger Adicionar campo num widget com override
Override é substituição de arquivo inteiro. Ao acrescentar um campo numa config que já tem override
em alguma brand, propague para todas — senão aquela brand recebe undefined. Os mais overridados
hoje são stories.ts e bottom-notifications.ts (todas as 13 brands) e sidebar-buttons.ts (11).
Ver Config map e Forking — Override Files.
:::
Ícones
Widgets usam unplugin-icons com datasets Iconify — nunca lucide-react (não é dependência do
projeto desde 2026-04-28) nem SVG inline para ícone genérico:
import Users from "~icons/lucide/users";
import CardMultiple from "~icons/mdi/card-multiple-outline";
import IconLeagueBaiano from "~icons/custom/league-baiano";
SVGs custom ficam em app/icons/custom/. Quando o widget precisa da URL do arquivo (e não do
componente), o padrão é import url from "~/icons/custom/<nome>.svg?url" — widgets/home-leagues.ts
usa as duas formas, cada uma para o consumidor apropriado.