From 7fe28e76f2ad4de5cdf4e38bad539ea24557c522 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Mon, 6 Jan 2025 10:16:40 +0100
Subject: [PATCH] UI: init badge component

---
 .../app/src/components/badge/index.tsx        | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 pkgs/webview-ui/app/src/components/badge/index.tsx

diff --git a/pkgs/webview-ui/app/src/components/badge/index.tsx b/pkgs/webview-ui/app/src/components/badge/index.tsx
new file mode 100644
index 000000000..451654106
--- /dev/null
+++ b/pkgs/webview-ui/app/src/components/badge/index.tsx
@@ -0,0 +1,39 @@
+import { JSX } from "solid-js";
+import cx from "classnames";
+import Icon, { IconVariant } from "../icon";
+import { Typography } from "../Typography";
+
+interface BadgeProps {
+  color: keyof typeof colorMap;
+  children: JSX.Element;
+  icon?: IconVariant;
+  class?: string;
+}
+
+const colorMap = {
+  primary: cx("bg-primary-800 text-primary-100"),
+  secondary: cx("bg-secondary-800 text-secondary-100"),
+  blue: "bg-blue-100 text-blue-800",
+  gray: "bg-gray-100 text-gray-800",
+  green: "bg-green-100 text-green-800",
+  orange: "bg-orange-100 text-orange-800",
+  red: "bg-red-100 text-red-800",
+  yellow: "bg-yellow-100 text-yellow-800",
+};
+
+export const Badge = (props: BadgeProps) => {
+  return (
+    <div
+      class={cx(
+        "flex px-4 py-2 rounded-sm justify-center items-center gap-1",
+        colorMap[props.color],
+        props.class,
+      )}
+    >
+      {props.icon && <Icon icon={props.icon} class="size-4" />}
+      <Typography hierarchy="label" size="default" color="inherit">
+        {props.children}
+      </Typography>
+    </div>
+  );
+};