diff options
Diffstat (limited to 'components')
-rw-r--r-- | components/ui.tsx | 131 |
1 files changed, 24 insertions, 107 deletions
diff --git a/components/ui.tsx b/components/ui.tsx index 89e8ffe..f939456 100644 --- a/components/ui.tsx +++ b/components/ui.tsx @@ -27,10 +27,9 @@ export function Vierkant(props: { export function Button(props: { text?: string; children?: ReactNode; - style?: CSSProperties; href?: string; className?: string; - onclick?: (() => void); + onclick?: () => void; id?: string; }) { return <a @@ -52,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>; @@ -186,110 +170,43 @@ 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)'} + fill='var(--background)' /> </svg>; } export function Bubble(props: { children?: ReactNode; - 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 className="bubble posabs center drop-2"> {props.children} - <Tuitje - style={{ - position: 'absolute', - bottom: -12, - transform: 'translate(-50%, 0%) rotate(0deg)', - ...props.tuitjeStyle, - }} - /> + <Tuitje /> </Vierkant>; } |