From ce675e45c63bea7d2ea4ea1065f76759801e6654 Mon Sep 17 00:00:00 2001
From: srgooglo <srgooglo@ragestudio.net>
Date: Tue, 14 Nov 2023 22:46:08 +0100
Subject: [PATCH] added `ManifestInfo` component

---
 .../src/components/ManifestInfo/index.jsx     | 99 +++++++++++++++++++
 .../src/components/ManifestInfo/index.less    | 70 +++++++++++++
 2 files changed, 169 insertions(+)
 create mode 100644 src/renderer/src/components/ManifestInfo/index.jsx
 create mode 100644 src/renderer/src/components/ManifestInfo/index.less

diff --git a/src/renderer/src/components/ManifestInfo/index.jsx b/src/renderer/src/components/ManifestInfo/index.jsx
new file mode 100644
index 0000000..1d47268
--- /dev/null
+++ b/src/renderer/src/components/ManifestInfo/index.jsx
@@ -0,0 +1,99 @@
+import React from "react"
+import * as antd from "antd"
+import { MdDownloadForOffline, MdAccountCircle, MdTag } from "react-icons/md"
+
+import "./index.less"
+
+const ManifestInfo = (props) => {
+    const [loading, setLoading] = React.useState(true)
+    const [manifest, setManifest] = React.useState(null)
+    const [error, setError] = React.useState(null)
+
+    async function handleInstall() {
+        await ipc.exec("bundle:install", props.manifest)
+
+        if (typeof props.close === "function") {
+            props.close()
+        }
+    }
+
+    async function loadManifest(url) {
+        setLoading(true)
+
+        try {
+            const result = await ipc.exec("bundle:read", url)
+
+            setManifest(JSON.parse(result))
+
+            setLoading(false)
+        } catch (error) {
+            setError(error)
+        }
+    }
+
+    React.useEffect(() => {
+        if (typeof props.manifest === "string") {
+            loadManifest(props.manifest)
+        } else {
+            setLoading(false)
+        }
+    }, [])
+
+    if (error) {
+        return <antd.Result status="error" title={error.message} />
+    }
+
+    if (loading) {
+        return <antd.Skeleton active />
+    }
+
+    return <div className="manifest_info">
+        <div className="manifest_info-header">
+            <div
+                className="manifest_info-icon"
+            >
+                <img
+                    src={manifest.icon}
+                />
+            </div>
+
+            <h1>
+                {manifest.pack_name}
+            </h1>
+        </div>
+
+        <div className="manifest_info-description">
+            <p>
+                {manifest.description}
+            </p>
+        </div>
+
+        <div className="manifest_info-extra_info">
+            <div className="manifest_info-extra_info-item">
+                <MdDownloadForOffline />
+                0 MB
+            </div>
+
+            <div className="manifest_info-extra_info-item">
+                <MdAccountCircle />
+                {manifest.author}
+            </div>
+
+            <div className="manifest_info-extra_info-item">
+                <MdTag />
+                v{manifest.version}
+            </div>
+        </div>
+
+        <div className="manifest_info-actions">
+            <antd.Button
+                type="primary"
+                onClick={handleInstall}
+            >
+                Install
+            </antd.Button>
+        </div>
+    </div>
+}
+
+export default ManifestInfo
\ No newline at end of file
diff --git a/src/renderer/src/components/ManifestInfo/index.less b/src/renderer/src/components/ManifestInfo/index.less
new file mode 100644
index 0000000..235134b
--- /dev/null
+++ b/src/renderer/src/components/ManifestInfo/index.less
@@ -0,0 +1,70 @@
+.manifest_info {
+    display: flex;
+    flex-direction: column;
+
+    gap: 20px;
+
+    .manifest_info-header {
+        display: flex;
+        flex-direction: row;
+
+        align-items: center;
+
+        gap: 20px;
+
+        .manifest_info-icon {
+            width: 80px;
+            height: 80px;
+
+            border-radius: 12px;
+
+            background-color: var(--background-color-secondary);
+
+            overflow: hidden;
+
+            img {
+                width: 100%;
+                height: 100%;
+
+                object-fit: contain;
+            }
+        }
+
+        h1 {
+            font-size: 1.6rem;
+        }
+    }
+
+    .manifest_info-extra_info {
+        display: flex;
+        flex-direction: column;
+
+        gap: 7px;
+
+        background-color: var(--background-color-secondary);
+
+        padding: 10px;
+
+        border-radius: 12px;
+
+        .manifest_info-extra_info-item {
+            display: inline-flex;
+            flex-direction: row;
+
+            align-items: center;
+
+            gap: 7px;
+
+            font-family: "DM Mono", monospace;
+
+            svg {
+                font-size: 1.1rem;
+            }
+        }
+    }
+
+    .manifest_info-actions {
+        display: flex;
+        flex-direction: row;
+    }
+}
\ No newline at end of file