www: Rework device page

Change-Id: If607e15035c7c340854c2ef29d74f0dfcd5d8910
WitAqua · Feb 16, 2025 · 8226a49 · 8226a49
1 parent b16a298
commit 8226a49
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 28 deletions.
diff --git a/src/components/device-page.tsx b/src/components/device-page.tsx
@@ -29,6 +29,7 @@ const translations = {
     latestBuild: "Latest build:",
     deprecated: "Deprecated",
     deviceNotFound: "Device not found",
+    fileSize: "File Size:",
   },
   ja: {
     loading: "デバイス情報を読み込んでいます...",
@@ -45,6 +46,7 @@ const translations = {
     latestBuild: "最新ビルド：",
     deprecated: "非推奨",
     deviceNotFound: "デバイスが見つかりません",
+    fileSize: "ファイルサイズ:",
   },
 };
 
@@ -139,16 +141,6 @@ export default function DevicePage({ codename }: DevicePageProps) {
             <p className="text-xl text-muted-foreground">{device.codename}</p>
           </div>
         </div>
-        <div className="mb-6">
-          <p className="text-lg">
-            {t.androidVersion}{" "}
-            <span className="font-semibold">{device.latestAndroidVersion}</span>
-          </p>
-          <p className="text-lg">
-            {t.latestBuild}{" "}
-            <span className="font-semibold">{device.latestBuildDate}</span>
-          </p>
-        </div>
         <div className="mb-8">
           <h2 className="text-2xl font-semibold mb-2">{t.maintainer}</h2>
           <p className="text-lg flex items-center">
@@ -160,11 +152,31 @@ export default function DevicePage({ codename }: DevicePageProps) {
                 rel="noopener noreferrer"
                 className="ml-2 text-primary hover:text-primary-focus"
               >
-                <LuGithub className="inline h-6 w-6" />
+                <LuGithub className="inline h-5 w-5 text-cyan-400" />
               </a>
             )}
           </p>
         </div>
+        <div className="mb-6">
+          <p className="text-lg font-bold">
+            {t.fileSize}
+            <span className="font-normal">
+              {(device.size / 1024 ** 3).toFixed(2)} GiB
+            </span>
+          </p>
+          <p className="text-lg font-bold">
+            {"MD5:"} <span className="font-mono font-normal">{device.md5}</span>
+          </p>
+          <p className="text-lg font-bold">
+            {t.androidVersion}
+            {" Version: "}
+            <span className="font-normal">{device.latestAndroidVersion}</span>
+          </p>
+          <p className="text-lg font-bold">
+            {t.latestBuild}{" "}
+            <span className="font-normal">{device.latestBuildDate}</span>
+          </p>
+        </div>
         <div className="flex flex-wrap gap-4">
           <Dialog>
             <DialogTrigger asChild>
@@ -185,9 +197,12 @@ export default function DevicePage({ codename }: DevicePageProps) {
               </DialogHeader>
             </DialogContent>
           </Dialog>
-          <Button onClick={() => handleButtonClick(device.downloadUrl)}>
+          <Button
+            onClick={() => handleButtonClick(device.downloadUrl)}
+            className="bg-cyan-400 hover:bg-cyan-600"
+          >
             <LuDownload className="mr-2 h-4 w-4" />
-            {t.latest}
+            {device.filename}
           </Button>
           <Button
             variant="outline"

diff --git a/src/types/device.ts b/src/types/device.ts
@@ -1,21 +1,23 @@
 export interface Device {
-  name: string
-  codename: string
-  brand: string
+  name: string;
+  codename: string;
+  size: number;
+  md5: number;
+  brand: string;
   maintainer: {
-    name: string
-    github?: string
-  }
-  downloadUrl: string
-  deprecated: boolean
-  latestAndroidVersion: number
-  latestBuildDate: string
-  archiveUrl: string
-  imgsUrl: string
-  installUrl: string
+    name: string;
+    github?: string;
+  };
+  downloadUrl: string;
+  deprecated: boolean;
+  latestAndroidVersion: number;
+  latestBuildDate: string;
+  archiveUrl: string;
+  imgsUrl: string;
+  installUrl: string;
+  filename: string;
 }
 
 export interface DeviceResponse {
-  devices: Device[]
+  devices: Device[];
 }
-