add accordion to themeCreator

2026-06-06 03:34:40 +00:00 · 2024-03-31 14:43:42 +11:00
parent 806d2419cb
commit 8ac3b1de71
12 changed files with 59 additions and 25 deletions
@@ -0,0 +1,31 @@
+import { FC, useEffect, useState } from 'react';
+import BackgroundSelector from '../../components/BackgroundSelector';
+import ThemeSelector from '../../components/ThemeSelector';
+import { listThemes } from '../../hooks/ThemeManagment';
+
+const Themes: FC = () => {
+  const [isEditMode, setIsEditMode] = useState<boolean>(false);
+  const [selectedType, setSelectedType] = useState<'background' | 'theme'>('background');
+
+  useEffect(() => {
+    listThemes().then(themes => {
+      if (themes.selectedTheme) {
+        setSelectedType('theme');
+      } else {
+        setSelectedType('background');
+      }
+    });
+  }, [])
+
+  return (
+  <div>
+      <button className="absolute top-12 z-20 right-0 p-2 text-[0.8rem] text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
+        {isEditMode ? 'Done' : 'Edit'}
+      </button>
+    <BackgroundSelector setSelectedType={setSelectedType} selectedType={selectedType} isEditMode={isEditMode} />
+    <ThemeSelector setSelectedType={setSelectedType} selectedType={selectedType} isEditMode={isEditMode} />
+  </div>
+  );
+};
+
+export default Themes;