diff options
Diffstat (limited to 'components/ui.tsx')
| -rw-r--r-- | components/ui.tsx | 415 |
1 files changed, 236 insertions, 179 deletions
diff --git a/components/ui.tsx b/components/ui.tsx index 9d532f8..c3f950b 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -1,9 +1,9 @@ -import { Component, CSSProperties, ReactNode, useState, useEffect } from "react"; +import { Component, CSSProperties, ReactNode, useEffect, useState } from 'react'; -import SearchIcon from '@material-ui/icons/Search'; -import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import CheckBoxIcon from '@material-ui/icons/CheckBox'; +import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'; import EditOutlinedIcon from '@material-ui/icons/EditOutlined'; +import SearchIcon from '@material-ui/icons/Search'; export function Vierkant(props: { href?: string; @@ -16,27 +16,31 @@ export function Vierkant(props: { 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} - id={props.id} - onClick={props.onclick} - >{props.children}</a> + 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} + id={props.id} + onClick={props.onclick} + > + {props.children} + </a>; } export function Button(props: { @@ -47,27 +51,34 @@ export function Button(props: { 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 - }}> - { - props.text ? - <span style={{ - fontWeight: 600, - userSelect: "none" - }}>{props.text}</span> - : undefined - } - { props.children } + 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, + }} + > + {props.text + ? <span + style={{ + fontWeight: 600, + userSelect: 'none', + }} + > + {props.text} + </span> + : undefined} + {props.children} </a>; } @@ -78,23 +89,33 @@ export function IconLabelButton(props: { style?: CSSProperties; href?: string; }) { - return <Button onclick={props.onclick} href={props.href} style={{ - display: "inline-block", - verticalAlign: "top", - padding: 8, - float: "right", - marginLeft: 12, - ...props.style - }}> + return <Button + onclick={props.onclick} + href={props.href} + style={{ + display: 'inline-block', + verticalAlign: 'top', + padding: 8, + float: 'right', + marginLeft: 12, + ...props.style, + }} + > {props.icon} - <span style={{ - display: "inline-block", - verticalAlign: "top", - fontWeight: 500, - marginLeft: 8, - marginTop: 3, marginBottom: 3, marginRight: 3 - }}>{props.text}</span> - </Button> + <span + style={{ + display: 'inline-block', + verticalAlign: 'top', + fontWeight: 500, + marginLeft: 8, + marginTop: 3, + marginBottom: 3, + marginRight: 3, + }} + > + {props.text} + </span> + </Button>; } export function Input(props: { @@ -104,61 +125,73 @@ export function Input(props: { id?: string; min?: number; max?: number; - value?: string|number; + value?: string | number; dark?: boolean; autocomplete?: string; autofocus?: boolean; }) { return <input - id={props.id} - type={props.type || "text"} - min={props.min} max={props.max} - placeholder={props.label} - spellCheck={false} - defaultValue={props.value ? String(props.value) : ""} - className={props.dark ? "dark" : "light"} - 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 - }}/> + id={props.id} + type={props.type || 'text'} + min={props.min} + max={props.max} + placeholder={props.label} + spellCheck={false} + defaultValue={props.value ? String(props.value) : ''} + className={props.dark ? 'dark' : 'light'} + 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%" - }}> - <Input label={props.label} style={{ - width: "calc(100% - 24px - 41px)", - borderTopRightRadius: 0, - borderBottomRightRadius: 0 - }}/> - <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%)" - }}/> +export function SearchBar(props: { label?: string; }) { + return <div + style={{ + marginTop: 24, + borderRadius: 8, + overflow: 'hidden', + width: '100%', + }} + > + <Input + label={props.label} + style={{ + width: 'calc(100% - 24px - 41px)', + borderTopRightRadius: 0, + borderBottomRightRadius: 0, + }} + /> + <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> - </div> + </div>; } export function CheckBox(props: { @@ -173,25 +206,28 @@ export function CheckBox(props: { useEffect(() => { if (gotDefaultState) return; setOn(props.state); - if (typeof props.state !== "undefined") setGotDefaultState(true); + if (typeof props.state !== 'undefined') setGotDefaultState(true); }); var toggle = () => { setOn(!on); props.onclick && props.onclick(!on); - } + }; - return <div onClick={toggle} id={props.id} className={on ? "on" : "off"} style={{ - ...props.style, - display: "inline-block", - cursor: "pointer" - }}> - { - on ? - <CheckBoxIcon/> : - <CheckBoxOutlineBlankIcon/> - } - </div> + return <div + onClick={toggle} + id={props.id} + className={on ? 'on' : 'off'} + style={{ + ...props.style, + display: 'inline-block', + cursor: 'pointer', + }} + > + {on + ? <CheckBoxIcon /> + : <CheckBoxOutlineBlankIcon />} + </div>; } export class ColorPicker extends Component<{ @@ -201,44 +237,53 @@ export class ColorPicker extends Component<{ color: string; dark: boolean; } = { - color: "#012345", - dark: true - } + color: '#012345', + dark: true, + }; 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 - }}> + 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> + <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> </div> - </Button> + </Button>; } } @@ -246,12 +291,21 @@ export function Tuitje(props: { style?: CSSProperties; rotation?: number; }) { - return <svg width="36" height="12" viewBox="0 0 36 12" fill="none" xmlns="http://www.w3.org/2000/svg" style={{ - ...props.style - }}> - <path d="M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z" - fill={ props.style?.background as string || "var(--background)" }/> - </svg> + return <svg + width='36' + height='12' + viewBox='0 0 36 12' + fill='none' + xmlns='http://www.w3.org/2000/svg' + style={{ + ...props.style, + }} + > + <path + d='M18 12C24 12 27 0 36 0L0 0C9 0 12 12 18 12Z' + fill={props.style?.background as string || 'var(--background)'} + /> + </svg>; } export function Bubble(props: { @@ -259,24 +313,27 @@ export function Bubble(props: { style?: CSSProperties; tuitjeStyle?: CSSProperties; }) { - 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 + 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, + }} + > {props.children} - <Tuitje style={{ - position: "absolute", - bottom: -12, - transform: "translate(-50%, 0%) rotate(0deg)", - ...props.tuitjeStyle - }}/> - </Vierkant> + <Tuitje + style={{ + position: 'absolute', + bottom: -12, + transform: 'translate(-50%, 0%) rotate(0deg)', + ...props.tuitjeStyle, + }} + /> + </Vierkant>; } - |