animated accordion

Author: kylemh

src/components/Section/Q.tsx

@@ -23,10 +23,9 @@ export default function Q({ title, children, className }: QProps) {
     <Card className={cn('min-h-full w-full flex-nowrap justify-normal py-0', className)}>
       <Accordion>
         <AccordionItem value={id} className="border-none">
-          <div className="flex w-full items-center justify-between">
-            <div className="flex-1 text-xl font-bold uppercase">{title}</div>
-            <AccordionTrigger className="-mr-6 grid size-20 place-items-center border-none hover:no-underline" />
-          </div>
+          <AccordionTrigger className="-mx-6 px-6 py-4 text-xl font-bold uppercase hover:no-underline">
+            {title}
+          </AccordionTrigger>
           <AccordionContent className="w-full pb-4">{children}</AccordionContent>
         </AccordionItem>
       </Accordion>

src/components/ui/accordion.tsx

@@ -33,19 +33,19 @@ function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.
         data-testid={ACCORDION_TOGGLE_BUTTON}
         data-slot="accordion-trigger"
         className={cn(
-          'group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+          'group/accordion-trigger relative flex flex-1 cursor-pointer items-center justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-6 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
           className,
         )}
         {...props}
       >
         {children}
         <ChevronDownIcon
           data-slot="accordion-trigger-icon"
-          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+          className="pointer-events-none shrink-0 fill-none! group-aria-expanded/accordion-trigger:hidden"
         />
         <ChevronUpIcon
           data-slot="accordion-trigger-icon"
-          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+          className="pointer-events-none hidden shrink-0 fill-none! group-aria-expanded/accordion-trigger:inline"
         />
       </AccordionPrimitive.Trigger>
     </AccordionPrimitive.Header>

src/lib/styles/globals.css

@@ -4,6 +4,7 @@
 @custom-variant dark (&:is(.dark *));
 
 :root {
+  interpolate-size: allow-keywords;
   --radius: 0.625rem;
   --background: #fafafa;
   --foreground: #47566b;