80 lines
3.2 KiB
TypeScript
80 lines
3.2 KiB
TypeScript
// Every button style and state, in one theme scope. Used by the dev story page
|
|
// (src/app/dev/buttons) and the button tests.
|
|
import type { CSSProperties, ReactNode } from "react";
|
|
import type { Theme } from "@/lib/theme";
|
|
import { DepthButton, FlipButton, GrowButton, IconButton, SendIcon, SparkleButton, SweepButton } from "./Buttons";
|
|
|
|
const scope: CSSProperties = {
|
|
background: "var(--bg)",
|
|
color: "var(--ink)",
|
|
padding: "32px 28px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: 28,
|
|
};
|
|
const row: CSSProperties = { display: "flex", flexWrap: "wrap", alignItems: "center", gap: 14 };
|
|
const heading: CSSProperties = { margin: "0 0 10px", fontSize: 12, fontWeight: 700, letterSpacing: ".12em", textTransform: "uppercase", color: "var(--ink-3)" };
|
|
|
|
function Section({ title, children }: { title: string; children: ReactNode }) {
|
|
return (
|
|
<section>
|
|
<h2 style={heading}>{title}</h2>
|
|
<div style={row}>{children}</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
const FlameIcon = (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.7} strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M12 21c4 0 7-2.8 7-6.8 0-4.5-4-6.7-5-11.2-2.3 1.7-3.5 4-3.2 6.5C9.5 9 8.6 8 8.3 6.6 6.3 8.5 5 10.9 5 14.2 5 18.2 8 21 12 21z" />
|
|
</svg>
|
|
);
|
|
const TrashIcon = (
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.8} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
|
|
<path d="M4 7h16M9 7V4.5h6V7M6.5 7l1 13h9l1-13" />
|
|
</svg>
|
|
);
|
|
const PlayIcon = (
|
|
<svg viewBox="0 0 24 24" aria-hidden="true">
|
|
<path d="M8 5.5v13l11-6.5z" fill="currentColor" />
|
|
</svg>
|
|
);
|
|
|
|
export function ButtonGallery({ theme }: { theme: Theme }) {
|
|
return (
|
|
<div data-theme={theme} style={scope} aria-label={`Buttons, ${theme} theme`} role="region">
|
|
<h1 className="type-title type-title-strong" style={{ margin: 0 }}>
|
|
{theme === "dark" ? "Dark" : "Light"} theme
|
|
</h1>
|
|
<Section title="Flip reveal: ready, disabled, posting">
|
|
<FlipButton state="ready" type="button" />
|
|
<FlipButton state="disabled" type="button" />
|
|
<FlipButton state="posting" type="button" />
|
|
</Section>
|
|
<Section title="Circle expand">
|
|
<GrowButton label="3 new posts" />
|
|
</Section>
|
|
<Section title="Outline fill sweep">
|
|
<SweepButton label="Business" selected />
|
|
<SweepButton label="Media" selected={false} />
|
|
<SweepButton label="Cancel" />
|
|
</Section>
|
|
<Section title="Soft depth, rising liquid">
|
|
<div style={{ width: 280 }}>
|
|
<DepthButton label="Trending minnects" sublabel="What people are watching" icon={FlameIcon} />
|
|
</div>
|
|
</Section>
|
|
<Section title="Sparkle glow: sign in, mobile new post">
|
|
<SparkleButton label="Sign in" />
|
|
<SparkleButton variant="fab" label="New post" />
|
|
</Section>
|
|
<Section title="Glossy crimson icon button">
|
|
<IconButton label="Send comment" icon={<SendIcon />} />
|
|
<IconButton label="Delete post" icon={TrashIcon} size="sm" />
|
|
<IconButton label="Play video" icon={PlayIcon} shape="round" />
|
|
<IconButton label="Send comment (disabled)" icon={<SendIcon />} disabled />
|
|
</Section>
|
|
</div>
|
|
);
|
|
}
|