🎨 add store components

website/src/components/Driver.tsx

@@ -1,5 +1,23 @@
 import React from "react";
 
+import drivers from "../../static/drivers.json";
+import { useFilteredObjs } from "../libs/store";
+
 export default function Driver() {
-  return <></>;
+  const {
+    filter,
+    setFilter,
+    filteredObjs: filteredDrivers,
+  } = useFilteredObjs(drivers);
+  return (
+    <>
+      <div>
+        <input
+          value={filter}
+          onChange={(event) => setFilter(event.target.value)}
+        />
+      </div>
+      <div>{filteredDrivers.toString()}</div>
+    </>
+  );
 }

website/src/components/Paginate.tsx

@@ -0,0 +1,5 @@
+import ReactPaginate from "react-paginate";
+
+export function usePagination() {
+  return {};
+}

website/src/libs/store.tsx

@@ -0,0 +1,45 @@
+import { useState } from "react";
+
+type Tag = {
+  label: string;
+  color: string;
+};
+
+type Obj = {
+  module_name?: string;
+  project_link?: string;
+  name: string;
+  desc: string;
+  author: string;
+  homepage: string;
+  tags: Tag[];
+  is_official: boolean;
+};
+
+export function filterObjs(filter: string, objs: Obj[]): Obj[] {
+  return objs.filter((o) => {
+    return (
+      o.module_name?.indexOf(filter) != -1 ||
+      o.project_link?.indexOf(filter) != -1 ||
+      o.name.indexOf(filter) != -1 ||
+      o.desc.indexOf(filter) != -1 ||
+      o.author.indexOf(filter) != -1
+    );
+  });
+}
+
+type useFilteredObjsReturn = {
+  filter: string;
+  setFilter: (filter: string) => void;
+  filteredObjs: Obj[];
+};
+
+export function useFilteredObjs(objs: Obj[]): useFilteredObjsReturn {
+  const [filter, setFilter] = useState<string>("");
+  const filteredObjs = filterObjs(filter, objs);
+  return {
+    filter,
+    setFilter,
+    filteredObjs,
+  };
+}

website/src/pages/index.tsx

@@ -10,30 +10,30 @@ import styles from "../css/index.module.css";
 
 export default function Home() {
   const firstFeature: Feature = {
-    title: "Develop",
+    title: "开发",
     tagline: "fast to code",
     description: "仅需两步，即可开始编写你的机器人",
   } as const;
   const secondFeatures = [
     {
-      title: "Plugin",
+      title: "插件",
       tagline: "build bot with plugins",
       description: "插件化开发，模块化管理",
     },
     {
-      title: "Multi-Platform",
+      title: "跨平台",
       tagline: "write once run everywhere",
       description: "支持多种平台，以及多样的事件响应方式",
     },
   ] as const;
   const thirdFeatures = [
     {
-      title: "Async",
+      title: "异步",
       tagline: "asynchronous first",
       description: "异步优先式开发，提高运行效率",
     },
     {
-      title: "DI",
+      title: "依赖注入",
       tagline: "bultin dependency injection system",
       description: "简单清晰的依赖注入系统，内置依赖函数减少用户代码",
     },