fix: add lastupdated, number of sorted libraries and visite site button

category-selector/data/metadata.json

@@ -1,4 +1,4 @@
 {
-  "lastUpdated": "2024-07-10T04:36:01+06:00",
+  "lastUpdated": "2024-07-10T07:05:59+06:00",
   "numLibraries": 1284
 }

package.json

@@ -23,7 +23,8 @@
   "type": "module",
   "dependencies": {
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "timeago.js": "^4.0.2"
   },
   "devDependencies": {
     "@semantic-release/changelog": "^6.0.3",

pages/popup/src/Popup.css

@@ -33,7 +33,7 @@ body {
 
 .App-header {
   text-align: center;
-  margin-bottom: 10px;
+  margin-bottom: 20px;
   color: #ffcc00;
   /* Accent color for the header text */
 }
@@ -44,17 +44,67 @@ body {
   align-items: center;
   width: 100%;
   padding: 10px;
-  /* background: #444444; */
-  /* Container background */
   border: 1px solid #555555;
   /* Border color */
   border-radius: 8px;
   margin-bottom: 20px;
-  /* Additional margin to separate from list */
+  /* Ensure even spacing */
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+  /* Shadow to match item cards */
+}
+
+.info-button-container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid #555555;
+  /* Border color */
+  border-radius: 8px;
+  margin-bottom: 20px;
+  /* Ensure even spacing */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   /* Shadow to match item cards */
 }
 
+.additional-info {
+  text-align: left;
+  color: #ffcc00;
+  /* Accent color for the additional info */
+}
+
+.additional-info p {
+  margin: 5px 0;
+}
+
+.visit-site-button {
+  padding: 8px 12px;
+  background-color: #ffcc00;
+  /* Button background color */
+  color: #333333;
+  /* Button text color */
+  border: none;
+  border-radius: 5px;
+  font-size: 0.9rem;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background-color 0.2s ease, transform 0.2s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+  /* Button shadow */
+}
+
+.visit-site-button:hover {
+  background-color: #e6b800;
+  /* Darker yellow on hover */
+  transform: translateY(-2px);
+}
+
+.visit-site-button:active {
+  background-color: #d1a700;
+  /* Even darker yellow on active */
+}
+
 .text-xl {
   font-size: 1.5rem;
   color: #ffcc00;
@@ -91,7 +141,8 @@ body {
 .item-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 20px;
+  /* Ensure even spacing */
   overflow-y: auto;
   /* padding-right: 10px; */
 }

pages/popup/src/Popup.tsx

@@ -2,8 +2,16 @@
 import React, { useEffect, useState } from 'react';
 import '@src/Popup.css';
 import { Library } from './types';
+import { format } from 'timeago.js';
+const siteLink = 'https://mrpmohiburrahman.github.io/similar-react-native-libraries/';
+const metadataCDN_Url =
+  'https://cdn.jsdelivr.net/gh/mrpmohiburrahman/similar-react-native-libraries@main/category-selector/data/metadata.json';
 
-const MatchedItemsList: React.FC = () => {
+const MatchedItemsList: React.FC<{ lastUpdated: string; numLibraries: number; siteLink: string }> = ({
+  lastUpdated,
+  numLibraries,
+  siteLink,
+}) => {
   const [items, setItems] = useState<Library[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -36,6 +44,17 @@ const MatchedItemsList: React.FC = () => {
 
   return (
     <>
+      <div className="info-button-container">
+        <div className="additional-info">
+          <p>{lastUpdated}</p>
+          <p>
+            Number of Sorted Libraries:<strong> {numLibraries}</strong>
+          </p>
+        </div>
+        <button className="visit-site-button" onClick={() => window.open(siteLink, '_blank')}>
+          Visit Site
+        </button>
+      </div>
       <div className="header-button-container">
         <h1 className="text-xl">Matched Libraries</h1>
         <button className="open-all-button" onClick={openAllLinks}>
@@ -68,13 +87,43 @@ const MatchedItemsList: React.FC = () => {
     </>
   );
 };
+const renderLastUpdatedMessage = (message: string) => {
+  const parts = message.split('Last updated: ');
+  if (parts.length > 1) {
+    return (
+      <p>
+        Last updated: <strong>{parts[1]}</strong>
+      </p>
+    );
+  }
+  return <p>{message}</p>;
+};
+
+const Popup: React.FC = () => {
+  const [lastUpdated, setLastUpdated] = useState<string>('');
+  const [numLibraries, setNumLibraries] = useState<number>(0);
 
-const Popup: React.FC = () => (
-  <div className="App">
-    <header className="App-header">
-      <MatchedItemsList />
-    </header>
-  </div>
-);
+  useEffect(() => {
+    fetch(metadataCDN_Url)
+      .then(response => response.json())
+      .then(data => {
+        setLastUpdated(`Last updated: ${format(new Date(data.lastUpdated))}`);
+        setNumLibraries(data.numLibraries);
+      })
+      .catch(error => console.error('Error fetching metadata:', error));
+  }, []);
+
+  return (
+    <div className="App">
+      <header className="App-header">
+        <MatchedItemsList
+          lastUpdated={renderLastUpdatedMessage(lastUpdated)}
+          numLibraries={numLibraries}
+          siteLink={siteLink}
+        />
+      </header>
+    </div>
+  );
+};
 
 export default Popup;