feat: finish the homepage plugin, move service links and canvas out of core (B19)

2026-10-30 15:15:24 +00:00 · 2026-09-24 15:07:25 -05:00
1 parent 21937a6b02
commit d4ec444558
@@ -0,0 +1,142 @@
+import { useTranslation } from "@termix/plugin-sdk/frontend";
+import { Input, Textarea } from "@termix/plugin-sdk/ui";
+
+import type {
+  TextBannerConfig,
+  TextBannerFontSize,
+  TextBannerAlign,
+  TextBannerWeight,
+  WidgetEditFormProps,
+} from "../types.js";
+
+const SIZES: { id: TextBannerFontSize; label: string }[] = [
+  { id: "sm", label: "SM" },
+  { id: "md", label: "MD" },
+  { id: "lg", label: "LG" },
+  { id: "xl", label: "XL" },
+];
+
+const ALIGNS: { id: TextBannerAlign; label: string }[] = [
+  { id: "left", label: "Left" },
+  { id: "center", label: "Center" },
+  { id: "right", label: "Right" },
+];
+
+const WEIGHTS: { id: TextBannerWeight; label: string }[] = [
+  { id: "normal", label: "Normal" },
+  { id: "semibold", label: "Semibold" },
+  { id: "bold", label: "Bold" },
+];
+
+export function TextBannerEditForm({
+  config,
+  onChange,
+}: WidgetEditFormProps<TextBannerConfig>) {
+  const { t } = useTranslation();
+
+  const ButtonGroup = <T extends string>({
+    opts,
+    value,
+    onSelect,
+  }: {
+    opts: { id: T; label: string }[];
+    value: T;
+    onSelect: (v: T) => void;
+  }) => (
+    <div className="flex gap-1">
+      {opts.map((o) => (
+        <button
+          key={o.id}
+          type="button"
+          onClick={() => onSelect(o.id)}
+          className={`px-2 py-0.5 text-[10px] border transition-colors ${value === o.id ? "bg-accent-brand border-accent-brand text-white" : "border-border text-muted-foreground"}`}
+        >
+          {o.label}
+        </button>
+      ))}
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-1">
+        <label className="text-xs font-medium text-muted-foreground">
+          {t("homepage.content")}
+        </label>
+        <Textarea
+          value={config.text}
+          onChange={(e) => onChange({ ...config, text: e.target.value })}
+          rows={2}
+          className="text-sm min-h-[60px] resize-none rounded-none"
+        />
+      </div>
+      <div className="flex flex-col gap-1">
+        <label className="text-xs font-medium text-muted-foreground">
+          {t("homepage.fontSize")}
+        </label>
+        <ButtonGroup
+          opts={SIZES}
+          value={config.fontSize}
+          onSelect={(v) => onChange({ ...config, fontSize: v })}
+        />
+      </div>
+      <div className="flex flex-col gap-1">
+        <label className="text-xs font-medium text-muted-foreground">
+          {t("homepage.textAlign")}
+        </label>
+        <ButtonGroup
+          opts={ALIGNS}
+          value={config.textAlign}
+          onSelect={(v) => onChange({ ...config, textAlign: v })}
+        />
+      </div>
+      <div className="flex flex-col gap-1">
+        <label className="text-xs font-medium text-muted-foreground">
+          {t("homepage.fontWeight")}
+        </label>
+        <ButtonGroup
+          opts={WEIGHTS}
+          value={config.fontWeight}
+          onSelect={(v) => onChange({ ...config, fontWeight: v })}
+        />
+      </div>
+      <div className="flex flex-col gap-1">
+        <label className="text-xs font-medium text-muted-foreground">
+          {t("homepage.backgroundColor")}
+        </label>
+        <div className="flex items-center gap-2">
+          <input
+            type="color"
+            value={config.backgroundColor ?? "#1e1e2e"}
+            onChange={(e) =>
+              onChange({ ...config, backgroundColor: e.target.value })
+            }
+            className="w-8 h-8 border border-border cursor-pointer"
+          />
+          <Input
+            value={config.backgroundColor ?? ""}
+            onChange={(e) =>
+              onChange({
+                ...config,
+                backgroundColor: e.target.value || undefined,
+              })
+            }
+            placeholder="#1e1e2e"
+            className="h-8 text-sm flex-1"
+          />
+          {config.backgroundColor && (
+            <button
+              type="button"
+              onClick={() =>
+                onChange({ ...config, backgroundColor: undefined })
+              }
+              className="text-[10px] text-muted-foreground hover:text-foreground shrink-0"
+            >
+              {t("homepage.clearColor")}
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}