Completed template

2026-03-02 22:12:50 -07:00
parent d811b87b12
commit 3e3d2881f5
103 changed files with 1410 additions and 622 deletions
@@ -0,0 +1,16 @@
+export interface CommunityRuleDocumentEntry {
+  title: string;
+  body: string;
+}
+
+export interface CommunityRuleDocumentSection {
+  categoryName: string;
+  entries: CommunityRuleDocumentEntry[];
+}
+
+export interface CommunityRuleDocumentProps {
+  sections: CommunityRuleDocumentSection[];
+  className?: string;
+  /** When true, wrap in white background with left teal bar (small breakpoint). */
+  useCardStyle?: boolean;
+}
@@ -0,0 +1,65 @@
+"use client";
+
+import { memo } from "react";
+import type { CommunityRuleDocumentProps } from "./CommunityRuleDocument.types";
+
+const SECTION_GAP = "var(--measures-spacing-1200, 64px)";
+const TEAL_BG = "var(--color-teal-teal50, #c9fef9)";
+const SECTION_LINE_COLOR = "var(--color-border-default-tertiary, #464646)";
+
+function CommunityRuleDocumentView({
+  sections,
+  className = "",
+  useCardStyle = false,
+}: CommunityRuleDocumentProps) {
+  const rootClass = useCardStyle
+    ? `rounded-[12px] bg-white pl-3 border-l-4 ${className}`
+    : className;
+  const rootStyle = useCardStyle ? { borderLeftColor: TEAL_BG } : undefined;
+
+  const sectionLineStyle = useCardStyle
+    ? undefined
+    : { borderLeftColor: SECTION_LINE_COLOR };
+
+  return (
+    <div
+      className={`flex flex-col min-w-0 ${rootClass}`}
+      style={{ gap: SECTION_GAP, ...rootStyle }}
+    >
+      {sections.map((section, sectionIndex) => (
+        <div
+          key={sectionIndex}
+          className={`flex flex-col min-w-0 ${!useCardStyle ? "border-l pl-3" : ""}`}
+          style={sectionLineStyle}
+        >
+          {/* Section content: line runs full height of this block via border-left */}
+          <div className="flex flex-1 flex-col gap-4 min-w-0">
+            <p className="font-inter font-medium text-[16px] leading-[20px] text-[var(--color-content-invert-secondary,#1f1f1f)] shrink-0">
+              {section.categoryName}
+            </p>
+            <div className="flex flex-col min-w-0" style={{ gap: "24px" }}>
+              {section.entries.map((entry, entryIndex) => (
+                <div
+                  key={entryIndex}
+                  className="flex flex-col min-w-0"
+                  style={{ gap: "6px" }}
+                >
+                  <p className="font-inter font-bold text-[20px] leading-[28px] text-[var(--color-content-invert-primary)] shrink-0">
+                    {entry.title}
+                  </p>
+                  <p className="font-inter font-normal text-[14px] leading-[20px] text-[var(--color-content-invert-primary)] shrink-0">
+                    {entry.body}
+                  </p>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+CommunityRuleDocumentView.displayName = "CommunityRuleDocumentView";
+
+export default memo(CommunityRuleDocumentView);
@@ -0,0 +1,2 @@
+export { default } from "./CommunityRuleDocument.view";
+export type { CommunityRuleDocumentProps } from "./CommunityRuleDocument.types";