Implement use cases page

2026-05-17 21:41:54 -06:00
parent b6b9b63608
commit 450da4d8ab
78 changed files with 1870 additions and 118 deletions
@@ -0,0 +1,27 @@
+"use client";
+
+import { memo, useId } from "react";
+import GroupsView from "./Groups.view";
+import type { GroupsProps } from "./Groups.types";
+
+/**
+ * Figma: **Section** instance [**22085-860411**](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22085-860411&m=dev) (`xl`: **Scale/160** horizontal padding);
+ * Card group ref [**22084-859062**](https://www.figma.com/design/agv0VBLiBlcnSAaiAORgPR/Community-Rule-System?node-id=22084-859062&m=dev); legacy **22084-859470**.
+ */
+const GroupsContainer = memo<GroupsProps>(({ title, items, className = "" }) => {
+  const reactId = useId();
+  const headingId = `${reactId}-groups-heading`;
+
+  return (
+    <GroupsView
+      title={title}
+      items={items}
+      headingId={headingId}
+      className={className}
+    />
+  );
+});
+
+GroupsContainer.displayName = "Groups";
+
+export default GroupsContainer;
@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+
+export interface GroupsItem {
+  icon: ReactNode;
+  title: string;
+  description: string;
+}
+
+export interface GroupsProps {
+  title: string;
+  items: GroupsItem[];
+  className?: string;
+}
+
+export interface GroupsViewProps extends GroupsProps {
+  headingId: string;
+}
@@ -0,0 +1,44 @@
+"use client";
+
+import { memo } from "react";
+import Icon from "../../cards/Icon";
+import type { GroupsViewProps } from "./Groups.types";
+
+function GroupsView({ title, items, headingId, className = "" }: GroupsViewProps) {
+  return (
+    <section
+      data-figma-node="22085-860411"
+      aria-labelledby={headingId}
+      className={`bg-transparent px-0 py-[var(--spacing-scale-064)] lg:px-[var(--spacing-scale-064)] xl:px-[var(--spacing-scale-160)] ${className}`.trim()}
+    >
+      <div className="mx-auto flex w-full max-w-[560px] flex-col items-center gap-[var(--spacing-scale-032)] md:max-w-[1280px] md:gap-[var(--spacing-scale-048)]">
+        <h2
+          id={headingId}
+          className="w-full shrink-0 text-center font-bricolage-grotesque text-[28px] font-bold leading-9 text-[var(--color-content-default-primary)] md:text-[32px] md:leading-10 lg:text-[40px] lg:leading-[52px]"
+        >
+          {title}
+        </h2>
+        <div className="flex w-full shrink-0 flex-col bg-[var(--color-surface-default-primary)] max-md:[&>*+*]:-mt-px md:grid md:grid-cols-2 md:gap-px md:bg-[var(--color-border-default-primary)] md:[&>*+*]:mt-0 lg:grid-cols-4">
+          {items.map((item, index) => (
+            <div
+              key={`${item.title}-${index}`}
+              className="flex min-h-[350px] min-w-0 shrink-0 justify-center bg-[var(--color-surface-default-primary)] md:justify-stretch"
+            >
+              <Icon
+                icon={item.icon}
+                title={item.title}
+                description={item.description}
+                interactive={false}
+                className="w-full min-w-0 max-w-none shrink-0"
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+GroupsView.displayName = "GroupsView";
+
+export default memo(GroupsView);
@@ -0,0 +1,2 @@
+export { default } from "./Groups.container";
+export type { GroupsProps, GroupsItem } from "./Groups.types";