From d54ca9e841f3301fd1c8c1a4f90ff25f10ee2ed3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CKenzo-Wada=E2=80=9D?= <used.acormhib@gmail.com>
Date: Wed, 6 Nov 2024 02:25:10 +0900
Subject: [PATCH] [mantine.dev] add code of Nested Collapse Demo

---
 .../core/Collapse/Collapse.demo.nested.tsx    | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/packages/@docs/demos/src/demos/core/Collapse/Collapse.demo.nested.tsx b/packages/@docs/demos/src/demos/core/Collapse/Collapse.demo.nested.tsx
index ed4728db346..e304d433bd1 100644
--- a/packages/@docs/demos/src/demos/core/Collapse/Collapse.demo.nested.tsx
+++ b/packages/@docs/demos/src/demos/core/Collapse/Collapse.demo.nested.tsx
@@ -39,7 +39,47 @@ function Demo() {
   );
 }
 
+const code = `
+export function CollapsedDemo({
+  children,
+  buttonProps,
+  ...others
+}: Partial<CollapseProps> & { buttonProps?: any }) {
+  const [opened, setOpened] = useState(false);
+
+  return (
+    <Box maw={400} mx="auto" mt="md">
+      <Button onClick={() => setOpened((o) => !o)} mb={5} {...buttonProps} />
+      <Collapse in={opened} {...others}>
+        {children}
+      </Collapse>
+    </Box>
+  );
+}
+
+const lorem =
+  'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea atque in est quaerat dolore odio! Quibusdam, a nihil modi, maiores consequuntur ex quod suscipit illum ducimus doloribus odit commodi tenetur.';
+
+function Demo() {
+  return (
+    <CollapsedDemo buttonProps={{ children: 'Root collapse' }}>
+      <Text mt="md" size="lg" fw={700}>
+        This collapse contains another collapse
+      </Text>
+      <Text mt="xs">{lorem}</Text>
+      <CollapsedDemo buttonProps={{ variant: 'outline', children: 'Inner collapse' }}>
+        <Text mt="md" size="lg" fw={700}>
+          This collapse is inside another collapse
+        </Text>
+        <Text mt="xs">{lorem}</Text>
+      </CollapsedDemo>
+    </CollapsedDemo>
+  );
+}
+`;
+
 export const nested: MantineDemo = {
   type: 'code',
+  code,
   component: Demo,
 };