Refactor content given to OrganizedContent

components/playground.tsx

@@ -56,15 +56,15 @@ const events = [
 ];
 
 const constitution = [
-  { Content: ReadAll, metadata: readAllOrganizedContentMetadata },
-  { Content: Name, metadata: nameOrganizedContentMetadata },
-  { Content: Purpose, metadata: purposeOrganizedContentMetadata },
-  { Content: Membership, metadata: membershipOrganizedContentMetadata },
-  { Content: Officers, metadata: officersOrganizedContentMetadata },
-  { Content: Duties, metadata: dutiesOrganizedContentMetadata },
+  { content: <ReadAll />, ...readAllOrganizedContentMetadata },
+  { content: <Name />, ...nameOrganizedContentMetadata },
+  { content: <Purpose />, ...purposeOrganizedContentMetadata },
+  { content: <Membership />, ...membershipOrganizedContentMetadata },
+  { content: <Officers />, ...officersOrganizedContentMetadata },
+  { content: <Duties />, ...dutiesOrganizedContentMetadata },
   {
-    Content: ExecutiveCouncil,
-    metadata: executiveCouncilOrganizedContentMetadata,
+    content: <ExecutiveCouncil />,
+    ...executiveCouncilOrganizedContentMetadata,
   },
 ];
 
@@ -163,10 +163,7 @@ export function TeamMemberCardDemo() {
 }
 
 export function OrganizedContentDemo() {
-  const sections = constitution.map(({ Content, metadata }) => ({
-    ...metadata,
-    content: <Content />,
-  }));
+  const sections = constitution;
 
   const [index, setIndex] = useState(0);