fixes and changes

pages/_meta.json

@@ -10,11 +10,5 @@
   "packages": {
     "title": "Packages",
     "type": "page"
-  },
-  "contact": {
-    "title": "Contact ↗",
-    "type": "page",
-    "href": "https://twitter.com/shuding_",
-    "newWindow": true
   }
 }

pages/components/Grid.module.css

@@ -1,90 +0,0 @@
-.grid {
-  display: grid;
-  gap: 10px;
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-  margin-top: 20px;
-}
-  
-.gridItem {
-  color: #d1d1d1;
-  background-color: #141414;
-  border: 1px solid #202020;
-  padding: 20px; /* Padding inside grid items */
-  text-align: center; /* Centering text inside grid items */
-}
-
-.gridItem:hover {
-  color: #0366d6;
-  background-color: #1976d21c;
-  cursor: pointer;
-  /* border: 1px solid #0366d6; */
-  padding: 20px;
-  text-align: center;
-}
-
-.gridItemLight {
-  background-color: #fff;
-  border: 1px solid #eee;
-  padding: 20px;
-  text-align: center;
-}
-
-.gridItemLight:hover {
-  color: #005cc5;
-  background-color: #1976d220;
-  /* border: 1px solid rgba(59,130,246,.5); */
-  /* border: 1px solid #eee; */
-  padding: 20px;
-  text-align: center;
-}
-
-.pkgTitle {
-  font-weight: bold;
-} 
-
-.pkgVersion {
-  font-size: 12px;
-  font-weight:700;
-} 
-
-.searchBox {
-  padding: 8px;
-  font-size: 16px;
-  outline: none;
-  transition: border-color 0.3s ease;
-  height: 40px;
-  border-radius: 10px;
-  border: 1px solid #005cc523;
-}
-
-.pageBtn {
-  /* border-width: 1px; */
-  /* border-color: #005cc53f; */
-  background-color: #202020;
-  width: 30px;
-  height: 30px;
-}
-
-.pageBtn:hover {
-  background-color: #1976d234;
-}
-
-.pageBtnLight {
-  /* border-width: 1px; */
-  /* border-color: #005cc53f; */
-  /* background-color: #202020; */
-  background-color: #fff;
-  border: 1px solid #eee;
-  width: 30px;
-  height: 30px;
-}
-
-.pageBtnLight:hover {
-  background-color: #1976d234;
-}

pages/components/packages.tsx

@@ -1,11 +1,9 @@
 import { useEffect, useState } from 'react'
 import { useTheme } from 'nextra-theme-docs';
-import styles from './Grid.module.css';
+import styles from './Packages.module.css';
 
 const Packages = () => {
-  const theme = useTheme().theme;
-  const isDark = theme!== "light";
-  const [CurrentSearchQuery, setCurrentSearchQuery] = useState('');
+  const [CurrentSearchQuery, setCurrentSearchQuery] = useState('*');
   const [currentSearch, setCurrentSearch] = useState([]);
   const [currentPage, setCurrentPage] = useState(1);
 
@@ -21,10 +19,10 @@ const Packages = () => {
       }
       const items = data.items.map((item, i) => {
         return (
-          <div className={isDark ? styles.gridItem : styles.gridItemLight} key={i}>
+          <a className={styles.gridItem} key={i} href={item.repo} target="_blank">
             <h1 className={styles.pkgTitle}>{item.name}</h1>
-            <h4 className={styles.pkgVersion}>{item.latest}</h4>
-          </div>
+            <h4 className={styles.pkgVersion}>{item.version}</h4>
+          </a>
         )
       });
       setCurrentSearch(items);
@@ -41,19 +39,20 @@ const Packages = () => {
   };
 
   useEffect(() => {
-    const ac = setTimeout(() => {handleSearchChange(CurrentSearchQuery)}, 600);
+    const ac = setTimeout(() => {handleSearchChange(CurrentSearchQuery!=='' ? CurrentSearchQuery : '*')}, 600);
     return () => {
       clearTimeout(ac);
     }
   }, [CurrentSearchQuery]);
 
   useEffect(() => {
-    const ac = setTimeout(() => {handleSearchChange(CurrentSearchQuery)}, 100);
+    const ac = setTimeout(() => {
+      handleSearchChange(CurrentSearchQuery);
+    }, 300);
     return () => {
       clearTimeout(ac);
     }
   }, [currentPage]);
-  
 
   return (
     <>
@@ -64,8 +63,19 @@ const Packages = () => {
         </div>
       </div>
       <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: "20px" }}>
-        <button className={isDark ? styles.pageBtn : styles.pageBtnLight} onClick={handlePrevClick} style={{marginRight: "20px"}}>{"<"}</button>
-        <button className={isDark ? styles.pageBtn : styles.pageBtnLight} onClick={handleNextClick}>{">"}</button>
+        <button 
+          className={styles.pageBtn} 
+          onClick={handlePrevClick} 
+          style={{marginRight: "20px"}}
+        >
+          {"<"}
+        </button>
+        <button 
+          className={styles.pageBtn} 
+          onClick={handleNextClick}
+        >
+          {">"}
+        </button>
       </div>
     </>
   );