Update code-accordion.tsx

MildTomato · MildTomato · commit b6c73533777c · 2024-08-08T23:56:16.000+08:00
diff --git a/apps/postgres-new/components/code-accordion.tsx b/apps/postgres-new/components/code-accordion.tsx
@@ -28,26 +28,34 @@ export default function CodeAccordion({
       <AccordionItem
         value="item-1"
         className={cn(
-          'border bg-muted px-3 py-2 rounded-md',
+          'border rounded-md overflow-hidden',
           error ? 'border-destructive' : undefined,
           className
         )}
       >
-        <AccordionTrigger className="p-0 gap-2">
+        <AccordionTrigger
+          className={cn(
+            'p-0 gap-2 px-3 py-2',
+            error ? 'bg-destructive border-destructive' : undefined
+          )}
+        >
           <div className="flex gap-2 items-center font-normal text-lighter text-sm">
-            <DatabaseZap size={14} className="text-muted-foreground" />
-            <span className={cn(error ? 'text-destructive' : undefined)}>{title}</span>
+            <DatabaseZap
+              size={14}
+              className={cn('text-muted-foreground', error && 'text-destructive-foreground')}
+            />
+            <span className={cn(error ? 'text-destructive-foreground' : undefined)}>{title}</span>
           </div>
         </AccordionTrigger>
-        <AccordionContent className="py-2 [&_>div]:pb-0 flex flex-col gap-2">
+        <AccordionContent className="py-2 [&_>div]:pb-0 flex flex-col gap-2 bg-background px-3">
           <CodeBlock
             className={cn(`language-${language}`, 'border-none px-0 pb-4 !bg-inherit')}
             hideLineNumbers
             hideCopy
           >
             {code}
           </CodeBlock>
-          {error && <div className="text-destructive text-xs">{error}</div>}
+          {error && <div className="text-red-600 text-xs">{error}</div>}
         </AccordionContent>
       </AccordionItem>
     </Accordion>
