-
-
-
setProfileName(e.target.value)}
- />
+ {modalConfigs.map(({ id, title, onClose, content }) => (
+
-
-
-
-
-
+
+ ))}
diff --git a/src/components/connectBar/index.tsx b/src/components/connectBar/index.tsx
new file mode 100644
index 0000000..a29e438
--- /dev/null
+++ b/src/components/connectBar/index.tsx
@@ -0,0 +1,167 @@
+"use client"
+
+import { connectToPS, syncDataToPS } from "@/helper"
+import useConnectStore from "@/stores/connectStore"
+import useGlobalStore from "@/stores/globalStore"
+import { useTranslations } from "next-intl"
+import { useState } from "react"
+
+export default function ConnectBar() {
+ const transI18n = useTranslations("DataPage")
+ const [message, setMessage] = useState({ text: '', type: '' });
+ const {
+ connectionType,
+ privateType,
+ serverUrl,
+ username,
+ password,
+ setConnectionType,
+ setPrivateType,
+ setServerUrl,
+ setUsername,
+ setPassword
+ } = useConnectStore()
+ const { isConnectPS } = useGlobalStore()
+
+ return (
+
+ {/* Select connection type */}
+
+
+
+
+
+ {/* Show host/port if Other */}
+ {connectionType === "Other" && (
+
+
+
+ setServerUrl(e.target.value)}
+ />
+
+
+
+
+
+
+
+
+ setUsername(e.target.value)}
+ />
+
+
+
+ setPassword(e.target.value)}
+ />
+
+
+ )}
+
+ {message.text && (
+
+ {message.text}
+
+ )}
+
+
+ {/* Status */}
+
+ {transI18n("status")}:
+
+ {isConnectPS ? transI18n("connected") : transI18n("unconnected")}
+
+
+
+ {/* Buttons */}
+
+
+
+ {isConnectPS && (
+
+ )}
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/extraSettingBar/index.tsx b/src/components/extraSettingBar/index.tsx
new file mode 100644
index 0000000..9c85a79
--- /dev/null
+++ b/src/components/extraSettingBar/index.tsx
@@ -0,0 +1,120 @@
+'use client'
+import { motion } from "framer-motion"
+import { EyeOff, Eye, Hammer, RefreshCw, ShieldBan } from "lucide-react"
+import useGlobalStore from '@/stores/globalStore';
+import { useTranslations } from "next-intl";
+
+
+export default function ExtraSettingBar() {
+ const { extraData, setExtraData } = useGlobalStore()
+ const transI18n = useTranslations("DataPage")
+
+ return (
+
+ );
+}
diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
index 57252fc..71a6d2b 100644
--- a/src/components/header/index.tsx
+++ b/src/components/header/index.tsx
@@ -1,5 +1,5 @@
"use client"
-import { connectToPS, downloadJson, syncDataToPS } from "@/helper";
+import { downloadJson } from "@/helper";
import { converterToFreeSRJson } from "@/helper/converterToFreeSRJson";
import { useChangeTheme } from "@/hooks/useChangeTheme";
import { listCurrentLanguage } from "@/constant/constant";
@@ -15,10 +15,11 @@ import useModelStore from "@/stores/modelStore";
import FreeSRImport from "../importBar/freesr";
import { toast } from "react-toastify";
import { micsSchema } from "@/zod";
-import useConnectStore from "@/stores/connectStore";
import useGlobalStore from "@/stores/globalStore";
import MonsterBar from "../monsterBar";
import Image from "next/image";
+import ConnectBar from "../connectBar";
+import ExtraSettingBar from "../extraSettingBar";
const themes = [
{ label: "Winter" },
@@ -55,24 +56,14 @@ export default function Header() {
setIsOpenMonster,
isOpenMonster,
setIsOpenConnect,
- isOpenConnect
+ isOpenConnect,
+ setIsOpenExtra,
+ isOpenExtra
} = useModelStore()
- const [message, setMessage] = useState({ text: '', type: '' });
const [importModal, setImportModal] = useState("enka");
- const {
- connectionType,
- privateType,
- serverUrl,
- username,
- password,
- setConnectionType,
- setPrivateType,
- setServerUrl,
- setUsername,
- setPassword
- } = useConnectStore()
- const { isConnectPS, setIsConnectPS } = useGlobalStore()
+
+ const { isConnectPS, extraData } = useGlobalStore()
useEffect(() => {
@@ -134,17 +125,22 @@ export default function Header() {
handleCloseModal("connect_modal");
return;
}
+ if (!isOpenExtra) {
+ handleCloseModal("extra_modal");
+ return;
+ }
const handleEscKey = (event: KeyboardEvent) => {
if (event.key === 'Escape') {
handleCloseModal("connect_modal");
handleCloseModal("import_modal");
handleCloseModal("monster_modal");
+ handleCloseModal("extra_modal");
}
};
window.addEventListener('keydown', handleEscKey);
return () => window.removeEventListener('keydown', handleEscKey);
- }, [isOpenImport, isOpenMonster, isOpenConnect]);
+ }, [isOpenImport, isOpenMonster, isOpenConnect, isOpenExtra]);
const handleImportDatabase = (event: React.ChangeEvent
) => {
@@ -183,6 +179,56 @@ export default function Header() {
};
+
+ const modalConfigs = [
+ {
+ id: "connect_modal",
+ title: transI18n("psConnection"),
+ isOpen: isOpenConnect,
+ onClose: () => {
+ setIsOpenConnect(false)
+ handleCloseModal("connect_modal")
+ },
+ content:
+ },
+ {
+ id: "import_modal",
+ title: transI18n("importSetting"),
+ isOpen: isOpenImport,
+ onClose: () => {
+ setIsOpenImport(false)
+ handleCloseModal("import_modal")
+ },
+ content: (
+ <>
+ {importModal === "enka" && }
+ {importModal === "freesr" && }
+
+ )
+ },
+ {
+ id: "monster_modal",
+ title: transI18n("monsterSetting"),
+ isOpen: isOpenMonster,
+ onClose: () => {
+ setIsOpenMonster(false)
+ handleCloseModal("monster_modal")
+ },
+ content:
+ },
+ {
+ id: "extra_modal",
+ title: transI18n("extraSetting"),
+ isOpen: isOpenExtra,
+ onClose: () => {
+ setIsOpenExtra(false)
+ handleCloseModal("extra_modal")
+ },
+ content:
+ }
+ ]
+
+
return (
@@ -279,6 +325,20 @@ export default function Header() {
{transI18n("monsterSetting")}
+
+ {extraData && (
+
+
+
+ )}
@@ -386,6 +446,19 @@ export default function Header() {
{transI18n("monsterSetting")}
+ {extraData && (
+
+
+
+ )}
@@ -495,225 +568,30 @@ export default function Header() {