CodeIssuesDiscussionsWikiPull RequestsProjectsCommitsActionsReleasesContributorsPulse● GatesSecuritySettingsDeploymentsPipelineInsightsAgents✨ Explain✨ Ask AI✨ Workspace✨ Spec✨ Tests▓ Debt Map✨ NL Search🏛 Archaeology
Blame · Line-by-line history
empty-state.tsx
Each line is annotated with the commit that last touched it. Click any SHA to jump to that commit and see the surrounding change.
| c63b860 | 1 | /** |
| 2 | * BLOCK O2 — Polished empty-state component. | |
| 3 | * | |
| 4 | * Differs from the legacy `EmptyState` in `src/views/ui.tsx`: | |
| 5 | * - Strongly typed primary + secondary CTAs as data. | |
| 6 | * - Gradient-bordered card with icon (SVG/emoji) slot. | |
| 7 | * | |
| 8 | * Used from /dashboard, /explore, /:owner/:repo, /issues, /pulls, | |
| 9 | * /notifications. SSR-only. | |
| 10 | */ | |
| 11 | ||
| 12 | import type { FC } from "hono/jsx"; | |
| 13 | import { html } from "hono/html"; | |
| 14 | ||
| 15 | export interface EmptyStateCta { href: string; label: string } | |
| 16 | export interface PolishedEmptyStateProps { | |
| 17 | icon?: string; | |
| 18 | title: string; | |
| 19 | body: string; | |
| 20 | primaryCta?: EmptyStateCta; | |
| 21 | secondaryCta?: EmptyStateCta; | |
| 22 | footer?: string; | |
| 23 | } | |
| 24 | ||
| 25 | export const EmptyState: FC<PolishedEmptyStateProps> = ({ | |
| 26 | icon, title, body, primaryCta, secondaryCta, footer, | |
| 27 | }) => { | |
| 28 | const iconHtml = icon ?? defaultIcon(); | |
| 29 | return ( | |
| 30 | <div class="empty-state-polished" role="status"> | |
| 31 | <div class="empty-state-polished-card"> | |
| 32 | <div class="empty-state-polished-icon" aria-hidden="true"> | |
| 33 | {html([iconHtml] as unknown as TemplateStringsArray)} | |
| 34 | </div> | |
| 35 | <h2 class="empty-state-polished-title">{title}</h2> | |
| 36 | <p class="empty-state-polished-body">{body}</p> | |
| 37 | {(primaryCta || secondaryCta) && ( | |
| 38 | <div class="empty-state-polished-actions"> | |
| 39 | {primaryCta && (<a href={primaryCta.href} class="btn btn-primary">{primaryCta.label}</a>)} | |
| 40 | {secondaryCta && (<a href={secondaryCta.href} class="btn btn-ghost">{secondaryCta.label}</a>)} | |
| 41 | </div> | |
| 42 | )} | |
| 43 | {footer && <div class="empty-state-polished-footer">{footer}</div>} | |
| 44 | </div> | |
| 45 | <style dangerouslySetInnerHTML={{ __html: emptyStatePolishedCss }} /> | |
| 46 | </div> | |
| 47 | ); | |
| 48 | }; | |
| 49 | ||
| 50 | function defaultIcon(): string { | |
| 6fd5915 | 51 | return `<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><defs><linearGradient id="es-grad" x1="0" y1="0" x2="48" y2="48" gradientUnits="userSpaceOnUse"><stop stop-color="#5b6ee8"/><stop offset="1" stop-color="#5f8fa0"/></linearGradient></defs><path d="M24 4 L28 20 L44 24 L28 28 L24 44 L20 28 L4 24 L20 20 Z" fill="url(#es-grad)" opacity="0.85"/></svg>`; |
| c63b860 | 52 | } |
| 53 | ||
| 54 | export const emptyStatePolishedCss = ` | |
| 55 | .empty-state-polished { margin: 24px 0; display: flex; justify-content: center; } | |
| 56 | .empty-state-polished-card { position: relative; max-width: 560px; width: 100%; padding: 56px 32px 40px; text-align: center; background: var(--bg-elevated); border-radius: 14px; overflow: hidden; } | |
| 57 | .empty-state-polished-card::before { content: ''; position: absolute; inset: 0; padding: 1.5px; border-radius: 14px; background: var(--accent-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0.55; } | |
| 6fd5915 | 58 | .empty-state-polished-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 0%, rgba(91,110,232,0.08), transparent 70%); pointer-events: none; } |
| c63b860 | 59 | .empty-state-polished-card > * { position: relative; z-index: 1; } |
| 60 | .empty-state-polished-icon { display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 48px; line-height: 1; } | |
| 61 | .empty-state-polished-icon svg { display: block; } | |
| 62 | .empty-state-polished-title { font-size: 20px; font-weight: 700; letter-spacing: -0.015em; margin: 0 0 8px; color: var(--text); } | |
| 63 | .empty-state-polished-body { font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 440px; margin: 0 auto 20px; } | |
| 64 | .empty-state-polished-actions { display: inline-flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 4px; } | |
| 65 | .empty-state-polished-footer { margin-top: 16px; font-size: 12px; color: var(--text-muted); font-family: var(--font-mono); } | |
| 66 | `; |