Main

src/components/Loading.tsx

@@ -0,0 +1,9 @@
+const Loading = () => {
+  return (
+    <div className="flex justify-center items-center h-full">
+      <span className="loading loading-spinner text-primary"></span>
+    </div>
+  );
+};
+
+export default Loading;

src/components/Navbar.tsx

@@ -3,7 +3,7 @@ import SearchForm from './SearchForm';
 
 const Navbar = () => {
   return (
-    <div className="flex items-center gap-4 py-4 justify-center">
+    <div className="fixed w-full flex items-center gap-4 py-4 justify-center backdrop-blur-md z-10">
       <Logo />
       <SearchForm />
     </div>

src/components/SearchForm.tsx

@@ -30,6 +30,7 @@ const SearchForm = () => {
     historyPush(searchQuery);
     setSearchParams({ domain: searchQuery });
     navigate(`/results?domain=${encodeURIComponent(searchQuery)}`);
+    setTimeout(() => window.scroll(0, 0), 50);
   };
 
   const handleKeyUp = (event: KeyboardEvent): void => {

src/components/SslTable.tsx

@@ -1,39 +1,54 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import { getDays } from '../helpers/getDays';
+import { SslStatus } from '../enums/SslStatus.enum';
+import Loading from './Loading';
 
 const SslTable: React.FC<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   content: Record<string, any> | undefined;
   loading: boolean;
 }> = ({ content, loading }) => {
+  const sslRows = useMemo(() => {
+    if (!content) return [];
+
+    const { issuer, dns_names, not_before, not_after } = content;
+    const remainingDays = getDays(not_after);
+
+    const transformedSslObj = {
+      Status: remainingDays > 0 ? SslStatus.ACTIVE : SslStatus.EXPIRED,
+      Issuer: issuer.friendly_name,
+      Covers: Array.isArray(dns_names) ? dns_names.join(', ') : dns_names,
+      Issued_On: new Date(not_before).toLocaleDateString(),
+      Expires_On: `${new Date(
+        not_after
+      ).toLocaleDateString()} (in ${remainingDays} days)`,
+    };
+
+    return Object.entries(transformedSslObj).map(
+      ([key, value]: [string, string | string[]]) => ({
+        label: key.replace(/_/g, ' '),
+        value,
+      })
+    );
+  }, [content]);
+
   return (
     <div className="flex lg:min-h-80 lg:max-h-96 h-full flex-col break-words shadow-md p-4 rounded-lg cursor-default overflow-y-auto border border-neutral">
       {loading ? (
-        <div className="flex justify-center items-center h-full">
-          <span className="loading loading-spinner text-primary"></span>
-        </div>
+        <Loading />
       ) : !content ? (
         <div className="flex justify-center items-center h-full">
           <p>No SSL certificate found.</p>
         </div>
       ) : (
         <table className="table table-xs">
           <tbody>
-            <tr className="hover">
-              <th className="align-top">Issuer</th>
-              <td>{content.issuer?.friendly_name}</td>
-            </tr>
-            <tr className="hover">
-              <th className="align-top">Covers</th>
-              <td>{content.dns_names?.join(', ')}</td>
-            </tr>
-            <tr className="hover">
-              <th className="align-top">Issued On</th>
-              <td>{new Date(content.not_before).toLocaleDateString()}</td>
-            </tr>
-            <tr className="hover">
-              <th className="align-top">Expires On</th>
-              <td>{new Date(content.not_after).toLocaleDateString()}</td>
-            </tr>
+            {sslRows.map(({ label, value }) => (
+              <tr className="hover" key={label}>
+                <th className="align-top">{label}</th>
+                <td>{value}</td>
+              </tr>
+            ))}
           </tbody>
         </table>
       )}

src/components/WhoisTable.tsx

@@ -1,5 +1,6 @@
 import React, { useMemo } from 'react';
 import { getDays } from '../helpers/getDays';
+import Loading from './Loading';
 const WhoisTable: React.FC<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   content: Record<string, any> | undefined;
@@ -24,9 +25,9 @@ const WhoisTable: React.FC<{
         ? name_servers
         : name_servers.substring(0, name_servers.indexOf(' ')),
       Registered_On: new Date(creation_date).toLocaleDateString(),
-      Expires_On: `${new Date(expiration_date).toLocaleDateString()} (${getDays(
+      Expires_On: `${new Date(
         expiration_date
-      )} days)`,
+      ).toLocaleDateString()} (in ${getDays(expiration_date)} days)`,
       Last_updated_On: new Date(updated_date).toLocaleDateString(),
       Status: Array.isArray(status)
         ? status.map((s: string) => s.substring(0, s.indexOf(' ')))
@@ -45,28 +46,26 @@ const WhoisTable: React.FC<{
   return (
     <div className="flex h-full lg:min-h-80 lg:max-h-96 flex-col break-words shadow-md p-4 rounded-lg cursor-default overflow-y-auto border border-neutral">
       {loading ? (
-        <div className="flex justify-center items-center h-full">
-          <span className="loading loading-spinner text-primary"></span>
-        </div>
+        <Loading />
       ) : !content ? (
         <div className="flex justify-center items-center h-full">
           <p>Whois data could not be fetched.</p>
         </div>
       ) : (
         <table className="table table-xs">
           <tbody>
-            {whoisRows.map(row => (
-              <tr className="hover">
-                <th className="align-top">{row.label}</th>
+            {whoisRows.map(({ label, value }) => (
+              <tr className="hover" key={label}>
+                <th className="align-top">{label}</th>
                 <td>
-                  {Array.isArray(row.value) ? (
+                  {Array.isArray(value) ? (
                     <ul>
-                      {row.value.map((r: string, idx: number) => (
+                      {value.map((r: string, idx: number) => (
                         <li key={`${idx}-${r}`}>{r}</li>
                       ))}
                     </ul>
                   ) : (
-                    row.value
+                    value
                   )}
                 </td>
               </tr>

src/enums/SslStatus.enum.ts

@@ -0,0 +1,4 @@
+export enum SslStatus {
+  ACTIVE = 'Active',
+  EXPIRED = 'Expired',
+}

src/index.css

@@ -36,4 +36,5 @@ html {
   https://github.com/saadeghi/daisyui/issues/3040#issuecomment-2131174823
   */
   scrollbar-gutter: auto !important;
+  scroll-behavior: smooth;
 }

src/views/Results.tsx

@@ -100,8 +100,8 @@ const Results = () => {
   return (
     <>
       <Navbar />
-      <ViewContainer className="p-4">
-        <H1 className="mb-5 text-2xl">
+      <ViewContainer className="p-4 mt-10">
+        <H1 className="my-5 text-2xl">
           Looking up {searchParams.get('domain')}
         </H1>
         <Markers