aboutsummaryrefslogtreecommitdiff
path: root/components/ui.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'components/ui.tsx')
-rw-r--r--components/ui.tsx239
1 files changed, 38 insertions, 201 deletions
diff --git a/components/ui.tsx b/components/ui.tsx
index c3f950b..7474240 100644
--- a/components/ui.tsx
+++ b/components/ui.tsx
@@ -1,4 +1,4 @@
-import { Component, CSSProperties, ReactNode, useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
@@ -9,33 +9,14 @@ export function Vierkant(props: {
href?: string;
width?: string;
height?: string;
- style?: CSSProperties;
children?: ReactNode;
className?: string;
id?: string;
- fullwidth?: boolean;
onclick?: () => void;
}) {
return <a
- style={{
- padding: 24,
- backgroundColor: 'var(--background)',
- borderRadius: 8,
- color: 'var(--text)',
- margin: 6, // geen margin collapse = 12px marge
- display: 'inline-block',
- position: 'relative',
- boxSizing: 'border-box',
- width: props.width
- ? props.width
- : props.fullwidth
- ? 'calc(100% - 12px)'
- : undefined,
- height: props.height ? props.height : undefined,
- ...props.style,
- }}
href={props.href}
- className={props.className}
+ className={['round-l', 'vierkant', props.className].join(' ')}
id={props.id}
onClick={props.onclick}
>
@@ -46,35 +27,19 @@ export function Vierkant(props: {
export function Button(props: {
text?: string;
children?: ReactNode;
- style?: CSSProperties;
href?: string;
- onclick?: (() => void);
+ className?: string;
+ onclick?: () => void;
id?: string;
}) {
return <a
onClick={props.onclick}
href={props.href}
id={props.id}
- style={{
- padding: props.text ? 8 : 16,
- textAlign: props.text ? 'center' : 'left',
- borderRadius: 8,
- backgroundColor: 'var(--disk-a)',
- cursor: 'pointer',
- position: 'relative',
- textDecoration: 'none',
- display: 'block',
- userSelect: 'none',
- ...props.style,
- }}
+ className={'button pad-s round-t ' + props.className}
>
{props.text
- ? <span
- style={{
- fontWeight: 600,
- userSelect: 'none',
- }}
- >
+ ? <span>
{props.text}
</span>
: undefined}
@@ -86,33 +51,18 @@ export function IconLabelButton(props: {
text: string;
icon: ReactNode;
onclick?: () => void;
- style?: CSSProperties;
href?: string;
+ className?: string;
}) {
return <Button
onclick={props.onclick}
href={props.href}
- style={{
- display: 'inline-block',
- verticalAlign: 'top',
- padding: 8,
- float: 'right',
- marginLeft: 12,
- ...props.style,
- }}
+ className={'iconlabel dispinbl valigntop floatr' + ' ' + props.className}
>
- {props.icon}
- <span
- style={{
- display: 'inline-block',
- verticalAlign: 'top',
- fontWeight: 500,
- marginLeft: 8,
- marginTop: 3,
- marginBottom: 3,
- marginRight: 3,
- }}
- >
+ <div className='dispinbl icon'>
+ {props.icon}
+ </div>
+ <span className='dispinbl valigntop label'>
{props.text}
</span>
</Button>;
@@ -120,7 +70,6 @@ export function IconLabelButton(props: {
export function Input(props: {
label?: string;
- style?: CSSProperties;
type?: string;
id?: string;
min?: number;
@@ -129,6 +78,7 @@ export function Input(props: {
dark?: boolean;
autocomplete?: string;
autofocus?: boolean;
+ className?: string;
}) {
return <input
id={props.id}
@@ -138,65 +88,26 @@ export function Input(props: {
placeholder={props.label}
spellCheck={false}
defaultValue={props.value ? String(props.value) : ''}
- className={props.dark ? 'dark' : 'light'}
+ className={'input' + ' ' + (props.dark ? 'dark' : 'light') + ' ' + props.className}
autoComplete={props.autocomplete}
autoFocus={props.autofocus}
- style={{
- padding: 12,
- border: 0,
- width: 'calc(100% - 24px)',
- fontSize: 14,
- backgroundColor: 'var(--page-background)',
- color: 'var(--text-alt)',
- borderRadius: 8,
- fontFamily: 'Inter',
- ...props.style,
- }}
/>;
}
export function SearchBar(props: { label?: string; }) {
- return <div
- style={{
- marginTop: 24,
- borderRadius: 8,
- overflow: 'hidden',
- width: '100%',
- }}
- >
+ return <div className='searchBar round-t fullwidth'>
<Input
label={props.label}
- style={{
- width: 'calc(100% - 24px - 41px)',
- borderTopRightRadius: 0,
- borderBottomRightRadius: 0,
- }}
+ className='pad-m bg-700'
/>
- <div
- style={{
- width: 41,
- height: 41,
- backgroundColor: 'var(--disk-a)',
- display: 'inline-block',
- verticalAlign: 'top',
- position: 'relative',
- }}
- >
- <SearchIcon
- style={{
- position: 'absolute',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- }}
- />
- </div>
+ <Button className='dispinbl valigntop'>
+ <SearchIcon className='icon' />
+ </Button>
</div>;
}
export function CheckBox(props: {
state?: boolean;
- style?: CSSProperties;
id?: string;
onclick?: (state: boolean) => void;
}) {
@@ -217,12 +128,7 @@ export function CheckBox(props: {
return <div
onClick={toggle}
id={props.id}
- className={on ? 'on' : 'off'}
- style={{
- ...props.style,
- display: 'inline-block',
- cursor: 'pointer',
- }}
+ className={'checkbox dispinbl ' + (on ? 'on' : 'off')}
>
{on
? <CheckBoxIcon />
@@ -230,110 +136,41 @@ export function CheckBox(props: {
</div>;
}
-export class ColorPicker extends Component<{
- style?: CSSProperties;
-}> {
- state: {
- color: string;
- dark: boolean;
- } = {
- color: '#012345',
- dark: true,
- };
+export function ColorPicker() {
+ var [dark, setDark] = useState(false);
+ var [color, setColor] = useState('#012345');
- render() {
- return <Button
- style={{
- display: 'inline-block',
- verticalAlign: 'top',
- padding: 6,
- float: 'right',
- marginLeft: 12,
- color: this.state.dark ? 'var(--text)' : 'var(--text-alt)',
- borderColor: this.state.dark ? 'var(--text)' : 'var(--text-alt)',
- borderWidth: 2,
- borderStyle: 'solid',
- backgroundColor: this.state.color,
- ...this.props.style,
- }}
- >
- <div>
- <EditOutlinedIcon />
- <div
- style={{
- width: 150,
- height: 24,
- display: 'inline-block',
- textAlign: 'center',
- verticalAlign: 'top',
- position: 'relative',
- }}
- >
- <span
- style={{
- position: 'absolute',
- top: '50%',
- left: '50%',
- transform: 'translate(-50%, -50%)',
- fontWeight: 600,
- fontFeatureSettings: '"tnum", "ss01"',
- }}
- >
- {this.state.color}
- </span>
- </div>
+ return <Button className='colorpicker dispinbl valigntop pad-s floatr'>
+ <div>
+ <EditOutlinedIcon />
+ <div className='labelwrapper valigntop dispinbl center posrel'>
+ <span className='label posabs'>
+ {color}
+ </span>
</div>
- </Button>;
- }
+ </div>
+ </Button>;
}
-export function Tuitje(props: {
- style?: CSSProperties;
- rotation?: number;
-}) {
+export function Tuitje() {
return <svg
width='36'
height='12'
viewBox='0 0 36 12'
fill='none'
xmlns='http://www.w3.org/2000/svg'
- style={{
- ...props.style,
- }}
+ className='tuitje posabs'
>
- <path
- d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z'
- fill={props.style?.background as string || 'var(--background)'}
- />
+ <path d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z' />
</svg>;
}
export function Bubble(props: {
children?: ReactNode;
- style?: CSSProperties;
- tuitjeStyle?: CSSProperties;
+ className?: string;
}) {
- return <Vierkant
- style={{
- position: 'absolute',
- textAlign: 'center',
- margin: 0,
- overflow: 'visible',
- left: '50%',
- top: -24,
- transform: 'translateY(-100%) translateX(-50%)',
- boxShadow: '0 8px 32px rgba(0, 0, 0, 0.3)',
- ...props.style,
- }}
- >
+ return <Vierkant className={'bubble posabs center drop-2 ' + props.className}>
{props.children}
- <Tuitje
- style={{
- position: 'absolute',
- bottom: -12,
- transform: 'translate(-50%, 0%) rotate(0deg)',
- ...props.tuitjeStyle,
- }}
- />
+ <Tuitje />
</Vierkant>;
}