Commit dfe9eee

@@ -0,0 +1,16 @@
+---
+interface Props {
+  title: string;
+  open?: boolean;
+}
+
+const { title, open = false } = Astro.props;
+---
+
+<div class="bg-base-100 border-base-content/25 collapse-arrow collapse my-4 border">
+  <input type="checkbox" {...open && { checked: true }} />
+  <div class="collapse-title font-semibold">{title}</div>
+  <div class="collapse-content">
+    <slot />
+  </div>
+</div>

@@ -1,3 +1,4 @@
+export { default as Collapse } from './Collapse.astro';
+export { default as Repl } from './Repl.astro';
 export { default as Tabs } from './Tabs.astro';
 export { default as TabItem } from './TabItem.astro';
-export { default as Repl } from './Repl.astro';

@@ -10,7 +10,7 @@ tags:
 published: 2025-02-10T21:23:23+08:00
 ---
 
-import { Tabs, TabItem, Repl } from '@components/user';
+import { Tabs, TabItem, Repl, Collapse } from '@components/user';
 
 Components let you easily reuse a piece of UI or styling consistently. You can use them not just in `.astro` files, but also in `.mdx` files.
 
@@ -19,6 +19,27 @@ Components let you easily reuse a piece of UI or styling consistently. You can u
 
 ## Containers
 
+### Collapse
+
+<Repl>
+  <Collapse title='Click me'>
+    This is the content of the collapse.
+  </Collapse>
+  <Collapse title='Default open!' open>
+    Hey there, I'm opened by default!
+  </Collapse>
+  <Fragment slot="desc">
+    ```jsx
+    <Collapse title='Click me'>
+      This is the content of the collapse.
+    </Collapse>
+    <Collapse title='Default open!' open>
+      Hey there, I'm opened by default!
+    </Collapse>
+    ```
+  </Fragment>
+</Repl>
+
 ### Tabs
 
 <Repl>

@@ -13,14 +13,7 @@ Here is an example of a Markdown blog post.
 
 # Heading Level 1 (I suggest not to use this level)
 
-Heading Level 1 is reserved for the post title, so you should start with Heading Level 2.
-
-<details>
-  <summary>Or</summary>
-  <p>
-    Add <code>import remarkHeadingShift from './src/plugins/remark-heading-shift.mjs';</code> to the top of <code>astro.config.mjs</code> and uncomment the first line of the <code>remarkPlugins</code> array, then you can use Heading Level 1 as a regular heading in your blog posts.
-  </p>
-</details>
+Heading Level 1 is reserved for the post title, so you should start with Heading Level 2. Or you can uncomment `import remarkHeadingShift from './src/plugins/remark-heading-shift.mjs';` to the top of `astro.config.mjs` and then uncomment the first line of the `remarkPlugins` array. After that, you can use Heading Level 1 as a regular heading in your blog posts.
 
 ## Heading Level 2
 

@@ -290,33 +290,6 @@ article {
     }
   }
 
-  /* 折叠块样式 */
-  details {
-    @apply border-base-300 relative w-full overflow-hidden rounded-xl border duration-300;
-
-    summary {
-      @apply hover:bg-primary/50 w-full px-3 py-1 text-start text-lg duration-300;
-
-      &::marker {
-        margin-right: 1.5rem;
-      }
-    }
-
-    &[open] {
-      summary {
-        @apply bg-primary/50;
-      }
-    }
-
-    > :not(summary) {
-      @apply mx-8;
-    }
-
-    > :last-child {
-      @apply mb-4;
-    }
-  }
-
   /* 表格样式 */
   table {
     @apply relative w-full text-left text-sm;