124 lines
3.1 KiB
TypeScript
124 lines
3.1 KiB
TypeScript
import { Match, Show, Switch } from "solid-js";
|
|
import "../styles/Button.sass";
|
|
|
|
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;
|
|
}
|
|
|
|
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);
|
|
|
|
return (
|
|
<>
|
|
<Show when={props.to}>
|
|
<Switch>
|
|
<Match when={props.design}>
|
|
<a
|
|
href={props.to}
|
|
aria-label={props.label}
|
|
rel="noopener"
|
|
target={props.newtab ? "_blank" : "_self"}
|
|
data-astro-prefetch
|
|
>
|
|
<button type="button" class={props.design} style={borderRadius}>
|
|
{props.label || "Click Me!"}
|
|
</button>
|
|
</a>
|
|
</Match>
|
|
<Match when={!props.design}>
|
|
<a
|
|
href={props.to}
|
|
aria-label={props.label}
|
|
rel="noopener"
|
|
target={props.newtab ? "_blank" : "_self"}
|
|
data-astro-prefetch
|
|
>
|
|
<button type="button" class="button" style={borderRadius}>
|
|
{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}>
|
|
{props.label || "Click Me!"}
|
|
</button>
|
|
</Show>
|
|
|
|
<Show when={!props.submit}>
|
|
<button
|
|
type="button"
|
|
class={props.design}
|
|
onClick={props.onClick}
|
|
style={borderRadius}
|
|
>
|
|
{props.label || "Click Me!"}
|
|
</button>
|
|
</Show>
|
|
</Match>
|
|
<Match when={!props.design}>
|
|
<Show when={props.submit}>
|
|
<button class="button" type="submit" style={borderRadius}>
|
|
{props.label || "Click Me!"}
|
|
</button>
|
|
</Show>
|
|
|
|
<Show when={!props.submit}>
|
|
<button
|
|
type="button"
|
|
class="button"
|
|
onClick={props.onClick}
|
|
style={borderRadius}
|
|
>
|
|
{props.label || "Click Me!"}
|
|
</button>
|
|
</Show>
|
|
</Match>
|
|
</Switch>
|
|
</Show>
|
|
</>
|
|
);
|
|
};
|