feat: ScanStatus component is ready to use it

components/index.ts

@@ -1,4 +1,5 @@
 export * from "./providers/AccountInfo";
+export * from "./providers/ScanStatus";
 export * from "./ui/header/Header";
 export * from "./ui/sidebar";
 export * from "./ui/table/CustomTable";

components/providers/ScanStatus.tsx

@@ -0,0 +1,28 @@
+import { formatDuration, intervalToDuration, parseISO } from "date-fns";
+import React from "react";
+
+interface ScanStatusProps {
+  status: string;
+  createdAt: string; // ISO string
+}
+
+export const ScanStatus: React.FC<ScanStatusProps> = ({
+  status,
+  createdAt,
+}) => {
+  const duration = intervalToDuration({
+    start: parseISO(createdAt),
+    end: new Date(),
+  });
+
+  const formattedDuration = formatDuration(duration, { delimiter: ", " });
+
+  return (
+    <div className="border-none max-w-fit">
+      <div className="flex flex-col space-y-2">
+        <span className="text-md font-semibold">{status}</span>
+        <span className="text-sm text-gray-500">{formattedDuration}</span>
+      </div>
+    </div>
+  );
+};