-
timeline
+
+ {currentScreenShotBase64 && (
+
![]({"data:image/png;base64,")
+ )}
+ {currentScreenShotBase64 ? (
+
+ Here's a screenshot captured just now.
+
+ The relavant features has not been implemented, and you han hit Esc to quit
+ this window.
+
+ Meow! ヽ(=^・ω・^=)丿
+
+ ) : (
+
+ Now capturing a screenshot for your screen...(ง •̀_•́)ง
+
+ )}
- )
+ );
}
diff --git a/pages/settings/index.css b/pages/settings/index.css
new file mode 100644
index 0000000..7ef447c
--- /dev/null
+++ b/pages/settings/index.css
@@ -0,0 +1,19 @@
+#root {
+ overflow: hidden;
+ user-select: none;
+}
+#settings-note a {
+ @apply text-blue-700 dark:text-[#66ccff]
+}
+
+.text-weaken {
+ @apply text-gray-700 dark:text-gray-300;
+}
+
+#settings-scroll-container::-webkit-scrollbar {
+ display: none;
+}
+
+#settings-scroll-container {
+ scrollbar-width: none;
+}
\ No newline at end of file
diff --git a/pages/settings/index.tsx b/pages/settings/index.tsx
index 32a030a..ad5e54a 100644
--- a/pages/settings/index.tsx
+++ b/pages/settings/index.tsx
@@ -1,21 +1,76 @@
-import {useTranslation} from "react-i18next";
-import "src/renderer/app.css";
-import * as pjson from "package.json";
+import { useTranslation } from "react-i18next";
+import "./index.css";
+import { useCallback, useRef, useState } from "react";
+import SettingsGroup from "components/settings/SettingsGroup.tsx";
+import MenuItem from "components/settings/MenuItem.tsx";
+import IconWithText from "components/settings/IconWithText.tsx";
+import Title from "components/settings/Title.tsx";
+import OpenSourceNote from "components/settings/OpenSourceNote.tsx";
+import EnvironmentDetails from "components/settings/EnvironmentDetails.tsx";
+
+interface SettingsGroupRefs {
+ [key: string]: HTMLDivElement;
+}
export default function SettingsPage() {
- const {t} = useTranslation();
+ const { t } = useTranslation();
+ const [groupRefs, setGroupRefs] = useState
({});
+ const containerRef = useRef(null);
+ const titleBarRef = useRef(null);
+
+ const addGroupRef = useCallback((groupName: string, ref: HTMLDivElement) => {
+ setGroupRefs((prevRefs) => {
+ prevRefs[groupName] = ref;
+ return prevRefs;
+ });
+ }, []);
+
+ function scrollToGroup(groupName: string) {
+ const key = groupName as keyof typeof groupRefs;
+ console.log(groupRefs[key]);
+ if (!groupRefs[key]) return;
+ containerRef.current!.scrollTop = groupRefs[key].getBoundingClientRect().top -
+ titleBarRef.current!.getBoundingClientRect().height;
+ }
+
return (
<>
- {t('settings')}
-
- {t('settings')}
+
{t("settings.title")}
+
+
+ {t("settings.title")}
+
+
+
+
+
-
-
About
-
OpenRewind
-
Version: {pjson.version}
+
+