Files
Firefly_Launcher/frontend/src/components/settingModal/index.tsx

118 lines
5.2 KiB
TypeScript

import { CheckUpdateLauncher } from "@/helper"
import useModalStore from "@/stores/modalStore"
import useSettingStore from "@/stores/settingStore"
import useLauncherStore from "@/stores/launcherStore"
import { toast } from "react-toastify"
export default function SettingModal({
isOpen,
onClose
}: {
isOpen: boolean
onClose: () => void
}) {
if (!isOpen) return null
const { setIsOpenSelfUpdateModal } = useModalStore()
const { closingOption, setClosingOption, serverVersion,
proxyVersion, } = useSettingStore()
const { setUpdateData, updateData, launcherVersion } = useLauncherStore()
const CheckUpdate = async () => {
const launcherData = await CheckUpdateLauncher()
if (!launcherData.isUpdate) {
toast.success("Launcher is already up to date")
return
}
setUpdateData({
server: updateData.server,
proxy: updateData.proxy,
launcher: launcherData
})
setIsOpenSelfUpdateModal(true)
}
return (
<div className="fixed inset-0 z-10 flex items-center justify-center bg-black/40 backdrop-blur-sm">
<div className="relative w-[90%] max-w-md bg-base-100 text-base-content rounded-2xl border border-purple-500/30 shadow-2xl shadow-purple-500/30 p-6">
{/* Header */}
<div className="flex justify-between items-center mb-6">
<h3 className="font-extrabold text-2xl text-transparent bg-clip-text bg-gradient-to-r from-pink-400 to-cyan-500">
Settings
</h3>
<button
className="btn btn-circle btn-sm bg-red-600 hover:bg-red-700 text-white border-none shadow-lg"
onClick={onClose}
>
</button>
</div>
{/* Content */}
<div className="flex flex-col gap-6">
{/* Section 1: Launcher Update */}
<div className="p-4 bg-base-200 rounded-xl border border-purple-300 shadow-sm">
<h4 className="font-bold text-lg mb-2">Launcher Update</h4>
<p className="text-sm text-info mb-3">
Check if your launcher is up to date.
</p>
<button
className="btn btn-primary bg-gradient-to-r from-orange-500 to-red-500 hover:from-orange-400 hover:to-red-500 text-white shadow-md hover:shadow-lg transition-all duration-200"
onClick={CheckUpdate}
>
Check for Launcher Updates
</button>
</div>
{/* Section 2: Closing Option */}
<div className="p-4 bg-base-200 rounded-xl border border-purple-300 shadow-sm">
<h4 className="font-bold text-lg mb-2">Closing Options</h4>
<label className="flex items-start gap-3 cursor-pointer select-none">
<input
type="checkbox"
className="checkbox checkbox-primary w-5 h-5 mt-1"
checked={!closingOption.isAsk}
onChange={(e) => {
setClosingOption({
isMinimize: closingOption.isMinimize,
isAsk: !e.target.checked
})
}}
/>
<div className="flex flex-col">
<span className="text-base font-medium text-info">
Set do not ask again
</span>
<span className="text-sm text-accent">
Next time you close the app, it will automatically{" "}
{closingOption.isMinimize ? "minimize to system tray" : "quit the app"}{" "}
without asking.
</span>
</div>
</label>
</div>
{/* Section 3: Launcher Version */}
<div className="p-4 bg-base-200 rounded-xl border border-purple-300 shadow-sm">
<h4 className="font-bold text-lg mb-2">Version</h4>
<div className="flex flex-wrap gap-2">
<p className="text-base text-info">
Server: {serverVersion}
</p>
<p className="text-base text-info">
Proxy: {proxyVersion}
</p>
<p className="text-base text-info">
Launcher: {launcherVersion}
</p>
</div>
</div>
</div>
</div>
</div>
)
}