🚧 add store tags

website/src/components/Adapter.tsx

@@ -3,6 +3,7 @@ import { usePagination } from "react-use-pagination";
 
 import adapters from "../../static/adapters.json";
 import { useFilteredObjs } from "../libs/store";
+import Card from "./Card";
 import Paginate from "./Paginate";
 
 export default function Adapter(): JSX.Element {
@@ -28,16 +29,16 @@ export default function Adapter(): JSX.Element {
           placeholder="搜索适配器"
           onChange={(event) => setFilter(event.target.value)}
         />
-        <button className="w-full rounded-lg bg-hero text-white" disabled>
+        <button className="w-full rounded-lg bg-hero text-white">
           发布适配器
         </button>
       </div>
       <div className="grid grid-cols-1 p-4">
         <Paginate {...props} />
       </div>
-      <div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
-        {currentAdapters.map((driver, index) => (
+        {currentAdapters.map((adapter, index) => (
-          <p key={index}>{driver.name}</p>
+          <Card key={index} {...adapter} />
         ))}
       </div>
       <div className="grid grid-cols-1 p-4">

website/src/components/Bot.tsx

@@ -3,6 +3,7 @@ import { usePagination } from "react-use-pagination";
 
 import bots from "../../static/bots.json";
 import { useFilteredObjs } from "../libs/store";
+import Card from "./Card";
 import Paginate from "./Paginate";
 
 export default function Adapter(): JSX.Element {
@@ -28,16 +29,16 @@ export default function Adapter(): JSX.Element {
           placeholder="搜索机器人"
           onChange={(event) => setFilter(event.target.value)}
         />
-        <button className="w-full rounded-lg bg-hero text-white" disabled>
+        <button className="w-full rounded-lg bg-hero text-white">
           发布机器人
         </button>
       </div>
       <div className="grid grid-cols-1 p-4">
         <Paginate {...props} />
       </div>
-      <div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
-        {currentBots.map((driver, index) => (
+        {currentBots.map((bot, index) => (
-          <p key={index}>{driver.name}</p>
+          <Card key={index} {...bot} />
         ))}
       </div>
       <div className="grid grid-cols-1 p-4">

website/src/components/Card/index.tsx

@@ -1,23 +1,85 @@
 import React from "react";
 
 import Link from "@docusaurus/Link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 import type { Obj } from "../../libs/store";
 
+function pickTextColor(bgColor, lightColor, darkColor) {
+  var color = bgColor.charAt(0) === "#" ? bgColor.substring(1, 7) : bgColor;
+  var r = parseInt(color.substring(0, 2), 16); // hexToR
+  var g = parseInt(color.substring(2, 4), 16); // hexToG
+  var b = parseInt(color.substring(4, 6), 16); // hexToB
+  return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? darkColor : lightColor;
+}
+
 export default function Card({
+  module_name,
   name,
   desc,
   author,
   homepage,
+  tags,
+  is_official,
 }: Obj): JSX.Element {
+  const isGithub = /^https:\/\/github.com\/[^/]+\/[^/]+/.test(homepage);
+
   return (
-    <div className="block max-w-full border rounded-lg outline-none no-underline bg-white shadow">
+    <div className="block max-w-full px-4 border-2 rounded-lg outline-none no-underline bg-light-nonepress-100 dark:bg-dark-nonepress-100 border-light-nonepress-200 dark:border-dark-nonepress-200 shadow-md shadow-light-nonepress-300 dark:shadow-dark-nonepress-300">
-      <div>
+      <div className="flex justify-between pt-4 text-lg font-medium">
+        <span>
           {name}
-        {homepage && <Link href={homepage}></Link>}
+          {is_official && (
+            <FontAwesomeIcon
+              icon={["fas", "check-circle"]}
+              className="text-green-600 ml-2"
+            />
+          )}
+        </span>
+        {homepage && (
+          <Link
+            href={homepage}
+            className="text-black dark:text-white opacity-60 hover:text-hero hover:opacity-100"
+          >
+            {isGithub ? (
+              <FontAwesomeIcon icon={["fab", "github"]} />
+            ) : (
+              <FontAwesomeIcon icon={["fas", "link"]} />
+            )}
+          </Link>
+        )}
       </div>
-      <div>{desc}</div>
+      {tags && (
-      <div>{author}</div>
+        <div className="pt-2 pb-4">
+          {tags.map((tag, index) => (
+            <span
+              key={index}
+              className="inline-flex px-3 rounded-full items-center align-middle mr-2"
+              style={{
+                backgroundColor: tag.color,
+                color: pickTextColor(tag.color, "#fff", "#000"),
+              }}
+            >
+              {tag.label}
+            </span>
+          ))}
+        </div>
+      )}
+      {desc && (
+        <div className="pb-4 text-sm font-normal opacity-60">{desc}</div>
+      )}
+      {module_name && (
+        <div className="my-2 text-sm font-normal opacity-60 font-mono">
+          <FontAwesomeIcon icon={["fas", "fingerprint"]} className="mr-2" />
+          {module_name}
+        </div>
+      )}
+      {author && (
+        <div className="my-2 text-sm font-normal opacity-60 font-mono">
+          <FontAwesomeIcon icon={["fas", "user"]} className="mr-2" />
+          {author}
+        </div>
+      )}
     </div>
   );
 }

website/src/components/Driver.tsx

@@ -3,6 +3,7 @@ import { usePagination } from "react-use-pagination";
 
 import drivers from "../../static/drivers.json";
 import { useFilteredObjs } from "../libs/store";
+import Card from "./Card";
 import Paginate from "./Paginate";
 
 export default function Driver(): JSX.Element {
@@ -35,9 +36,9 @@ export default function Driver(): JSX.Element {
       <div className="grid grid-cols-1 p-4">
         <Paginate {...props} />
       </div>
-      <div>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
         {currentDrivers.map((driver, index) => (
-          <p key={index}>{driver.name}</p>
+          <Card key={index} {...driver} />
         ))}
       </div>
       <div className="grid grid-cols-1 p-4">

website/src/components/Paginate/index.tsx

@@ -9,6 +9,7 @@ import styles from "./styles.module.css";
 export default function Paginate({
   totalPages,
   setPage,
+  currentPage,
 }: ReturnType<typeof usePagination>): JSX.Element {
   const onPageChange = useCallback(
     (selectedItem: { selected: number }) => {
@@ -21,6 +22,7 @@ export default function Paginate({
     <nav role="navigation" aria-label="Pagination Navigation">
       <ReactPaginate
         pageCount={totalPages}
+        forcePage={currentPage}
         onPageChange={onPageChange}
         containerClassName={styles.container}
         pageClassName={styles.li}

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

@@ -1,5 +1,5 @@
 .container {
-  @apply w-full max-w-full inline-flex justify-center items-center m-0 pl-0 list-none;
+  @apply w-full max-w-full inline-flex justify-center items-center m-0 pl-0 list-none select-none;
 }
 
 .li {
@@ -11,15 +11,16 @@
   width: auto;
   min-width: 34px;
   @apply m-1 px-1 border-2 rounded shadow-lg text-center;
-  @apply text-black;
+  @apply border-light-nonepress-200 shadow-light-nonepress-300;
-  @apply bg-light-nonepress-100;
+  @apply text-black bg-light-nonepress-100;
 }
 
 :global(.dark) .a {
+  @apply border-dark-nonepress-200 shadow-dark-nonepress-300;
   @apply text-white bg-dark-nonepress-100;
 }
 
-.active {
+.a.active {
   @apply bg-hero text-white border-hero;
 }
 

website/src/components/Plugin.tsx

@@ -29,7 +29,7 @@ export default function Adapter(): JSX.Element {
           placeholder="搜索插件"
           onChange={(event) => setFilter(event.target.value)}
         />
-        <button className="w-full rounded-lg bg-hero text-white" disabled>
+        <button className="w-full rounded-lg bg-hero text-white">
           发布插件
         </button>
       </div>
@@ -37,8 +37,8 @@ export default function Adapter(): JSX.Element {
         <Paginate {...props} />
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 px-4">
-        {currentPlugins.map((driver, index) => (
+        {currentPlugins.map((plugin, index) => (
-          <Card key={index} {...driver} />
+          <Card key={index} {...plugin} />
         ))}
       </div>
       <div className="grid grid-cols-1 p-4">

website/static/plugins.json

@@ -6,7 +6,12 @@
     "desc": "通过戳一戳获取服务器状态",
     "author": "yanyongyu",
     "homepage": "https://github.com/cscs181/QQ-GitHub-Bot/tree/master/src/plugins/nonebot_plugin_status",
-    "tags": [],
+    "tags": [
+      {
+        "label": "server",
+        "color": "#ff0000"
+      }
+    ],
     "is_official": true
   },
   {
@@ -16,7 +21,12 @@
     "desc": "将B站UP主的动态和直播信息推送至QQ",
     "author": "SK-415",
     "homepage": "https://github.com/SK-415/HarukaBot",
-    "tags": [],
+    "tags": [
+      {
+        "label": "bilibili",
+        "color": "#e55d80"
+      }
+    ],
     "is_official": false
   },
   {