added ManifestInfo component

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

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;
+    }
+}