mirror of
https://github.com/revoltchat/revite.git
synced 2024-09-21 02:27:07 -04:00
60 lines
2.1 KiB
TypeScript
60 lines
2.1 KiB
TypeScript
|
import styled, { createGlobalStyle } from 'styled-components';
|
||
|
|
import { useState } from 'preact/hooks';
|
||
|
|
|
||
|
|
import { Button } from './components/ui/Button';
|
||
|
|
import { Banner } from './components/ui/Banner';
|
||
|
|
import { Checkbox } from './components/ui/Checkbox';
|
||
|
|
import { ComboBox } from './components/ui/ComboBox';
|
||
|
|
import { InputBox } from './components/ui/InputBox';
|
||
|
|
|
||
|
|
// ! TEMP START
|
||
|
|
let a = {"light":false,"accent":"#FD6671","background":"#191919","foreground":"#F6F6F6","block":"#2D2D2D","message-box":"#363636","mention":"rgba(251, 255, 0, 0.06)","success":"#65E572","warning":"#FAA352","error":"#F06464","hover":"rgba(0, 0, 0, 0.1)","sidebar-active":"#FD6671","scrollbar-thumb":"#CA525A","scrollbar-track":"transparent","primary-background":"#242424","primary-header":"#363636","secondary-background":"#1E1E1E","secondary-foreground":"#C8C8C8","secondary-header":"#2D2D2D","tertiary-background":"#4D4D4D","tertiary-foreground":"#848484","status-online":"#3ABF7E","status-away":"#F39F00","status-busy":"#F84848","status-streaming":"#977EFF","status-invisible":"#A5A5A5"};
|
||
|
|
|
||
|
|
const GlobalTheme = createGlobalStyle`
|
||
|
|
:root {
|
||
|
|
${
|
||
|
|
Object.keys(a)
|
||
|
|
.map(key => {
|
||
|
|
return `--${key}: ${(a as any)[key]};`;
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
`;
|
||
|
|
// ! TEMP END
|
||
|
|
|
||
|
|
export const UIDemo = styled.div`
|
||
|
|
gap: 12px;
|
||
|
|
padding: 12px;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
align-items: flex-start;
|
||
|
|
`;
|
||
|
|
|
||
|
|
export function App() {
|
||
|
|
let [checked, setChecked] = useState(false);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<GlobalTheme />
|
||
|
|
<UIDemo>
|
||
|
|
<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 />
|
||
|
|
</UIDemo>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|