Merge pull request #17 from prowler-cloud/PRWLR-4227-Provider-Status-Component

Status component - Provider table

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>
+  );
+};

package.json

@@ -7,6 +7,7 @@
     "@react-aria/ssr": "3.9.4",
     "@react-aria/visually-hidden": "3.8.12",
     "clsx": "2.1.1",
+    "date-fns": "^3.6.0",
     "framer-motion": "~11.1.1",
     "intl-messageformat": "^10.5.0",
     "next": "14.2.3",