style: remove eslint errors

index.html

@@ -38,6 +38,15 @@
           colors: {
             primary: '#1E40AF'
           }
+        },
+        { 
+          entrypoint: {
+            url: 'https://api.ahiqar.sub.uni-goettingen.de/textapi/ahiqar/arabic-karshuni/collection.json',
+            type: 'collection'
+          },
+          colors: {
+            primary: 'green'
+          }
         }
       ],
       }

src/components/ImageActionButtons.tsx

@@ -14,7 +14,7 @@ interface ImageActions {
     tooltip: string
 }
 
-const ImageActionButtons: FC<ImageActionButtonsProps> = ({primaryColor, panelId}) => {
+const ImageActionButtons: FC<ImageActionButtonsProps> = ({ primaryColor, panelId }) => {
 
 const actions: ImageActions[] = [
     {
@@ -46,15 +46,15 @@ const actionButtons =
         <button
             className="t-p-2 t-rounded hover:t-rounded-full hover:t-bg-gray-100 t-mr-1 t-w-8 t-h-8"
             key={i}
-            id = {action.id}
+            id={action.id}
             title={action.tooltip}
             >
-                <div className="t-flex t-items-center t-justify-center" style={{color: primaryColor}}>
-                    <CustomHTML textHtml={action.icon} width='100%' icon={{type:'icon', width:4, height:3}} />
+                <div className="t-flex t-items-center t-justify-center" style={{ color: primaryColor }}>
+                    <CustomHTML textHtml={action.icon} width='100%' icon={{ type:'icon', width:4, height:3 }} />
                 </div>
 
         </button>
-      ));
+      ))
 
   return (
     <div className="t-flex t-items-center t-justify-center image-action-buttons t-mb-1">

src/components/OpenSeaDragonViewer.tsx

@@ -1,5 +1,5 @@
-import React,{ useEffect, useRef, FC } from 'react';
-import OpenSeadragon from 'openseadragon';
+import React,{ useEffect, useRef, FC } from 'react'
+import OpenSeadragon from 'openseadragon'
 
 import ImageActionButtons from '@/components/ImageActionButtons'
 
@@ -9,8 +9,8 @@ interface OpenSeaDragonViewerProps {
   panelId: string
 }
 
-const OpenSeaDragonViewer: FC<OpenSeaDragonViewerProps> = ({imageUrl, primaryColor, panelId}) => {
-  const viewerRef = useRef<OpenSeadragon.Viewer>();
+const OpenSeaDragonViewer: FC<OpenSeaDragonViewerProps> = ({ imageUrl, primaryColor, panelId }) => {
+  const viewerRef = useRef<OpenSeadragon.Viewer>()
   const viewerId = 'viewer-' + panelId
 
   useEffect(() => {
@@ -25,19 +25,19 @@ const OpenSeaDragonViewer: FC<OpenSeaDragonViewerProps> = ({imageUrl, primaryCol
       zoomOutButton: 'zoom-out-' + panelId,
       fullPageButton: 'full-screen-' + panelId,
       homeButton: 'exit-full-screen-' + panelId
-    });
+    })
 
-    viewerRef.current = viewer;
+    viewerRef.current = viewer
 
     return () => {
-      viewerRef.current?.destroy();
-    };
-  }, []);
+      viewerRef.current?.destroy()
+    }
+  }, [])
   return (
       <div>
           <ImageActionButtons primaryColor={primaryColor} panelId={panelId}/>
           <div id={viewerId} style={{ width: '100%', height: '500px' }} />
       </div>
     )
-};
-export default OpenSeaDragonViewer;
+}
+export default OpenSeaDragonViewer

src/components/PanelsWrapper.tsx

@@ -126,7 +126,7 @@ const PanelsWrapper: FC = () => {
     initData(panels)
   }, [])
 
-  let loadingEl = <div> Loading data ... Please wait a sec</div>
+  const loadingEl = <div> Loading data ... Please wait a sec</div>
   let openedPanels = null
 
   if (!loading && panels) {

src/components/panel/PanelTopBar.tsx

@@ -1,25 +1,25 @@
-import { FC } from 'react';
+import { FC } from 'react'
 
-import TextViewsToggle from '@/components/panel/TextViewsToggle';
-import CustomHTML from '@/components/CustomHTML';
+import TextViewsToggle from '@/components/panel/TextViewsToggle'
+import CustomHTML from '@/components/CustomHTML'
 import { tree } from '@/utils/icons'
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover"
+} from '@/components/ui/popover'
 
 interface PanelTopBarProps {
     panelId: string
 }
 
-const PanelTopBar: FC <PanelTopBarProps>= ({panelId}) => {
+const PanelTopBar: FC <PanelTopBarProps>= ({ panelId }) => {
 
   return (
     <div className="panel-top-bar t-mb-6 t-flex">
       <Popover>
         <PopoverTrigger className="open-tree-button t-h-8 t-w-10 t-relative">
-            <CustomHTML textHtml={tree} icon={{type: 'icon', width:6, height: 6}} />
+            <CustomHTML textHtml={tree} icon={{ type: 'icon', width:6, height: 6 }} />
         </PopoverTrigger>
           <PopoverContent className="t-bg-white t-absolute t-z-10">
               <div className="t-flex t-flex-col t-pt-4 t-pl-3 t-w-80 t-shadow-md t-border-[1px] t-border-solid t-border-gray-300 t-rounded-md">
@@ -34,9 +34,9 @@ const PanelTopBar: FC <PanelTopBarProps>= ({panelId}) => {
           </PopoverContent>
       </Popover>
 
-      <TextViewsToggle panelId = {panelId} />
+      <TextViewsToggle panelId={panelId} />
     </div>
-  );
-};
+  )
+}
 
-export default PanelTopBar;
+export default PanelTopBar

src/components/panel/TextViewsToggle.tsx

@@ -1,6 +1,6 @@
-import { FC, MouseEvent } from 'react';
+import { FC, MouseEvent } from 'react'
 import { textViewOne, textView, splitView, imageView } from '@/utils/icons'
-import CustomHTML from '@/components/CustomHTML';
+import CustomHTML from '@/components/CustomHTML'
 
 import { contentStore } from '@/store/ContentStore'
 
@@ -15,7 +15,7 @@ interface IconKeys {
   image: string
 }  
 
-const TextViewsToggle: FC <TextViewsToggleProps>= ({panelId}) => {
+const TextViewsToggle: FC <TextViewsToggleProps>= ({ panelId }) => {
     const textViewIndex = contentStore(state => state.openedPanels[panelId].textViewIndex)
     const updateTextViewIndex = contentStore(state => state.updateTextViewIndex)
 
@@ -38,17 +38,17 @@ const TextViewsToggle: FC <TextViewsToggleProps>= ({panelId}) => {
             className="t-px-1 t-py-1 t-w-7 t-h-7  t-rounded t-mr-3"
             key={i}
             onClick={(e) => handleTextViewClick(e, i)}
-            style={{'backgroundColor':(textViewIndex === i) ? '#E5E7EB': 'transparent'}}
+            style={{ 'backgroundColor':(textViewIndex === i) ? '#E5E7EB': 'transparent' }}
         >
-            <CustomHTML textHtml={textViewsIcons[title as keyof IconKeys]} icon={{type:'icon', width: 3, height:2}} />
+            <CustomHTML textHtml={textViewsIcons[title as keyof IconKeys]} icon={{ type:'icon', width: 3, height:2 }} />
         </button>
-    ));
+    ))
 
   return (
     <div className="text-views-toggle t-flex t-row t-ml-[40%] t-p-1 t-rounded-md t-h-8">
       {buttons}
     </div>
-  );
-};
+  )
+}
 
-export default TextViewsToggle;
+export default TextViewsToggle

src/components/panel/central-content/ImageView.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'react';
-import OpenSeaDragonViewer from '@/components/OpenSeaDragonViewer';
+import { FC } from 'react'
+import OpenSeaDragonViewer from '@/components/OpenSeaDragonViewer'
 
 import { contentStore } from '@/store/ContentStore'
 
@@ -8,17 +8,17 @@ interface ImageViewProps {
   panelId: string
 }
 
-const ImageView: FC<ImageViewProps> = ({imageUrl, panelId}) => {
+const ImageView: FC<ImageViewProps> = ({ imageUrl, panelId }) => {
 
   const primaryColor = contentStore(state => state.openedPanels[panelId].primaryColor)
 
   return (
     <div className="">
         <div className="t-flex t-flex-col">
-            <OpenSeaDragonViewer imageUrl= {imageUrl} primaryColor={primaryColor} panelId={panelId} />
+            <OpenSeaDragonViewer imageUrl={imageUrl} primaryColor={primaryColor} panelId={panelId} />
         </div>
     </div>
-  );
-};
+  )
+}
 
-export default ImageView;
+export default ImageView

src/components/panel/central-content/PanelCentralContent.tsx

@@ -1,10 +1,10 @@
-import { FC, useEffect, useState } from 'react';
+import { FC, useEffect, useState } from 'react'
 
 import { contentStore } from '@/store/ContentStore'
 
-import TextViewOne from '@/components/panel/central-content/TextViewOne';
+import TextViewOne from '@/components/panel/central-content/TextViewOne'
 import TextView from '@/components/panel/central-content/TextView'
-import SplitView from '@/components/panel/central-content/SplitView';
+import SplitView from '@/components/panel/central-content/SplitView'
 import ImageView from '@/components/panel/central-content/ImageView'
 
 import ErrorComponent from '@/components/ErrorComponent'
@@ -40,7 +40,7 @@ const PanelCentralContent: FC<PanelCentralContentProps> = ({ panelId }) => {
         setText(response.data)
     }
 
-    let contentUrl = content[activeContentTypeIndex].url ?? null
+    const contentUrl = content[activeContentTypeIndex].url ?? null
 
     if (!contentUrl) {
       setError('Error: No content URL found.')
@@ -56,17 +56,17 @@ const PanelCentralContent: FC<PanelCentralContentProps> = ({ panelId }) => {
   }
 
   if (textViewIndex === 0) {
-    return <TextViewOne textHtml = {text}/>
+    return <TextViewOne textHtml={text}/>
   }
   else if (textViewIndex === 1) {
-    return <TextView textHtml = {text} />
+    return <TextView textHtml={text} />
   }
   else if (textViewIndex === 2) {
-    return <SplitView textHtml = {text} imageUrl={imageUrl} panelId = {panelId} />
+    return <SplitView textHtml={text} imageUrl={imageUrl} panelId={panelId} />
   }
   else if (textViewIndex === 3) {
     return <ImageView imageUrl={imageUrl} panelId={panelId}/>
   }
-};
+}
 
-export default PanelCentralContent;
+export default PanelCentralContent

src/components/panel/central-content/SplitView.tsx

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC } from 'react'
 import { contentStore } from '@/store/ContentStore'
-import OpenSeaDragonViewer from '@/components/OpenSeaDragonViewer';
+import OpenSeaDragonViewer from '@/components/OpenSeaDragonViewer'
 
-import CustomHTML from '@/components/CustomHTML';
+import CustomHTML from '@/components/CustomHTML'
 
 interface SplitViewProps {
     textHtml: string,
@@ -18,11 +18,11 @@ const SplitView: FC<SplitViewProps> = ({ textHtml, imageUrl, panelId }) => {
   return (
         <div className="t-flex">
              <div className="t-w-1/2 t-mr-3">
-                <OpenSeaDragonViewer imageUrl= {imageUrl} primaryColor={primaryColor} panelId={panelId} />
+                <OpenSeaDragonViewer imageUrl={imageUrl} primaryColor={primaryColor} panelId={panelId} />
              </div>
             <CustomHTML textHtml={textHtml} width={widthText} />
         </div>
-     );
-};
+     )
+}
 
-export default SplitView;
+export default SplitView

src/components/panel/central-content/TextView.tsx

@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { FC } from 'react'
 
-import CustomHTML from '@/components/CustomHTML';
+import CustomHTML from '@/components/CustomHTML'
 
 interface TextViewOneProps {
     textHtml: string
@@ -12,7 +12,7 @@ const TextViewOne: FC<TextViewOneProps> = ({ textHtml }) => {
         <div>
             <CustomHTML textHtml={textHtml} width='100%' />
         </div>
-   );
-};
+   )
+}
 
-export default TextViewOne;
+export default TextViewOne

src/components/panel/central-content/TextViewOne.tsx

@@ -1,6 +1,6 @@
-import { FC } from 'react';
+import { FC } from 'react'
 
-import CustomHTML from '@/components/CustomHTML';
+import CustomHTML from '@/components/CustomHTML'
 
 interface TextViewOneProps {
     textHtml: string
@@ -11,7 +11,7 @@ const TextViewOne: FC<TextViewOneProps> = ({ textHtml }) => {
         <div>
             <CustomHTML textHtml={textHtml} width='100'/>
         </div>
-  );
-};
+  )
+}
 
-export default TextViewOne;
+export default TextViewOne

src/components/ui/popover.tsx

@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as PopoverPrimitive from "@radix-ui/react-popover"
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
 
-import { cn } from "@/lib/utils"
+import { cn } from '@/lib/utils'
 
 const Popover = PopoverPrimitive.Root
 
@@ -10,13 +10,13 @@ const PopoverTrigger = PopoverPrimitive.Trigger
 const PopoverContent = React.forwardRef<
   React.ElementRef<typeof PopoverPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
->(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
       <PopoverPrimitive.Content
         ref={ref}
         align={align}
         sideOffset={sideOffset}
         className={cn(
-          "z-50 w-72 rounded-md border border-gray-200 bg-white p-4 text-gray-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50",
+          'z-50 w-72 rounded-md border border-gray-200 bg-white p-4 text-gray-950 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:border-gray-800 dark:bg-gray-950 dark:text-gray-50',
           className
         )}
         {...props}

src/lib/utils.ts

@@ -1,6 +1,6 @@
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }