Packages

pages/_meta.json

@@ -0,0 +1,20 @@
+{
+  "index": {
+    "title": "Home",
+    "type": "page"
+  },
+  "docs": {
+    "title": "Docs",
+    "type": "page"
+  },
+  "packages": {
+    "title": "Packages",
+    "type": "page"
+  },
+  "contact": {
+    "title": "Contact ↗",
+    "type": "page",
+    "href": "https://twitter.com/shuding_",
+    "newWindow": true
+  }
+}

pages/components/Grid.module.css

@@ -0,0 +1,90 @@
+.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

@@ -0,0 +1,74 @@
+import { useEffect, useState } from 'react'
+import { useTheme } from 'nextra-theme-docs';
+import styles from './Grid.module.css';
+
+const Packages = () => {
+  const theme = useTheme().theme;
+  const isDark = theme!== "light";
+  const [CurrentSearchQuery, setCurrentSearchQuery] = useState('');
+  const [currentSearch, setCurrentSearch] = useState([]);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const handleSearchChange = async (value) => {
+    if (value === "") {setCurrentSearch([]);return;}
+    // https://pms-xdib.onrender.com
+    const response = await fetch(`https://pms-xdib.onrender.com/search/${value}/${currentPage}`);
+    const data = await response.json();
+    if (data && data.items) {
+      if (data.items.length === 0 && currentPage > 1) {
+        setCurrentPage(currentPage - 1);
+        return;
+      }
+      const items = data.items.map((item, i) => {
+        return (
+          <div className={isDark ? styles.gridItem : styles.gridItemLight} key={i}>
+            <h1 className={styles.pkgTitle}>{item.name}</h1>
+            <h4 className={styles.pkgVersion}>{item.latest}</h4>
+          </div>
+        )
+      });
+      setCurrentSearch(items);
+    }
+  };
+
+  const filters = <input type="text" className={styles.searchBox} placeholder='Search packages' onChange={(event) => {setCurrentSearchQuery(event.target.value)}} />;
+
+  const handlePrevClick = () => {
+    setCurrentPage(prev => prev > 1 ? prev-1 : prev);
+  };
+  const handleNextClick = () => {
+    setCurrentPage(prev => prev+1);
+  };
+
+  useEffect(() => {
+    const ac = setTimeout(() => {handleSearchChange(CurrentSearchQuery)}, 600);
+    return () => {
+      clearTimeout(ac);
+    }
+  }, [CurrentSearchQuery]);
+
+  useEffect(() => {
+    const ac = setTimeout(() => {handleSearchChange(CurrentSearchQuery)}, 100);
+    return () => {
+      clearTimeout(ac);
+    }
+  }, [currentPage]);
+  
+
+  return (
+    <>
+      {filters}
+      <div>
+        <div className={styles.grid} style={{ gridTemplateColumns: `repeat(${3}, 1fr)` }}>
+          {currentSearch}
+        </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>
+      </div>
+    </>
+  );
+};
+
+export default Packages;

pages/docs/_meta.json

@@ -0,0 +1,17 @@
+{
+  "index": "Introduction",
+  "docs": {
+    "title": "Docs",
+    "type": "page"
+  },
+  "packages": {
+    "title": "Packages",
+    "type": "page"
+  },
+  "contact": {
+    "title": "Contact ↗",
+    "type": "page",
+    "href": "https://twitter.com/shuding_",
+    "newWindow": true
+  }
+}

pages/docs/index.mdx

@@ -0,0 +1,11 @@
+# Introduction
+ 
+Welcome to Nextra! This is a basic docs template. You can use it as a starting point for your own project :)
+
+## What is Nextra?
+
+A **simple**, **powerful** and **flexible** site generation framework with everything you love from Next.js.
+
+## Documentation
+
+The documentation is available at [https://nextra.site](https://nextra.site).

pages/packages.mdx

@@ -0,0 +1,3 @@
+import Packages from './components/packages'
+ 
+<Packages/>