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;