diff --git a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx index 53b3ecf9..8999534f 100644 --- a/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx +++ b/web/src/app/home/plugins/plugin-installed/plugin-card/PluginCardComponent.tsx @@ -46,20 +46,23 @@ export default function PluginCardComponent({ {/* footer */}
-
-
- - 1 +
+
+
+ + 1 +
+ +
+
+
-
- -
); -} \ No newline at end of file +} diff --git a/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css b/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css index 3ec44fd4..1d09d462 100644 --- a/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css +++ b/web/src/app/home/plugins/plugin-installed/plugin-card/pluginCard.module.css @@ -41,8 +41,29 @@ .cardFooter { width: 90%; height: 30px; + position: relative; } +.footerContainer { + width: 100%; + height: 100%; + display: flex; + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +.linkAndToolContainer { + display: flex; + flex-direction: row; + align-items: center; + gap: 10px; +} + +.switchContainer { + display: flex; + justify-content: flex-end; +} .fontGray { color: #6C6C6C; diff --git a/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx b/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx index 5d96c57f..dcc1dfd0 100644 --- a/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx +++ b/web/src/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardComponent.tsx @@ -1,56 +1,49 @@ -import styles from "./pluginMarketCard.module.css" -import {GithubOutlined, StarOutlined} from '@ant-design/icons'; -import {PluginMarketCardVO} from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO"; -import {Button} from "antd"; +import styles from "./pluginMarketCard.module.css"; +import { GithubOutlined, StarOutlined } from "@ant-design/icons"; +import { PluginMarketCardVO } from "@/app/home/plugins/plugin-market/plugin-market-card/PluginMarketCardVO"; +import { Button } from "antd"; export default function PluginMarketCardComponent({ - cardVO + cardVO }: { - cardVO: PluginMarketCardVO + cardVO: PluginMarketCardVO; }) { + function handleInstallClick(pluginId: string) { + console.log("Install plugin: ", pluginId); + } - - function handleInstallClick (pluginId: string) { - console.log("Install plugin: ", pluginId) - } - - return ( -
- {/* header */} -
- {/* left author */} -
{cardVO.author}
- {/* right icon */} - -
- {/* content */} -
-
{cardVO.name}
-
{cardVO.description}
-
- {/* footer */} -
-
-
- - {cardVO.starCount} -
-
- -
+ return ( +
+ {/* header */} +
+ {/* left author */} +
{cardVO.author}
+ {/* right icon */} + +
+ {/* content */} +
+
{cardVO.name}
+
{cardVO.description}
+
+ {/* footer */} +
+
+
+ + {cardVO.starCount} +
- ); + +
+
+ ); } diff --git a/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css b/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css index 33297b09..97a5e224 100644 --- a/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css +++ b/web/src/app/home/plugins/plugin-market/plugin-market-card/pluginMarketCard.module.css @@ -71,5 +71,6 @@ color: #6062E7; align-self: center; justify-content: space-between; + align-items: center; } } \ No newline at end of file