Convert from JSX to TSX

2025-12-10 22:14:17 -07:00
parent 1ad6bc85b4
commit f6a0673082
68 changed files with 1527 additions and 635 deletions
@@ -0,0 +1,93 @@
+"use client";
+
+import React, { memo, useMemo } from "react";
+import NumberedCard from "./NumberedCard";
+import SectionHeader from "./SectionHeader";
+import Button from "./Button";
+
+interface Card {
+  text: string;
+  iconShape?: string;
+  iconColor?: string;
+}
+
+interface NumberedCardsProps {
+  title: string;
+  subtitle: string;
+  cards: Card[];
+}
+
+const NumberedCards = memo<NumberedCardsProps>(({ title, subtitle, cards }) => {
+  // Memoize schema data to prevent unnecessary re-computations
+  const schemaData = useMemo(
+    () => ({
+      "@context": "https://schema.org",
+      "@type": "HowTo",
+      name: title,
+      description: subtitle,
+      step: cards.map((card, index) => ({
+        "@type": "HowToStep",
+        position: index + 1,
+        name: card.text,
+        text: card.text,
+      })),
+    }),
+    [title, subtitle, cards]
+  );
+
+  return (
+    <>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
+      />
+      <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>
+    </>
+  );
+});
+
+NumberedCards.displayName = "NumberedCards";
+
+export default NumberedCards;