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.

empty-state.tsxBlame66 lines · 1 contributor

Normal view Raw

c63b860Claude	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 {
	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="#8c6dff"/><stop offset="1" stop-color="#36c5d6"/></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>`;
	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; }
	58	.empty-state-polished-card::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 60% at 50% 0%, rgba(140,109,255,0.08), transparent 70%); pointer-events: none; }
	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	`;