feat: DateWithTime component is ready to use it

components/index.ts

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

components/providers/AccountInfo.tsx

@@ -40,7 +40,7 @@ export const AccountInfo: React.FC<AccountInfoProps> = ({
   };
 
   return (
-    <div className="border-none max-w-fit">
+    <div className="max-w-fit">
       <div className="flex items-center space-x-4">
         <div className="flex-shrink-0">{getIcon()}</div>
         <div className="flex-shrink-0 mx-2">{getProviderLogo()}</div>

components/providers/DateWithTime.tsx

@@ -0,0 +1,27 @@
+import { format, parseISO } from "date-fns";
+import React from "react";
+
+interface DateWithTimeProps {
+  dateTime: string; // e.g., "2024-07-17T09:55:14.191475Z"
+  showTime?: boolean;
+}
+
+export const DateWithTime: React.FC<DateWithTimeProps> = ({
+  dateTime,
+  showTime = true,
+}) => {
+  const date = parseISO(dateTime);
+  const formattedDate = format(date, "MMM dd, yyyy");
+  const formattedTime = format(date, "p 'UTC'");
+
+  return (
+    <div className="max-w-fit">
+      <div className="flex flex-col items-center">
+        <span className="text-md font-semibold">{formattedDate}</span>
+        {showTime && (
+          <span className="text-sm text-gray-500">{formattedTime}</span>
+        )}
+      </div>
+    </div>
+  );
+};

components/providers/ScanStatus.tsx

@@ -18,8 +18,8 @@ export const ScanStatus: React.FC<ScanStatusProps> = ({
   const formattedDuration = formatDuration(duration, { delimiter: ", " });
 
   return (
-    <div className="border-none max-w-fit">
-      <div className="flex flex-col space-y-2">
+    <div className="max-w-fit">
+      <div className="flex flex-col">
         <span className="text-md font-semibold">{status}</span>
         <span className="text-sm text-gray-500">{formattedDuration}</span>
       </div>