accordion finetuning en show on print

Author: devhelpr

src/components/componentMapper.tsx

@@ -6,12 +6,7 @@ import Markdown from 'react-markdown';
 import { getLabel } from './graphs/get-label';
 import { CSVData } from './bias-detection-interfaces/csv-data';
 import { Fragment } from 'react/jsx-runtime';
-import {
-    Accordion,
-    AccordionContent,
-    AccordionItem,
-    AccordionTrigger,
-} from './ui/accordion';
+import { Accordion } from './ui/accordion';
 
 const createArrayFromPythonDictionary = (dict: Record<string, number>) => {
     const resultArray = [];
@@ -79,18 +74,11 @@ export default function ComponentMapper({
                         );
                     case 'accordion':
                         return (
-                            <Accordion key={index} type="single" collapsible>
-                                <AccordionItem value="item-1">
-                                    <AccordionTrigger>
-                                        {resultItem.title}
-                                    </AccordionTrigger>
-                                    <AccordionContent>
-                                        <Markdown className="mt-2 text-gray-800 markdown">
-                                            {resultItem.content}
-                                        </Markdown>
-                                    </AccordionContent>
-                                </AccordionItem>
-                            </Accordion>
+                            <Accordion
+                                key={index}
+                                title={resultItem.title}
+                                content={resultItem.content}
+                            />
                         );
                     case 'histogram': {
                         const histogramData = JSON.parse(resultItem.data)?.map(

src/components/ui/accordion.tsx

@@ -5,8 +5,7 @@ import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { ChevronDown } from 'lucide-react';
 
 import { cn } from '@/lib/utils';
-
-const Accordion = AccordionPrimitive.Root;
+import Markdown from 'react-markdown';
 
 const AccordionItem = React.forwardRef<
     React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -28,7 +27,7 @@ const AccordionTrigger = React.forwardRef<
         <AccordionPrimitive.Trigger
             ref={ref}
             className={cn(
-                'flex flex-1 items-center justify-between pb-4 text-md font-semibold transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180',
+                'flex flex-1 items-center justify-between p-2 rounded-lg text-md bg-neutral-500 text-white transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180',
                 className
             )}
             {...props}
@@ -54,4 +53,29 @@ const AccordionContent = React.forwardRef<
 ));
 AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
+export interface AccordionProps {
+    title: string;
+    content: string;
+}
+
+export const Accordion = (props: AccordionProps) => (
+    <>
+        <div className="hideonprint">
+            <AccordionPrimitive.Root type="single" collapsible>
+                <AccordionItem value="item-1">
+                    <AccordionTrigger>{props.title}</AccordionTrigger>
+                    <AccordionContent>
+                        <Markdown className="mt-2 text-gray-800 markdown">
+                            {props.content}
+                        </Markdown>
+                    </AccordionContent>
+                </AccordionItem>
+            </AccordionPrimitive.Root>
+        </div>
+        <div className="hidden showonprint">
+            <Markdown className="text-gray-800 markdown">
+                {props.content}
+            </Markdown>
+        </div>
+    </>
+);

src/routes/BiasDetection.tsx

@@ -25,6 +25,10 @@ const PAGE_STYLE = `
             display: none !important; 
         }
 
+        .showonprint {
+            display: block !important;
+        }
+
         @page { 
             size: landscape; 
             margin: 30px 20px;