feat(ui): add dropdown actions for game cards

Andy-K-Sparklight · Jan 27, 2025 · 1ddc16e · 1ddc16e
1 parent 3fb364d
commit 1ddc16e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 4 deletions.
diff --git a/public/i18n/zh-CN/pages.yml b/public/i18n/zh-CN/pages.yml
@@ -12,6 +12,8 @@ games:
   game-card:
     ready: 准备就绪
     unready: 需要安装
+    info: 查看详细信息
+    remove: 移除游戏
 
 settings:
   title: 设置

diff --git a/src/renderer/pages/games/GameCard.tsx b/src/renderer/pages/games/GameCard.tsx
@@ -1,13 +1,27 @@
 import type { GameProfile, GameSummary } from "@/main/game/spec";
 import grassBlock from "@assets/img/grass-block.webp";
-import { Alert, Button, Card, CardBody, Chip, Skeleton, Spinner, Tooltip } from "@heroui/react";
+import {
+    Alert,
+    Button,
+    Card,
+    CardBody,
+    Chip,
+    Dropdown,
+    DropdownItem,
+    DropdownMenu,
+    DropdownTrigger,
+    Skeleton,
+    Spinner,
+    Tooltip
+} from "@heroui/react";
 import { clsx } from "clsx";
 import {
     CheckCircleIcon,
     CirclePlayIcon,
     CloudDownloadIcon,
     DownloadIcon,
     EllipsisIcon,
+    InfoIcon,
     TrashIcon
 } from "lucide-react";
 import { useEffect, useState } from "react";
@@ -139,11 +153,34 @@ function GameCard({ gameSummary }: GameCardProps) {
                             </Button>
                     }
 
-                    <Button isIconOnly>
-                        <EllipsisIcon/>
-                    </Button>
+                    <GameCardDropdown/>
                 </div>
             </div>
         </CardBody>
     </Card>;
 }
+
+function GameCardDropdown() {
+    const { t } = useTranslation("pages", { keyPrefix: "games.game-card" });
+
+    return <Dropdown>
+        <DropdownTrigger>
+            <Button isIconOnly>
+                <EllipsisIcon/>
+            </Button>
+        </DropdownTrigger>
+        <DropdownMenu>
+            <DropdownItem key="info" startContent={<InfoIcon/>}>
+                {t("info")}
+            </DropdownItem>
+            <DropdownItem
+                color="danger"
+                className="text-danger"
+                key="remove"
+                startContent={<TrashIcon/>}
+            >
+                {t("remove")}
+            </DropdownItem>
+        </DropdownMenu>
+    </Dropdown>;
+}