valknarandClaude Sonnet 5
e493a12e68
Next.js app that plays real .vpx tables via @valknar/vpinball-wasm (WebAssembly Visual Pinball). Demo mode with the bundled default table, drag-and-drop custom table upload, a cabinet-styled UI with a coin-door HUD (fullscreen/stats/info/eject), a custom 404 page, PWA support (hand-rolled service worker), and a static Docker Compose deployment behind nginx. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_012hQoM3jJT1Lx7CMTciMzvD
23 lines
972 B
TypeScript
23 lines
972 B
TypeScript
import type { ButtonHTMLAttributes } from "react";
|
|
|
|
export type ButtonVariant = "primary" | "outline" | "quiet";
|
|
|
|
const variantClasses: Record<ButtonVariant, string> = {
|
|
primary:
|
|
"border-2 border-marquee bg-marquee/10 text-marquee shadow-[0_0_24px_rgba(255,122,41,0.35)] hover:bg-marquee/20",
|
|
outline: "border-2 border-chrome/50 text-paper hover:border-arc hover:text-arc",
|
|
quiet: "border border-transparent text-chrome hover:text-paper",
|
|
};
|
|
|
|
export function buttonClassName(variant: ButtonVariant = "primary", className = ""): string {
|
|
return `inline-block rounded-full px-6 py-3 font-display text-lg tracking-wide transition ${variantClasses[variant]} ${className}`;
|
|
}
|
|
|
|
export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
|
variant?: ButtonVariant;
|
|
}
|
|
|
|
export default function Button({ variant = "primary", className = "", ...props }: ButtonProps) {
|
|
return <button className={buttonClassName(variant, className)} {...props} />;
|
|
}
|