chore: rename web_ui dir to web

web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx

@@ -0,0 +1,65 @@
+import styles from "./pluginCard.module.css";
+import { PluginCardVO } from "@/app/home/plugins/plugin-installed/PluginCardVO";
+import { GithubOutlined, LinkOutlined, ToolOutlined } from "@ant-design/icons";
+import { Switch, Tag } from "antd";
+import { useState } from "react";
+import { httpClient } from "@/app/infra/http/HttpClient";
+
+export default function PluginCardComponent({
+  cardVO
+}: {
+  cardVO: PluginCardVO;
+}) {
+  const [initialized, setInitialized] = useState(cardVO.isInitialized);
+  const [switchEnable, setSwitchEnable] = useState(true);
+
+  function handleEnable() {
+    setSwitchEnable(false);
+    httpClient
+      .togglePlugin(cardVO.author, cardVO.name, !initialized)
+      .then(() => {
+        setInitialized(!initialized);
+      })
+      .catch((err) => {
+        console.log("error: ", err);
+      })
+      .finally(() => {
+        setSwitchEnable(true);
+      });
+  }
+  return (
+    <div className={`${styles.cardContainer}`}>
+      {/*  header  */}
+      <div className={`${styles.cardHeader}`}>
+        {/* left author */}
+        <div className={`${styles.fontGray}`}>{cardVO.author}</div>
+        {/*  right icon & version  */}
+        <div className={`${styles.iconVersionContainer}`}>
+          <GithubOutlined style={{ fontSize: "26px" }} type="setting" />
+          <Tag color="#108ee9">v{cardVO.version}</Tag>
+        </div>
+      </div>
+      {/*  content  */}
+      <div className={`${styles.cardContent}`}>
+        <div className={`${styles.boldFont}`}>{cardVO.name}</div>
+        <div className={`${styles.fontGray}`}>{cardVO.description}</div>
+      </div>
+      {/*  footer  */}
+      <div className={`${styles.cardFooter}`}>
+        <div className={`${styles.linkSettingContainer}`}>
+          <div className={`${styles.link}`}>
+            <LinkOutlined style={{ fontSize: "22px" }} />
+            <span>1</span>
+          </div>
+          <ToolOutlined style={{ fontSize: "22px" }} />
+        </div>
+
+        <Switch
+          value={initialized}
+          onClick={handleEnable}
+          disabled={!switchEnable}
+        />
+      </div>
+    </div>
+  );
+}

web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css

@@ -0,0 +1,76 @@
+.cardContainer {
+    width: 360px;
+    height: 140px;
+    box-sizing: border-box;
+    background-color: #FFF;
+    border-radius: 9px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-evenly;
+}
+
+.cardHeader {
+    width: 90%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .iconVersionContainer {
+        width: 90px;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+    }
+}
+
+.cardContent {
+    width: 90%;
+
+    height: 70px;
+}
+
+.cardFooter {
+    width: 90%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+}
+
+
+.fontGray {
+    color: #6C6C6C;
+}
+
+.boldFont {
+    font-size: 22px;
+    font-weight: bold;
+}
+
+.linkSettingContainer {
+    width: 80px;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+
+    .link {
+        width: 32px;
+        cursor: pointer;
+        text-align: center;
+        display: flex;
+        flex-direction: row;
+        align-self: center;
+        justify-content: space-between;
+    }
+}