Move UI into its own page.

2026-03-07 01:15:28 +00:00 · 2021-06-18 15:35:35 +01:00
parent 58821476e6
commit 8bb6cd456b
15 changed files with 201 additions and 163 deletions
--- a/ui/index.html
+++ b/ui/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>REVOLT UI</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/ui/ui.tsx"></script>
+  </body>
+</html>
--- a/ui/ui.tsx
+++ b/ui/ui.tsx
@@ -0,0 +1,68 @@
+import { useState } from 'preact/hooks';
+import styled from 'styled-components';
+import '../src/styles/index.scss'
+import { render } from 'preact'
+
+import { GlobalTheme } from '../src/context/Theme';
+
+export const UIDemo = styled.div`
+	gap: 12px;
+	padding: 12px;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+`;
+
+import Button from '../src/components/ui/Button';
+import Banner from '../src/components/ui/Banner';
+import Checkbox from '../src/components/ui/Checkbox';
+import ComboBox from '../src/components/ui/ComboBox';
+import InputBox from '../src/components/ui/InputBox';
+import ColourSwatches from '../src/components/ui/ColourSwatches';
+import Tip from '../src/components/ui/Tip';
+import Radio from '../src/components/ui/Radio';
+import Overline from '../src/components/ui/Overline';
+
+export function UI() {
+	let [checked, setChecked] = useState(false);
+	let [colour, setColour] = useState('#FD6671');
+	let [selected, setSelected] = useState<'a' | 'b' | 'c'>('a');
+
+    return (
+        <>
+            <Button>Button (normal)</Button>
+            <Button contrast>Button (contrast)</Button>
+            <Button error>Button (error)</Button>
+            <Button contrast error>Button (contrast + error)</Button>
+            <Banner>I am a banner!</Banner>
+            <Checkbox checked={checked} onChange={setChecked} description="ok gamer">Do you want thing??</Checkbox>
+            <ComboBox>
+                <option>Select an option.</option>
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+            </ComboBox>
+            <InputBox placeholder="Normal input box..." />
+            <InputBox placeholder="Contrast input box..." contrast />
+            <InputBox value="Input box with value" />
+            <InputBox value="Contrast with value" contrast />
+            <ColourSwatches value={colour} onChange={v => setColour(v)} />
+            <Tip>I am a tip! I provide valuable information.</Tip>
+            <Radio checked={selected === 'a'} onSelect={() => setSelected('a')}>First option</Radio>
+            <Radio checked={selected === 'b'} onSelect={() => setSelected('b')}>Second option</Radio>
+            <Radio checked={selected === 'c'} onSelect={() => setSelected('c')}>Last option</Radio>
+            <Overline>Normal overline</Overline>
+            <Overline type="subtle">Subtle overline</Overline>
+            <Overline type="error">Error overline</Overline>
+            <Overline error="with error">Normal overline</Overline>
+            <Overline type="subtle" error="with error">Subtle overline</Overline>
+        </>
+    )
+}
+
+render(<>
+    <GlobalTheme />
+    <UIDemo>
+        <UI />
+    </UIDemo>
+</>, document.getElementById('app')!)