First pass on component refactor

2026-01-29 17:29:37 -07:00
parent 11f32d7051
commit 7b9101824a
25 changed files with 1240 additions and 559 deletions
@@ -0,0 +1,36 @@
+"use client";
+
+import { memo } from "react";
+import { useSchemaData } from "../../hooks";
+import NumberedCardsView from "./NumberedCards.view";
+import type { NumberedCardsProps } from "./NumberedCards.types";
+
+const NumberedCardsContainer = memo<NumberedCardsProps>(
+  ({ title, subtitle, cards }) => {
+    const schemaData = useSchemaData({
+      type: "HowTo",
+      name: title,
+      description: subtitle,
+      steps: cards.map((card) => ({
+        name: card.text,
+        text: card.text,
+      })),
+    });
+
+    const schemaJson = JSON.stringify(schemaData);
+
+    return (
+      <NumberedCardsView
+        title={title}
+        subtitle={subtitle}
+        cards={cards}
+        schemaJson={schemaJson}
+      />
+    );
+  },
+);
+
+NumberedCardsContainer.displayName = "NumberedCards";
+
+export default NumberedCardsContainer;
+
@@ -0,0 +1,16 @@
+export interface Card {
+  text: string;
+  iconShape?: string;
+  iconColor?: string;
+}
+
+export interface NumberedCardsProps {
+  title: string;
+  subtitle: string;
+  cards: Card[];
+}
+
+export interface NumberedCardsViewProps extends NumberedCardsProps {
+  schemaJson: string;
+}
+
@@ -0,0 +1,66 @@
+import SectionHeader from "../SectionHeader";
+import NumberedCard from "../NumberedCard";
+import Button from "../Button";
+import type { NumberedCardsViewProps } from "./NumberedCards.types";
+
+function NumberedCardsView({
+  title,
+  subtitle,
+  cards,
+  schemaJson,
+}: NumberedCardsViewProps) {
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: schemaJson }}
+      />
+      <section className="bg-transparent py-[var(--spacing-scale-032)] px-[var(--spacing-scale-020)] sm:py-[var(--spacing-scale-048)] sm:px-[var(--spacing-scale-032)] lg:py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:py-[var(--spacing-scale-076)] xl:px-[var(--spacing-scale-064)]">
+        <div className="max-w-[var(--spacing-measures-max-width-lg)] mx-auto">
+          <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-032)] lg:gap-y-[var(--spacing-scale-056)]">
+            {/* Section Header */}
+            <div>
+              <SectionHeader
+                title={title}
+                subtitle={subtitle}
+                titleLg="How CommunityRule helps"
+              />
+            </div>
+
+            {/* Cards Container */}
+            <div className="grid grid-cols-1 gap-y-[var(--spacing-scale-024)] lg:grid-cols-3 lg:gap-[var(--spacing-scale-024)]">
+              {cards.map((card, index) => (
+                <NumberedCard
+                  key={index}
+                  number={index + 1}
+                  text={card.text}
+                  iconShape={card.iconShape}
+                  iconColor={card.iconColor}
+                />
+              ))}
+            </div>
+
+            {/* Call to Action Button */}
+            <div className="text-center sm:text-left lg:text-center">
+              {/* Default button for xsm and sm breakpoints */}
+              <div className="block lg:hidden">
+                <Button variant="default" size="large">
+                  Create CommunityRule
+                </Button>
+              </div>
+              {/* Outlined button for lg and xlg breakpoints */}
+              <div className="hidden lg:block">
+                <Button variant="outlined" size="large">
+                  See how it works
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export default NumberedCardsView;
+
@@ -0,0 +1,3 @@
+export { default } from "./NumberedCards.container";
+export * from "./NumberedCards.types";
+