initial commit

src/components/SSChip.tsx

@@ -0,0 +1,62 @@
+import { JSX, JSXElement } from 'solid-js';
+import { COLORS } from 'src/colors';
+
+type SSChipBaseProps = {
+  children: JSXElement;
+  color?: (typeof COLORS)[number];
+  class?: string;
+  style?: string;
+};
+
+type SSChipClickableProps = {
+  onclick: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent>;
+  ondismiss?: never;
+};
+
+type SSChipDismissableProps = {
+  ondismiss: () => void;
+  onclick?: never;
+};
+
+type SSChipDisplayProps = {
+  onclick?: never;
+  ondismiss?: never;
+};
+
+type SSChipProps = SSChipBaseProps &
+  (SSChipClickableProps | SSChipDismissableProps | SSChipDisplayProps);
+
+function SSChip(props: SSChipProps) {
+  const commonClass = `ss_chip ss_chip--${props.color ?? 'blue'} ${props.class ?? ''}`;
+
+  if ('onclick' in props && props.onclick) {
+    return (
+      <button
+        type="button"
+        class={`${commonClass} ss_chip--clickable`}
+        style={props.style}
+        onclick={props.onclick}
+      >
+        <span class="ss_chip__label">{props.children}</span>
+      </button>
+    );
+  }
+
+  return (
+    <div class={commonClass} style={props.style}>
+      <span class="ss_chip__label">{props.children}</span>
+      {'ondismiss' in props && props.ondismiss && (
+        <button
+          type="button"
+          class="ss_chip__dismiss"
+          aria-label="Entfernen"
+          onclick={props.ondismiss}
+        >
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-x"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M18 6l-12 12" /><path d="M6 6l12 12" /></svg>
+        </button>
+      )}
+    </div>
+  );
+}
+
+export { SSChip };