Packages

2024-06-24 18:59:28 +02:00
parent e39cdce873
commit 83f760bd8b
19 changed files with 8550 additions and 199 deletions
@@ -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;
+}
@@ -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;