108 lines
3.8 KiB
TypeScript
108 lines
3.8 KiB
TypeScript
import './Button.sass'
|
|
import { Show, Switch, Match, type JSXElement } from 'solid-js'
|
|
import { A } from '@solidjs/router'
|
|
import { Row } from '../index'
|
|
|
|
interface Props {
|
|
label?: string
|
|
to?: string
|
|
onClick?: () => void
|
|
edges?: 'curved' | 'rounded' | 'flat'
|
|
design?: 'bu-primary' | 'bu-link' | 'bu-info' | 'bu-success' | 'bu-warning' | 'bu-danger' | 'bu-dark' | 'bu-light' | 'bu-text' | 'bu-ghost' | 'bo-primary' | 'bo-secondary' | 'bo-success' | 'bo-danger' | 'bo-warning' | 'bo-info' | 'bo-light' | 'bo-dark' | 'bo-link'
|
|
submit?: boolean
|
|
newtab?: boolean
|
|
width?: number
|
|
wide?: boolean
|
|
icon?: (props: { size?: number }) => JSXElement
|
|
}
|
|
|
|
const getBorderRadius = (edge: Props['edges']) => {
|
|
switch (edge) {
|
|
case 'curved':
|
|
return 'border-radius: 6px'
|
|
case 'rounded':
|
|
return 'border-radius: 32px'
|
|
case 'flat':
|
|
return 'border-radius: 0'
|
|
default:
|
|
return 'border-radius: 0'
|
|
}
|
|
}
|
|
|
|
export default (props: Props) => {
|
|
const borderRadius = getBorderRadius(props.edges)
|
|
const Icon = props.icon
|
|
return (
|
|
<>
|
|
<Show when={props.to}>
|
|
<Switch>
|
|
<Match when={props.design}>
|
|
<A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
|
|
<button class={props.design} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
|
|
<Show when={props.icon}>
|
|
<span>{Icon && <Icon size={24} />}</span>
|
|
</Show>
|
|
{props.label || 'Click Me!'}
|
|
</button>
|
|
</A>
|
|
</Match>
|
|
<Match when={!props.design}>
|
|
<A href={props.to!} aria-label={props.label} target={props.newtab ? '_blank' : ''}>
|
|
<button class="button" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
|
|
<Show when={props.icon}>
|
|
<span>{Icon && <Icon size={24} />}</span>
|
|
</Show>
|
|
{props.label || 'Click Me!'}
|
|
</button>
|
|
</A>
|
|
</Match>
|
|
</Switch>
|
|
</Show>
|
|
|
|
<Show when={!props.to}>
|
|
<Switch>
|
|
<Match when={props.design}>
|
|
<Show when={props.submit}>
|
|
<button class={props.design} type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
|
|
<Show when={props.icon}>
|
|
<span>{Icon && <Icon size={24} />}</span>
|
|
</Show>
|
|
{props.label || 'Click Me!'}
|
|
</button>
|
|
</Show>
|
|
|
|
<Show when={!props.submit}>
|
|
<button class={props.design} onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
|
|
<Row gap={0.5}>
|
|
<Show when={props.icon}>
|
|
<span>{Icon && <Icon size={24} />}</span>
|
|
</Show>
|
|
{props.label || 'Click Me!'}
|
|
</Row>
|
|
</button>
|
|
</Show>
|
|
</Match>
|
|
<Match when={!props.design}>
|
|
<Show when={props.submit}>
|
|
<button class="button" type="submit" style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
|
|
<Show when={props.icon}>
|
|
<span>{Icon && <Icon size={24} />}</span>
|
|
</Show>
|
|
{props.label || 'Click Me!'}
|
|
</button>
|
|
</Show>
|
|
|
|
<Show when={!props.submit}>
|
|
<button class="button" onClick={props.onClick} style={`${borderRadius}; width: ${props.wide ? '100%' : props.width}`}>
|
|
<Show when={props.icon}>
|
|
<span>{Icon && <Icon size={24} />}</span>
|
|
</Show>
|
|
{props.label || 'Click Me!'}
|
|
</button>
|
|
</Show>
|
|
</Match>
|
|
</Switch>
|
|
</Show>
|
|
</>
|
|
)
|
|
}
|