1import { useState } from "react";
2import { MarkdownPage } from "./components/MarkdownPage";
3import { Demo } from "./components/Demo";
5type Tab = "about" | "demo";
7export const App = () => {
8 const [tab, setTab] = useState<Tab>("about");
10 return (
11 <div
12 style={{
13 maxWidth: 980,
14 margin: "0 auto",
15 padding: "0 20px 60px",
16 fontFamily:
17 "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
18 color: "#1f2328",
19 }}
20 >
21 <nav
22 style={{
23 position: "sticky",
24 top: 0,
25 background: "#fff",
26 borderBottom: "1px solid #e2e2e2",
27 padding: "12px 0",
28 display: "flex",
29 gap: 8,
30 zIndex: 10,
31 }}
32 >
33 <TabButton active={tab === "about"} onClick={() => setTab("about")}>
34 About
35 </TabButton>
36 <TabButton active={tab === "demo"} onClick={() => setTab("demo")}>
37 Live demo
38 </TabButton>
39 </nav>
40 <div style={{ paddingTop: 20 }}>
41 {tab === "about" ? <MarkdownPage /> : <Demo />}
42 </div>
43 </div>
44 );
45};
47const TabButton = ({
48 active,
49 onClick,
50 children,
51}: {
52 active: boolean;
53 onClick: () => void;
54 children: React.ReactNode;
55}) => (
56 <button
57 onClick={onClick}
58 style={{
59 border: "none",
60 background: active ? "#1f6feb" : "transparent",
61 color: active ? "#fff" : "#1f6feb",
62 padding: "6px 14px",
63 borderRadius: 6,
64 cursor: "pointer",
65 fontSize: 14,
66 fontWeight: 600,
67 }}
68 >
69 {children}
70 </button>
71);