Create Timeline.js

src/components/Timeline.js

@@ -0,0 +1,52 @@
+import { $html, $for } from "sigpro";
+import { val } from "../core/utils.js";
+import { iconInfo, iconSuccess, iconWarning, iconError } from "../core/icons.js";
+
+/** TIMELINE */
+export const Timeline = (props) => {
+  const { items = [], vertical = true, compact = false, ...rest } = props;
+
+  const icons = {
+    info: iconInfo,
+    success: iconSuccess,
+    warning: iconWarning,
+    error: iconError,
+  };
+
+  return $html(
+    "ul",
+    {
+      ...rest,
+      class: () =>
+        `timeline ${val(vertical) ? "timeline-vertical" : "timeline-horizontal"} ${
+          val(compact) ? "timeline-compact" : ""
+        } ${props.class || ""}`,
+    },
+    [
+      $for(
+        items,
+        (item, i) => {
+          const isFirst = i === 0;
+          const isLast = i === val(items).length - 1;
+          const itemType = item.type || "success";
+          const renderSlot = (content) => (typeof content === "function" ? content() : content);
+
+          return $html("li", { class: "flex-1" }, [
+            !isFirst ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
+            $html("div", { class: "timeline-start" }, [renderSlot(item.title)]),
+            $html("div", { class: "timeline-middle" }, [
+              $html("img", {
+                src: icons[itemType] || item.icon || icons.success,
+                class: "w-4 h-4 object-contain mx-1",
+                alt: itemType,
+              }),
+            ]),
+            $html("div", { class: "timeline-end timeline-box shadow-sm" }, [renderSlot(item.detail)]),
+            !isLast ? $html("hr", { class: item.completed ? "bg-primary" : "" }) : null,
+          ]);
+        },
+        (item, i) => item.id || i,
+      ),
+    ],
+  );
+};