StatBlock
Single-stat display with a large pixel-font value in neon cyan and a label below. Wrapped in a pixel-border container for the arcade aesthetic.
<StatBlock stat={{ value: "42,000", label: "HIGH SCORE" }} /><StatBlock stat={{ value: "42,000", label: "HIGH SCORE" }} /><StatBlock stat={{ value: "128", label: "LEVELS CLEARED" }} /><StatBlock stat={{ value: "99", label: "LIVES LEFT" }} />import { cn } from '@/lib/utils'
import type { StatItem } from '@/types'
import { Text } from '@/components/ui/Text'
interface StatBlockProps {
stat: StatItem
className?: string
}
export function StatBlock({ stat, className }: StatBlockProps): React.JSX.Element {
return (
<div className={cn('pixel-border p-4 text-center', className)}>
<div className="font-pixel text-2xl neon-cyan mb-2">{stat.value}</div>
<Text variant="label">
{stat.label}
</Text>
</div>
)
}
Button
Arcade-styled button with neon green, magenta, cyan, and yellow variants in three sizes. Renders as a Next.js Link when an href is provided.
Badge
Neon-glow badge with magenta, cyan, yellow, and green color variants. Used for category tags and status labels in the arcade aesthetic.
Card
Game-card component with neon-colored icon, tag, title, description, and a five-star rating display. Supports a "coming soon" locked overlay state.
PixelCharacter
SVG pixel-art sprite with three variants: hero (neon green), ghost (magenta), and coin (yellow). Supports a CSS float animation and configurable size.
ScoreBoard
High-scores leaderboard that renders as a table on desktop and as stacked cards on mobile. Highlights ranks 1-3 with distinct neon color classes.
SectionHeader
Section heading block with a numbered label, a two-part heading where the last word is accented in neon, and an optional subtitle. Supports left or center alignment.
Text
Polymorphic text primitive with body, caption, label, and code variants styled for the RETRO dark arcade palette.