Second pass on component refactor

2026-01-29 17:35:51 -07:00
parent 7b9101824a
commit b5735bb2ad
26 changed files with 778 additions and 491 deletions
@@ -0,0 +1,44 @@
+"use client";
+
+import { memo } from "react";
+import { logger } from "../../../lib/logger";
+import { RuleStackView } from "./RuleStack.view";
+import type { RuleStackProps } from "./RuleStack.types";
+
+declare global {
+  interface Window {
+    gtag?: (
+      _command: string,
+      _eventName: string,
+      _params?: Record<string, unknown>,
+    ) => void;
+    analytics?: {
+      track: (_eventName: string, _params?: Record<string, unknown>) => void;
+    };
+  }
+}
+
+const RuleStackContainer = memo<RuleStackProps>(({ className = "" }) => {
+  const handleTemplateClick = (templateName: string) => {
+    // Basic analytics tracking
+    if (typeof window !== "undefined") {
+      if (window.gtag) {
+        window.gtag("event", "template_click", {
+          template_name: templateName,
+        });
+      }
+      if (window.analytics) {
+        window.analytics.track("Template Clicked", {
+          templateName: templateName,
+        });
+      }
+    }
+    logger.debug(`${templateName} template clicked`);
+  };
+
+  return <RuleStackView className={className} onTemplateClick={handleTemplateClick} />;
+});
+
+RuleStackContainer.displayName = "RuleStack";
+
+export default RuleStackContainer;
@@ -0,0 +1,8 @@
+export interface RuleStackProps {
+  className?: string;
+}
+
+export interface RuleStackViewProps {
+  className: string;
+  onTemplateClick: (templateName: string) => void;
+}
@@ -0,0 +1,86 @@
+import Image from "next/image";
+import RuleCard from "../RuleCard";
+import Button from "../Button";
+import { getAssetPath } from "../../../lib/assetUtils";
+import type { RuleStackViewProps } from "./RuleStack.types";
+
+export function RuleStackView({
+  className,
+  onTemplateClick,
+}: RuleStackViewProps) {
+  return (
+    <section
+      className={`w-full bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] md:py-[var(--spacing-scale-048)] md:px-[var(--spacing-scale-032)] xmd:py-[var(--spacing-scale-056)] xmd:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-064)] xl:px-[var(--spacing-scale-096)] flex flex-col gap-[var(--spacing-scale-024)] xmd:gap-[var(--spacing-scale-032)] lg:gap-[var(--spacing-scale-040)] ${className}`}
+    >
+      <div className="flex flex-col gap-[18px] xmd:grid xmd:grid-cols-2 lg:gap-[var(--spacing-scale-024)]">
+        <RuleCard
+          title="Consensus clusters"
+          description="Units called Circles have the ability to decide and act on matters in their domains, which their members agree on through a Council."
+          icon={
+            <Image
+              src={getAssetPath("assets/Icon_Sociocracy.svg")}
+              alt="Sociocracy"
+              width={40}
+              height={40}
+              className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
+            />
+          }
+          backgroundColor="bg-[var(--color-surface-default-brand-lime)]"
+          onClick={() => onTemplateClick("Consensus clusters")}
+        />
+        <RuleCard
+          title="Consensus"
+          description="Decisions that affect the group collectively should involve participation of all participants."
+          icon={
+            <Image
+              src={getAssetPath("assets/Icon_Consensus.svg")}
+              alt="Consensus"
+              width={40}
+              height={40}
+              className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
+            />
+          }
+          backgroundColor="bg-[var(--color-surface-default-brand-rust)]"
+          onClick={() => onTemplateClick("Consensus")}
+        />
+        <RuleCard
+          title="Elected Board"
+          description="An elected board determines policies and organizes their implementation."
+          icon={
+            <Image
+              src={getAssetPath("assets/Icon_ElectedBoard.svg")}
+              alt="Elected Board"
+              width={40}
+              height={40}
+              className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
+            />
+          }
+          backgroundColor="bg-[var(--color-surface-default-brand-red)]"
+          onClick={() => onTemplateClick("Elected Board")}
+        />
+        <RuleCard
+          title="Petition"
+          description="All participants can propose and vote on proposals for the group."
+          icon={
+            <Image
+              src={getAssetPath("assets/Icon_Petition.svg")}
+              alt="Petition"
+              width={40}
+              height={40}
+              className="md:w-[56px] md:h-[56px] lg:w-[90px] lg:h-[90px]"
+            />
+          }
+          backgroundColor="bg-[var(--color-surface-default-brand-teal)]"
+          onClick={() => onTemplateClick("Petition")}
+        />
+      </div>
+
+      {/* See all templates button */}
+      <div className="flex justify-center">
+        <Button variant="outlined" size="large">
+          See all templates
+        </Button>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,2 @@
+export { default } from "./RuleStack.container";
+export type { RuleStackProps } from "./RuleStack.types";