From 7e8f1da220f0ccc8c4b5602f6872371448930933 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Mon, 6 Jan 2025 10:18:50 +0100
Subject: [PATCH] UI: init components {group,section,sectionHeader}

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

diff --git a/pkgs/webview-ui/app/src/components/group/index.tsx b/pkgs/webview-ui/app/src/components/group/index.tsx
new file mode 100644
index 000000000..ef04e66f0
--- /dev/null
+++ b/pkgs/webview-ui/app/src/components/group/index.tsx
@@ -0,0 +1,60 @@
+import cx from "classnames";
+import { JSX } from "solid-js";
+import Icon, { IconVariant } from "../icon";
+
+interface GroupProps {
+  children: JSX.Element;
+}
+
+export const Group = (props: GroupProps) => (
+  <div class="flex flex-col  gap-8 rounded-md border px-4 py-5 bg-def-2 border-def-2">
+    {props.children}
+  </div>
+);
+
+export type SectionVariant = "attention" | "danger";
+
+interface SectionHeaderProps {
+  variant: SectionVariant;
+  headline: JSX.Element;
+}
+const variantColorsMap: Record<SectionVariant, string> = {
+  attention: cx("bg-[#9BD8F2] fg-def-1"),
+  danger: cx("bg-semantic-2 fg-semantic-2"),
+};
+
+const variantIconColorsMap: Record<SectionVariant, string> = {
+  attention: cx("fg-def-1"),
+  danger: cx("fg-semantic-3"),
+};
+
+const variantIconMap: Record<SectionVariant, IconVariant> = {
+  attention: "Attention",
+  danger: "Warning",
+};
+
+// SectionHeader component
+export const SectionHeader = (props: SectionHeaderProps) => (
+  <div
+    class={cx(
+      "flex items-center gap-3 rounded-md px-3 py-2",
+      variantColorsMap[props.variant]
+    )}
+  >
+    {
+      <Icon
+        icon={variantIconMap[props.variant]}
+        class={cx("size-5", variantIconColorsMap[props.variant])}
+      />
+    }
+    {props.headline}
+  </div>
+);
+
+// Section component
+interface SectionProps {
+  children: JSX.Element;
+}
+export const Section = (props: SectionProps) => (
+  <div class="flex flex-col gap-3">{props.children}</div>
+);