initial open on the code preview

linkb15 · Aug 8, 2024 · 153c04b · 153c04b
1 parent 2c1f13e
commit 153c04b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/apps/astro-docs/src/components/code-block-wrapper.tsx b/apps/astro-docs/src/components/code-block-wrapper.tsx
@@ -12,15 +12,17 @@ import {
 
 interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
   expandButtonTitle?: string;
+  initialOpen?: boolean;
 }
 
 export function CodeBlockWrapper({
   expandButtonTitle = 'View Code',
   className = 'my-6 overflow-hidden rounded-md',
   children,
+  initialOpen = false,
   ...props
 }: CodeBlockProps) {
-  const [isOpened, setIsOpened] = React.useState(false);
+  const [isOpened, setIsOpened] = React.useState(initialOpen);
 
   return (
     <Collapsible open={isOpened} onOpenChange={({ open }) => setIsOpened(open)}>

diff --git a/apps/astro-docs/src/content/docs/components/accordion.mdx b/apps/astro-docs/src/content/docs/components/accordion.mdx
@@ -21,7 +21,7 @@ A vertically stacked set of interactive headings that each reveal a section of c
     </div>
   </TabItem>
   <TabItem label="Code">
-    <CodeBlockWrapper client:load>
+    <CodeBlockWrapper client:load initialOpen>
       <Code
         class="mb-4 mt-4 max-h-[650px] min-h-32 overflow-x-auto rounded-lg relative text-sm"
         code={previewCode}