abner/for-legacy-web
1
0
Fork 1
mirror of https://github.com/stoatchat/for-legacy-web.git synced 2026-03-06 17:11:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add category editor to servers.

Browse Source
This commit is contained in:
Paul
2021-07-24 19:39:41 +01:00
parent 3d6d95195e
commit dd4edea933
10 changed files with 242 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
ui/ui.tsx
View File

@@ -1,41 +1,49 @@
import { useState } from 'preact/hooks';
import styled from 'styled-components';
import '../src/styles/index.scss'
import { render } from 'preact'
import styled from "styled-components";
import Theme from '../src/context/Theme';
import "../src/styles/index.scss";
import { render } from "preact";
import { useState } from "preact/hooks";
import Theme from "../src/context/Theme";
import Banner from "../src/components/ui/Banner";
import Button from "../src/components/ui/Button";
import Checkbox from "../src/components/ui/Checkbox";
import ColourSwatches from "../src/components/ui/ColourSwatches";
import ComboBox from "../src/components/ui/ComboBox";
import InputBox from "../src/components/ui/InputBox";
import Overline from "../src/components/ui/Overline";
import Radio from "../src/components/ui/Radio";
import Tip from "../src/components/ui/Tip";
export const UIDemo = styled.div`
gap: 12px;
padding: 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
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');
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>
<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>
<Checkbox
checked={checked}
onChange={setChecked}
description="ok gamer">
Do you want thing??
</Checkbox>
<ComboBox>
<option>Select an option.</option>
<option>1</option>
@@ -46,24 +54,35 @@ export function UI() {
<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>
<ColourSwatches value={colour} onChange={(v) => setColour(v)} />
<Tip hideSeparator>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>
<Overline type="subtle" error="with error">
Subtle overline
</Overline>
</>
)
);
}
render(<>
<Theme>
<UIDemo>
<UI />
</UIDemo>
</Theme>
</>, document.getElementById('app')!)
render(
<>
<Theme>
<UIDemo>
<UI />
</UIDemo>
</Theme>
</>,
document.getElementById("app")!,
);