feta:plugin page temporary commit

2026-06-18 19:44:21 +00:00 · 2025-04-26 18:23:52 +08:00
parent e03e12539a
commit 4db15fcac7
7 changed files with 233 additions and 2 deletions
@@ -0,0 +1,33 @@
+import styles from "./pluginCard.module.css"
+import {PluginCardVO} from "@/app/home/plugins/plugin-installed/PluginCardVO";
+
+export default function PluginCardComponent({
+    cardVO
+}: {
+    cardVO: PluginCardVO
+}) {
+    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}`}>
+
+                </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.iconVersionContainer}`}>
+
+                </div>
+            </div>
+        </div>
+    );
+}
@@ -0,0 +1,49 @@
+.cardContainer {
+    width: 360px;
+    height: 129px;
+    background-color: #FFF;
+    border-radius: 9px;
+    box-shadow: rgba(0, 0, 0, 0.4) 0 1px 1px -1px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: space-evenly;
+}
+
+.cardHeader {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #79c1f4;
+
+    .iconVersionContainer {
+        width: 100px;
+        height: 100%;
+        background-color: #063a5a;
+    }
+}
+
+.cardContent {
+    width: 100%;
+    height: 70px;
+    background-color: #e38787;
+}
+
+.cardFooter {
+    width: 100%;
+    height: 30px;
+    background-color: #f8ff6d;
+}
+
+
+.fontGray {
+    color: #6C6C6C;
+}
+
+.boldFont {
+    font-size: 22px;
+    font-weight: bold;
+}