shrink

superpage/src/components/Faq.jsx

@@ -1,8 +1,4 @@
-import {
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react'
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from '@headlessui/react'
 import { ChevronDownIcon } from '@heroicons/react/24/solid'
 
 export function Faq({ topics }) {
@@ -15,14 +11,12 @@ export function Faq({ topics }) {
           </ListButton>
           <ListPanel>
             <p>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet neque id libero semper vulputate a
-              amet neque id libero semper vulputate a ut ex. Pellentesque semper
+              ut ex. Pellentesque semper ultrices mi in efficitur.
-              ultrices mi in efficitur.
             </p>
             <p>
-              Nulla sit amet quam eu neque convallis volutpat. Pellentesque eu
+              Nulla sit amet quam eu neque convallis volutpat. Pellentesque eu commodo sem. Suspendisse ac lobortis
-              commodo sem. Suspendisse ac lobortis massa, ac mattis mauris.
+              massa, ac mattis mauris. Integer malesuada bibendum ante, sed consequat augue convallis et.
-              Integer malesuada bibendum ante, sed consequat augue convallis et.
             </p>
           </ListPanel>
         </ListItem>
@@ -33,11 +27,7 @@ export function Faq({ topics }) {
 
 export function ListItem({ children, ...props }) {
   return (
-    <Disclosure
+    <Disclosure as="div" className="bg-white/10 rounded-lg w-full data-open:bg-white/15" {...props}>
-      as="div"
-      className="bg-white/10 rounded-lg w-full data-open:bg-white/15"
-      {...props}
-    >
       {children}
     </Disclosure>
   )
@@ -47,15 +37,11 @@ export function ListButton({ children }) {
   return (
     <DisclosureButton className="group flex items-center justify-between w-full px-5 py-3 cursor-pointer">
       <span className="text-left">{children}</span>
-      <ChevronDownIcon className="size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180" />
+      <ChevronDownIcon className="size-5 fill-white/60 group-data-[hover]:fill-white/50 group-data-[open]:rotate-180 shrink-0" />
     </DisclosureButton>
   )
 }
 
 export function ListPanel({ children }) {
-  return (
+  return <DisclosurePanel className="text-sm/6 text-white/70 space-y-2 px-5 pb-3">{children}</DisclosurePanel>
-    <DisclosurePanel className="text-sm/6 text-white/70 space-y-2 px-5 pb-3">
-      {children}
-    </DisclosurePanel>
-  )
 }