hover color and line

Author: omursahin

web-report/src/components/EndpointAccordion.tsx

@@ -2,7 +2,7 @@ import {AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui
 import {Badge} from "@/components/ui/badge.tsx";
 import React, {useState} from "react";
 import {TestCases} from "@/components/TestCases.tsx";
-import {getColor} from "@/lib/utils";
+import {getColor, getHoverColor} from "@/lib/utils";
 
 interface IStatusType {
     code: number | string;
@@ -86,7 +86,7 @@ export const EndpointAccordion: React.FC<IEndpointAccordionProps> = ({
                                     setSelectedCode(code.code);
                                     setIsFault(false);
                                 }}
-                                       className={`${getColor(code.code, true, false)} ${getSelectedStyle(code.code, false)} hover:bg-green-600 cursor-pointer text-white font-mono text-base border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`}>
+                                       className={`${getColor(code.code, true, false)} ${getSelectedStyle(code.code, false)} ${getHoverColor(code.code, false)} cursor-pointer text-white font-mono text-base border-2 border-black shadow-[2px_2px_0px_0px_rgba(0,0,0,1)]`}>
                                     {code.code == -1 ? "NO-RESPONSE" : `H${code.code}`}
                                 </Badge>
                             ))

web-report/src/components/ui/accordion.tsx

@@ -17,7 +17,7 @@ function AccordionItem({
   return (
     <AccordionPrimitive.Item
       data-slot="accordion-item"
-      className={cn("border-b last:border-b-0", className)}
+      className={cn("border-b", className)}
       {...props}
     />
   )

web-report/src/lib/utils.tsx

@@ -29,6 +29,18 @@ const getColorNumber = (code: number, isBackground: boolean) => {
     if (code >= 500) return isBackground ? "bg-red-500" : "text-red-500";
 };
 
+export const getHoverColor = (code: string | number | null | undefined, isFault: boolean): string => {
+    if (isFault) return "hover:bg-red-400";
+    if (code === null || code === undefined || code === "") return "hover:bg-gray-400";
+    const num = Number(code);
+    if (isNaN(num)) return "hover:bg-red-400";
+    if (num >= 200 && num < 300) return "hover:bg-green-600";
+    if (num >= 300 && num < 400) return "hover:bg-blue-600";
+    if (num >= 400 && num < 500) return "hover:bg-orange-600";
+    if (num >= 500) return "hover:bg-red-600";
+    return "hover:bg-gray-400";
+};
+
 export const fetchFileContent = async (filePath: string): Promise<string | object> => {
     try {
         const response = await fetch(filePath);