65 lines
3.8 KiB
HTML
65 lines
3.8 KiB
HTML
<!-- @dsCard group="Components" viewport="700x330" name="Forms" subtitle="Button, IconButton, Input, Select, Switch, Checkbox" -->
|
|
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link href="https://fonts.googleapis.com/css2?family=Geist:wght@300..700&family=Geist+Mono:wght@400..600&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="../../styles.css">
|
|
<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/lucide@0.544.0/dist/umd/lucide.min.js"></script>
|
|
<script src="../../_ds_bundle.js"></script>
|
|
<style>
|
|
body { margin: 0; background: var(--surface-app); color: var(--text-primary); font-family: var(--font-sans); }
|
|
#root { padding: 22px 24px; }
|
|
.row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
|
|
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; max-width: 620px; }
|
|
.lbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-disabled); margin-bottom: 10px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="root"></div>
|
|
<script type="text/babel">
|
|
const { Button, IconButton, Input, Select, Switch, Checkbox } = window.ChicoryTVDesignSystem_eb3b61;
|
|
const Ico = ({ n, s = 16 }) => { const r = React.useRef(null); React.useEffect(() => { if (r.current) r.current.innerHTML = ""; const el = window.lucide.createElement(window.lucide.icons[n]); el.setAttribute("width", s); el.setAttribute("height", s); r.current.appendChild(el); }); return <span ref={r} style={{ display: "inline-flex" }} />; };
|
|
|
|
function Demo() {
|
|
const [sw, setSw] = React.useState(true);
|
|
const [cb, setCb] = React.useState(true);
|
|
return (
|
|
<div>
|
|
<div className="row">
|
|
<Button variant="primary" startIcon={<Ico n="Plus" />}>Add Channel</Button>
|
|
<Button variant="secondary" startIcon={<Ico n="Pencil" />}>Edit Numbers</Button>
|
|
<Button variant="ghost">Cancel</Button>
|
|
<Button variant="danger" startIcon={<Ico n="Trash2" />}>Delete</Button>
|
|
<Button variant="primary" loading>Saving</Button>
|
|
<Button variant="primary" disabled>Disabled</Button>
|
|
</div>
|
|
<div className="row">
|
|
<IconButton title="Preview" variant="solid"><Ico n="Play" /></IconButton>
|
|
<IconButton title="Edit"><Ico n="Pencil" /></IconButton>
|
|
<IconButton title="Refresh"><Ico n="RefreshCw" /></IconButton>
|
|
<IconButton title="Info"><Ico n="Info" /></IconButton>
|
|
<IconButton title="Delete"><Ico n="Trash2" /></IconButton>
|
|
<IconButton title="Disabled" disabled><Ico n="Play" /></IconButton>
|
|
<span style={{ width: 16 }} />
|
|
<Switch checked={sw} onChange={setSw} label="Show disabled" />
|
|
<Checkbox checked={cb} onChange={setCb} label="In EPG" />
|
|
</div>
|
|
<div className="grid">
|
|
<Input label="Channel name" value="Retro Cartoons" onChange={() => {}} />
|
|
<Select label="Streaming mode" value="HLS Segmenter" onChange={() => {}} options={["HLS Segmenter", "HLS Direct", "MPEG-TS"]} />
|
|
<Input leadingIcon={<Ico n="Search" />} placeholder="Search channels…" />
|
|
<Input label="Channel number" value="5.1" error="Already in use" onChange={() => {}} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
ReactDOM.createRoot(document.getElementById("root")).render(<Demo />);
|
|
</script>
|
|
</body>
|
|
</html>
|