Initial commit

fwt/components/ModalButton.tsx

@@ -0,0 +1,44 @@
+import '../styles/Button.sass'
+import { Show, Switch, Match } from 'solid-js'
+
+interface Props {
+  label?: 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'
+}
+
+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 (
+    <>
+      <Switch>
+        <Match when={props.design}>
+          <button class={props.design} onClick={props.onClick} style={borderRadius}>
+            {props.label || 'Click Me!'}
+          </button>
+        </Match>
+
+        <Match when={!props.design}>
+          <button class="button" onClick={props.onClick} style={borderRadius}>
+            {props.label || 'Click Me!'}
+          </button>
+        </Match>
+      </Switch>
+    </>
+  )
+}