🚧 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() {
+import adapters from "../../static/adapters.json";
-  return <></>;
+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() {
+import bots from "../../static/bots.json";
-  return <></>;
+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() {
+import plugins from "../../static/plugins.json";
-  return <></>;
+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>

website/static/adapters.json

@@ -1,13 +1,13 @@
 [
   {
-    "module_name": "nonebot.adapters.cqhttp",
+    "module_name": "nonebot.adapters.onebot.v11",
-    "project_link": "nonebot-adapter-cqhttp",
+    "project_link": "nonebot-adapter-onebot",
-    "name": "cqhttp",
+    "name": "OneBot V11",
-    "desc": "OneBot(CQHTTP) 协议",
+    "desc": "OneBot V11 协议",
     "author": "yanyongyu",
-    "homepage": "https://github.com/nonebot/nonebot2/tree/master/packages/nonebot-adapter-cqhttp",
+    "homepage": "https://github.com/nonebot/adapter-onebot",
     "tags": [],
-    "is_official": false
+    "is_official": true
   },
   {
     "module_name": "nonebot.adapters.ding",
@@ -15,9 +15,9 @@
     "name": "ding",
     "desc": "钉钉协议",
     "author": "Artin",
-    "homepage": "https://github.com/nonebot/nonebot2/tree/master/packages/nonebot-adapter-ding",
+    "homepage": "https://github.com/nonebot/adapter-ding",
     "tags": [],
-    "is_official": false
+    "is_official": true
   },
   {
     "module_name": "nonebot.adapters.mirai",
@@ -25,9 +25,9 @@
     "name": "mirai",
     "desc": "Mirai-Api-HTTP 协议",
     "author": "Mix",
-    "homepage": "https://github.com/nonebot/nonebot2/tree/master/packages/nonebot-adapter-mirai",
+    "homepage": "https://github.com/nonebot/adapter-mirai",
     "tags": [],
-    "is_official": false
+    "is_official": true
   },
   {
     "module_name": "nonebot.adapters.feishu",
@@ -35,8 +35,28 @@
     "name": "feishu",
     "desc": "飞书协议",
     "author": "StarHeartHunt",
-    "homepage": "https://github.com/nonebot/nonebot2/tree/master/packages/nonebot-adapter-feishu",
+    "homepage": "https://github.com/nonebot/adapter-feishu",
     "tags": [],
-    "is_official": false
+    "is_official": true
+  },
+  {
+    "module_name": "nonebot.adapters.telegram",
+    "project_link": "nonebot-adapter-telegram",
+    "name": "telegram",
+    "desc": "Telegram 协议",
+    "author": "StarHeartHunt",
+    "homepage": "https://github.com/nonebot/adapter-telegram",
+    "tags": [],
+    "is_official": true
+  },
+  {
+    "module_name": "nonebot.adapters.qqguild",
+    "project_link": "nonebot-adapter-qqguild",
+    "name": "QQ 频道",
+    "desc": "QQ 频道官方机器人",
+    "author": "yanyongyu",
+    "homepage": "https://github.com/nonebot/adapter-qqguild",
+    "tags": [],
+    "is_official": true
   }
 ]

website/static/plugins.json

@@ -7,7 +7,7 @@
     "author": "yanyongyu",
     "homepage": "https://github.com/cscs181/QQ-GitHub-Bot/tree/master/src/plugins/nonebot_plugin_status",
     "tags": [],
-    "is_official": false
+    "is_official": true
   },
   {
     "module_name": "haruka_bot",
@@ -37,7 +37,7 @@
     "name": "NoneBot离线文档",
     "homepage": "https://github.com/nonebot/nonebot2/tree/master/packages/nonebot-plugin-docs",
     "tags": [],
-    "is_official": false
+    "is_official": true
   },
   {
     "module_name": "nonebot_plugin_sentry",
@@ -47,17 +47,7 @@
     "name": "Sentry日志监控",
     "homepage": "https://github.com/cscs181/QQ-GitHub-Bot/tree/master/src/plugins/nonebot_plugin_sentry",
     "tags": [],
-    "is_official": false
+    "is_official": true
-  },
-  {
-    "module_name": "nonebot_plugin_test",
-    "project_link": "nonebot-plugin-test",
-    "author": "yanyongyu",
-    "desc": "在浏览器中测试你的 NoneBot 机器人",
-    "name": "前端测试机器人插件",
-    "homepage": "https://github.com/nonebot/plugin-test",
-    "tags": [],
-    "is_official": false
   },
   {
     "module_name": "nonebot_plugin_apscheduler",
@@ -67,7 +57,7 @@
     "name": "定时任务",
     "homepage": "https://github.com/nonebot/plugin-apscheduler",
     "tags": [],
-    "is_official": false
+    "is_official": true
   },
   {
     "module_name": "nonebot_plugin_picsearcher",
@@ -287,7 +277,7 @@
     "author": "yanyongyu",
     "homepage": "https://github.com/nonebot/plugin-localstore",
     "tags": [],
-    "is_official": false
+    "is_official": true
   },
   {
     "module_name": "nonebot_plugin_puppet",
@@ -497,7 +487,7 @@
     "author": "mnixry",
     "homepage": "https://github.com/mnixry/nonebot-plugin-filehost",
     "tags": [],
-    "is_official": false
+    "is_official": true
   },
   {
     "module_name": "nonebot_plugin_simplemusic",