From db30c0253d78795d538471d08f8ccf3740463eb1 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Tue, 23 Jul 2024 15:37:10 +0200
Subject: [PATCH] feat: ScanStatus component is ready to use it

---
 components/index.ts                 |  1 +
 components/providers/ScanStatus.tsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 29 insertions(+)
 create mode 100644 components/providers/ScanStatus.tsx

diff --git a/components/index.ts b/components/index.ts
index 781f3a8b73..c9c0537492 100644
--- a/components/index.ts
+++ b/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";
diff --git a/components/providers/ScanStatus.tsx b/components/providers/ScanStatus.tsx
new file mode 100644
index 0000000000..e0d826edbd
--- /dev/null
+++ b/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>
+  );
+};