docs(mdx-components): use styled accordion instead for /headless/introduction

Author: maiieul

apps/website/src/components/mdx-components/index.tsx

@@ -9,6 +9,12 @@ import { KeyboardInteractionTable } from '../keyboard-interaction-table/keyboard
 import { Note } from '../note/note';
 import { Showcase } from '../showcase/showcase';
 import { StatusBanner } from '../status-banner/status-banner';
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@qwik-ui/styled';
 
 export const components: Record<string, Component> = {
   p: component$<PropsOf<'p'>>(({ ...props }) => {
@@ -111,13 +117,11 @@ export const components: Record<string, Component> = {
       </div>
     );
   }),
-  code: component$<PropsOf<'code'>>(() => {
-    return (
-      <code class="whitespace-pre-wrap">
-        <Slot />
-      </code>
-    );
-  }),
+
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
   AnatomyTable,
   APITable,
   CodeSnippet,

apps/website/src/routes/docs/headless/introduction/index.mdx

@@ -3,17 +3,6 @@ title: Qwik UI | Introduction
 ---
 
 import headlessHero from '/public/images/qwik-ui-headless-hero.webp';
-import { Note } from '~/components/note/note';
-import { FeatureList } from '~/components/feature-list/feature-list';
-import {
-  AccordionRoot,
-  AccordionItem,
-  AccordionHeader,
-  AccordionTrigger,
-  AccordionContent,
-} from '@qwik-ui/headless';
-
-import { CollapsibleIcon } from '~/components/icons/CollapsibleIcon.tsx';
 
 # Headless kit
 
@@ -102,50 +91,35 @@ One of the benefits of Qwik is its ability to create performant applications wit
 
 ## FAQ
 
-<AccordionRoot animated enhance={true}>
-    <AccordionItem class="border-b">
-    <AccordionHeader as="h3">
-        <AccordionTrigger class="group flex w-full items-center justify-between rounded-t-sm py-4 text-left hover:underline">
-            <span class="font-medium">What kind of support or resources are available if I encounter issues with Qwik UI?</span>
-            <CollapsibleIcon class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform min-w-[1rem]" />              </AccordionTrigger>
-        </AccordionHeader>
-    <AccordionContent class="accordion-animation-1 overflow-hidden">
-        <div class="pb-4">
-            If you stumble into any problems, [create an issue](https://github.com/qwikifiers/qwik-ui/issues) on the Qwik UI repository.
-            We also have a [discord community](https://discord.gg/PVWUUejrez) with a Qwik UI channel where you can raise any concerns, propose ideas, or chat all things Qwik UI 😊
-        </div>
-    </AccordionContent>
+<Accordion>
+    <AccordionItem>
+        <AccordionTrigger>
+            What kind of support or resources are available if I encounter issues with Qwik UI?
+        </AccordionTrigger>
+            <AccordionContent>
+                    If you stumble into any problems, [create an issue](https://github.com/qwikifiers/qwik-ui/issues) on the Qwik UI repository. 
+                    We also have a [discord community](https://discord.gg/PVWUUejrez) with a Qwik UI channel where you can raise any concerns, propose ideas, or chat all things Qwik UI 😊
+            </AccordionContent>
     </AccordionItem>
-    <AccordionItem class="border-b">
-    <AccordionHeader as="h3">
-        <AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline">
-        <span class="font-medium">How can I contribute to the project?</span>
-        <CollapsibleIcon class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform min-w-[1rem]" />
+    <AccordionItem>
+        <AccordionTrigger>
+        How can I contribute to the project?
         </AccordionTrigger>
-    </AccordionHeader>
-    <AccordionContent class="accordion-animation-1 overflow-hidden">
-        <div class="pb-4">
+    <AccordionContent>
             We provide a [contributing](/docs/headless/contributing) guide to help get familiar with the repository.
             Additionally, we offer a quick start [setup guide](https://github.com/qwikifiers/qwik-ui/blob/main/CONTRIBUTING.md) and a section dedicated to advanced resources below the Components navigation.
-        </div>
     </AccordionContent>
     </AccordionItem>
-    <AccordionItem class="border-b">
-    <AccordionHeader as="h3">
-        <AccordionTrigger class="group flex w-full items-center justify-between py-4 text-left hover:underline aria-expanded:rounded-none">
-        <span class="font-medium">How can I migrate my existing application to use Qwik UI?</span>
-        <CollapsibleIcon class="ease transition-transform duration-500 group-aria-expanded:rotate-180 group-aria-expanded:transform min-w-[1rem]" />
+    <AccordionItem>
+        <AccordionTrigger>
+        How can I migrate my existing application to use Qwik UI?
         </AccordionTrigger>
-    </AccordionHeader>
-    <AccordionContent class="accordion-animation-1 overflow-hidden">
-        <div class="pb-4">
+    <AccordionContent>
             If you're using `Qwik-React`, `Qwik-Angular`, `@qwikdev/astro`, we suggest incrementally adding Qwik UI components to your application.
             Qwik, built as a microfrontend, allows you to incrementally integrate Qwik UI components into your existing application. This approach reduces migration risk and complexity, letting you leverage Qwik UI's benefits at your own pace.
-        </div>
     </AccordionContent>
     </AccordionItem>
-
-</AccordionRoot>
+</Accordion>
 
 ## Credits