fix: add visit site button

Author: mrpmohiburrahman

category-selector/data/metadata.json

@@ -1,4 +1,4 @@
 {
-  "lastUpdated": "2024-07-10T08:04:27+06:00",
+  "lastUpdated": "2024-07-10T08:27:29+06:00",
   "numLibraries": 1284
 }

pages/popup/src/Popup.css

@@ -53,32 +53,13 @@ body {
   /* Shadow to match item cards */
 }
 
-.info-button-container {
+.button-group {
   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 */
+  gap: 10px;
 }
 
-.additional-info {
-  text-align: left;
-  color: #ffcc00;
-  /* Accent color for the additional info */
-}
-
-.additional-info p {
-  margin: 5px 0;
-}
-
-.visit-site-button {
+.visit-site-button,
+.open-all-button {
   padding: 8px 12px;
   background-color: #ffcc00;
   /* Button background color */
@@ -94,13 +75,15 @@ body {
   /* Button shadow */
 }
 
-.visit-site-button:hover {
+.visit-site-button:hover,
+.open-all-button:hover {
   background-color: #e6b800;
   /* Darker yellow on hover */
   transform: translateY(-2px);
 }
 
-.visit-site-button:active {
+.visit-site-button:active,
+.open-all-button:active {
   background-color: #d1a700;
   /* Even darker yellow on active */
 }
@@ -111,33 +94,6 @@ body {
   /* Accent color */
 }
 
-.open-all-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 */
-}
-
-.open-all-button:hover {
-  background-color: #e6b800;
-  /* Darker yellow on hover */
-  transform: translateY(-2px);
-}
-
-.open-all-button:active {
-  background-color: #d1a700;
-  /* Even darker yellow on active */
-}
-
 .item-list {
   display: flex;
   flex-direction: column;

pages/popup/src/Popup.tsx

@@ -2,16 +2,9 @@
 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<{ lastUpdated: string; numLibraries: number; siteLink: string }> = ({
-  lastUpdated,
-  numLibraries,
-  siteLink,
-}) => {
+const MatchedItemsList: React.FC<{ siteLink: string }> = ({ siteLink }) => {
   const [items, setItems] = useState<Library[]>([]);
   const [loading, setLoading] = useState(true);
 
@@ -44,22 +37,16 @@ const MatchedItemsList: React.FC<{ lastUpdated: string; numLibraries: number; si
 
   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}>
-          Open All Links
-        </button>
+        <div className="button-group">
+          <button className="visit-site-button" onClick={() => window.open(siteLink, '_blank')}>
+            Visit Site
+          </button>
+          <button className="open-all-button" onClick={openAllLinks}>
+            Open All Links
+          </button>
+        </div>
       </div>
       <div className="item-list">
         {items.map((item, index) => (
@@ -87,40 +74,12 @@ const MatchedItemsList: React.FC<{ lastUpdated: string; numLibraries: number; si
     </>
   );
 };
-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);
-
-  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}
-        />
+        <MatchedItemsList siteLink={siteLink} />
       </header>
     </div>
   );