- improved ui for dashboard

- added refetch fn

src/ui/CardHeader.tsx

@@ -1,22 +1,27 @@
 import clsx from "clsx";
 import StatusIndicators from "./StatusIndicators";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import type { IconProp } from "@fortawesome/fontawesome-svg-core";
 
 type CameraOverviewHeaderProps = {
   title?: string;
   status?: string;
+  refetch?: () => void;
+  icon?: IconProp;
 };
-const CardHeader = ({ title, status }: CameraOverviewHeaderProps) => {
-  console.log(status);
+const CardHeader = ({ title, status, icon, refetch }: CameraOverviewHeaderProps) => {
   return (
     <div
       className={clsx(
         "w-full border-b border-gray-600 flex flex-row items-center space-x-2 mb-6 relative justify-between",
       )}
     >
-      <div className="flex items-center space-x-1">
-        {/* {icon && <FontAwesomeIcon icon={icon} className="size-4" />} */}
-        {status && <StatusIndicators status={status} />}
-        <h2 className="text-xl">{title}</h2>
+      <div className="flex flex-row items-center w-full justify-between">
+        <h2 className="flex flex-row text-xl items-center">
+          {status && <StatusIndicators status={status} />}
+          {title}
+        </h2>
+        {icon && <FontAwesomeIcon icon={icon} className="size-4" onClick={refetch} />}
       </div>
     </div>
   );