added PackageUpdateAvailable

src/renderer/src/components/PackageUpdateAvailable/index.jsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { Button } from "antd"
+
+import "./index.less"
+
+const PackageUpdateAvailable = ({ update, close }) => {
+    function handleUpdate() {
+        ipc.exec("pkg:update", update.manifest.id)
+
+        close()
+    }
+
+    function handleContinue() {
+        ipc.exec("pkg:execute", update.manifest.id, {
+            force: true
+        })
+
+        close()
+    }
+
+    return <div className="package-update-available">
+        <h1>New update available</h1>
+
+        <p>This package is ready to be updated.</p>
+
+        <code>
+            <p>
+                <b>{update.current_version}</b> -> <b>{update.new_version}</b>
+            </p>
+        </code>
+
+        <div className="package-update-available_actions">
+            <Button
+                onClick={handleContinue}
+            >
+                Continue
+            </Button>
+
+            <Button
+                type="primary"
+                onClick={handleUpdate}
+            >
+                Update
+            </Button>
+        </div>
+    </div>
+}
+
+export default PackageUpdateAvailable

src/renderer/src/components/PackageUpdateAvailable/index.less

@@ -0,0 +1,26 @@
+.package-update-available {
+    display: flex;
+    flex-direction: column;
+
+    gap: 20px;
+
+    h1 {
+        font-size: 1.5rem;
+    }
+
+    code {
+        background-color: var(--background-color-secondary);
+        color: var(--primary-color);
+
+        padding: 20px;
+
+        border-radius: 12px;
+    }
+
+    .package-update-available_actions {
+        display: flex;
+        flex-direction: row;
+
+        gap: 10px;
+    }
+}