🚧 process store pagination

website/src/components/Adapter.tsx

@@ -1,5 +1,48 @@
 import React from "react";
+import { usePagination } from "react-use-pagination";
 
-export default function Adapter() {
-  return <></>;
+import adapters from "../../static/adapters.json";
+import { useFilteredObjs } from "../libs/store";
+import Paginate from "./Paginate";
+
+export default function Adapter(): JSX.Element {
+  const {
+    filter,
+    setFilter,
+    filteredObjs: filteredAdapters,
+  } = useFilteredObjs(adapters);
+
+  const props = usePagination({
+    totalItems: filteredAdapters.length,
+    initialPageSize: 10,
+  });
+  const { startIndex, endIndex } = props;
+  const currentAdapters = filteredAdapters.slice(startIndex, endIndex + 1);
+
+  return (
+    <>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 px-4">
+        <input
+          className="w-full px-4 py-2 border rounded-full bg-light-nonepress-100 dark:bg-dark-nonepress-100"
+          value={filter}
+          placeholder="搜索适配器"
+          onChange={(event) => setFilter(event.target.value)}
+        />
+        <button className="w-full rounded-lg bg-hero text-white" disabled>
+          发布适配器
+        </button>
+      </div>
+      <div className="grid grid-cols-1 p-4">
+        <Paginate {...props} />
+      </div>
+      <div>
+        {currentAdapters.map((driver, index) => (
+          <p key={index}>{driver.name}</p>
+        ))}
+      </div>
+      <div className="grid grid-cols-1 p-4">
+        <Paginate {...props} />
+      </div>
+    </>
+  );
 }

website/src/components/Bot.tsx

@@ -1,5 +1,48 @@
 import React from "react";
+import { usePagination } from "react-use-pagination";
 
-export default function Bot() {
-  return <></>;
+import bots from "../../static/bots.json";
+import { useFilteredObjs } from "../libs/store";
+import Paginate from "./Paginate";
+
+export default function Adapter(): JSX.Element {
+  const {
+    filter,
+    setFilter,
+    filteredObjs: filteredBots,
+  } = useFilteredObjs(bots);
+
+  const props = usePagination({
+    totalItems: filteredBots.length,
+    initialPageSize: 10,
+  });
+  const { startIndex, endIndex } = props;
+  const currentBots = filteredBots.slice(startIndex, endIndex + 1);
+
+  return (
+    <>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 px-4">
+        <input
+          className="w-full px-4 py-2 border rounded-full bg-light-nonepress-100 dark:bg-dark-nonepress-100"
+          value={filter}
+          placeholder="搜索机器人"
+          onChange={(event) => setFilter(event.target.value)}
+        />
+        <button className="w-full rounded-lg bg-hero text-white" disabled>
+          发布机器人
+        </button>
+      </div>
+      <div className="grid grid-cols-1 p-4">
+        <Paginate {...props} />
+      </div>
+      <div>
+        {currentBots.map((driver, index) => (
+          <p key={index}>{driver.name}</p>
+        ))}
+      </div>
+      <div className="grid grid-cols-1 p-4">
+        <Paginate {...props} />
+      </div>
+    </>
+  );
 }

website/src/components/Card/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import Link from "@docusaurus/Link";
+
+import type { Obj } from "../../libs/store";
+
+export default function Card({
+  name,
+  desc,
+  author,
+  homepage,
+}: Obj): JSX.Element {
+  return (
+    <div className="block max-w-full border rounded-lg outline-none no-underline bg-white shadow">
+      <div>
+        {name}
+        {homepage && <Link href={homepage}></Link>}
+      </div>
+      <div>{desc}</div>
+      <div>{author}</div>
+    </div>
+  );
+}

website/src/components/Driver.tsx

@@ -17,7 +17,7 @@ export default function Driver(): JSX.Element {
     initialPageSize: 10,
   });
   const { startIndex, endIndex } = props;
-  const currentDrivers = filteredDrivers.slice(startIndex, endIndex);
+  const currentDrivers = filteredDrivers.slice(startIndex, endIndex + 1);
 
   return (
     <>
@@ -28,7 +28,7 @@ export default function Driver(): JSX.Element {
           placeholder="搜索驱动器"
           onChange={(event) => setFilter(event.target.value)}
         />
-        <button className="w-full rounded bg-hero text-white" disabled>
+        <button className="w-full rounded-lg bg-hero text-white opacity-60">
           发布驱动器
         </button>
       </div>

website/src/components/Paginate/index.tsx

@@ -4,6 +4,8 @@ import { usePagination } from "react-use-pagination";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import styles from "./styles.module.css";
+
 export default function Paginate({
   totalPages,
   setPage,
@@ -20,7 +22,15 @@ export default function Paginate({
       <ReactPaginate
         pageCount={totalPages}
         onPageChange={onPageChange}
-        containerClassName="w-full m-w-full inline-flex justify-center align-center m-0 pl-0 list-none"
+        containerClassName={styles.container}
+        pageClassName={styles.li}
+        pageLinkClassName={styles.a}
+        previousClassName={styles.li}
+        previousLinkClassName={styles.a}
+        nextClassName={styles.li}
+        nextLinkClassName={styles.a}
+        activeLinkClassName={styles.active}
+        disabledLinkClassName={styles.disabled}
         breakLabel={<FontAwesomeIcon icon="ellipsis-h" />}
         previousLabel={<FontAwesomeIcon icon="chevron-left" />}
         nextLabel={<FontAwesomeIcon icon="chevron-right" />}

website/src/components/Paginate/styles.module.css

@@ -0,0 +1,29 @@
+.container {
+  @apply w-full max-w-full inline-flex justify-center items-center m-0 pl-0 list-none;
+}
+
+.li {
+  @apply flex items-center;
+}
+
+.a {
+  height: 34px;
+  width: auto;
+  min-width: 34px;
+  @apply m-1 px-1 border-2 rounded shadow-lg text-center;
+  @apply text-black;
+  @apply bg-light-nonepress-100;
+}
+
+:global(.dark) .a {
+  @apply text-white bg-dark-nonepress-100;
+}
+
+.active {
+  @apply bg-hero text-white border-hero;
+}
+
+
+.disabled {
+  @apply opacity-60 pointer-events-none;
+}

website/src/components/Plugin.tsx

@@ -1,5 +1,49 @@
 import React from "react";
+import { usePagination } from "react-use-pagination";
 
-export default function Plugin() {
-  return <></>;
+import plugins from "../../static/plugins.json";
+import { useFilteredObjs } from "../libs/store";
+import Card from "./Card";
+import Paginate from "./Paginate";
+
+export default function Adapter(): JSX.Element {
+  const {
+    filter,
+    setFilter,
+    filteredObjs: filteredPlugins,
+  } = useFilteredObjs(plugins);
+
+  const props = usePagination({
+    totalItems: filteredPlugins.length,
+    initialPageSize: 10,
+  });
+  const { startIndex, endIndex } = props;
+  const currentPlugins = filteredPlugins.slice(startIndex, endIndex + 1);
+
+  return (
+    <>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mt-4 px-4">
+        <input
+          className="w-full px-4 py-2 border rounded-full bg-light-nonepress-100 dark:bg-dark-nonepress-100"
+          value={filter}
+          placeholder="搜索插件"
+          onChange={(event) => setFilter(event.target.value)}
+        />
+        <button className="w-full rounded-lg bg-hero text-white" disabled>
+          发布插件
+        </button>
+      </div>
+      <div className="grid grid-cols-1 p-4">
+        <Paginate {...props} />
+      </div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
+        {currentPlugins.map((driver, index) => (
+          <Card key={index} {...driver} />
+        ))}
+      </div>
+      <div className="grid grid-cols-1 p-4">
+        <Paginate {...props} />
+      </div>
+    </>
+  );
 }

website/src/libs/store.ts

@@ -1,11 +1,11 @@
 import { useState } from "react";
 
-type Tag = {
+export type Tag = {
   label: string;
   color: string;
 };
 
-type Obj = {
+export type Obj = {
   module_name?: string;
   project_link?: string;
   name: string;

website/src/pages/store.mdx

@@ -14,7 +14,7 @@ import Bot from "../components/Bot";
 # 商店
 
 <div className="w-full border rounded shadow">
-  <Tabs defaultValue="plugin" className="justify-center font-light text-sm">
+  <Tabs defaultValue="plugin" className="justify-center font-light">
     <TabItem value="driver" label="驱动器">
       <Driver />
     </TabItem>