BetterSEQTA/BetterSEQTA-Plus
1
0
Fork 0
mirror of https://github.com/BetterSEQTA/BetterSEQTA-Plus.git synced 2026-06-06 03:34:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

storage listener uses switch

Browse Source
This commit is contained in:
SethBurkart123
2023-11-02 18:38:02 +11:00
parent 1c86fd3f9b
commit 7b0fc29461
4 changed files with 72 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files
interface/src/components/BackgroundSelector.tsx
+9 -7
View File
@@ -15,12 +15,16 @@ export interface Background {
isDownloaded?: boolean;
}
export default function BackgroundSelector() {
interface BackgroundSelectorProps {
selectedType: "background" | "theme";
isEditMode: boolean;
}
export default function BackgroundSelector({ selectedType, isEditMode }: BackgroundSelectorProps) {
const [backgrounds, setBackgrounds] = useState<Background[]>([]);
const [selectedBackground, setSelectedBackground] = useState<string | null>(localStorage.getItem('selectedBackground'));
const [downloadedPresetIds, setDownloadedPresetIds] = useState<string[]>([]);
const [downloadProgress, setDownloadProgress] = useState<Record<string, number>>({});
const [isEditMode, setIsEditMode] = useState<boolean>(false);
const handleFileChange = async (e: ChangeEvent<HTMLInputElement>): Promise<void> => {
const file = e.target.files?.[0];
@@ -89,6 +93,7 @@ export default function BackgroundSelector() {
};
const selectNoBackground = (): void => {
disableTheme();
setSelectedBackground(null);
localStorage.removeItem('selectedBackground');
};
@@ -105,9 +110,6 @@ export default function BackgroundSelector() {
{selectedBackground == null ? 'No Background' : 'Remove Background'}
</button>
<div className="relative">
<button className="absolute top-0 right-0 p-2 text-[0.8rem] text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
{isEditMode ? 'Done' : 'Edit'}
</button>
<h2 className="pb-2 text-lg font-bold">Images</h2>
<div className="flex flex-wrap gap-4">
{/* Image uploader swatch */}
@@ -121,7 +123,7 @@ export default function BackgroundSelector() {
{backgrounds.filter(bg => bg.type === 'image').map(bg => (
<div key={bg.id}
onClick={() => selectBackground(bg.id)}
className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
{isEditMode && (
<div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
onClick={() => deleteBackground(bg.id)}>
@@ -167,7 +169,7 @@ export default function BackgroundSelector() {
<input type="file" accept='image/*, video/*' onChange={handleFileChange} className="absolute inset-0 w-full h-full opacity-0 cursor-pointer" />
</div>
{backgrounds.filter(bg => bg.type === 'video').map(bg => (
<div key={bg.id} onClick={() => selectBackground(bg.id)} className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
<div key={bg.id} onClick={() => selectBackground(bg.id)} className={`relative w-16 h-16 cursor-pointer rounded-xl transition ring dark:ring-white ring-zinc-300 ${isEditMode ? 'animate-shake' : ''} ${selectedBackground === bg.id && selectedType === "background" ? 'dark:ring-2 ring-4' : 'ring-0'}`}>
{isEditMode && (
<div className="absolute top-0 right-0 z-10 flex w-6 h-6 p-2 text-white translate-x-1/2 -translate-y-1/2 bg-red-600 rounded-full place-items-center"
onClick={() => deleteBackground(bg.id)}>
interface/src/pages/Themes.tsx
+12 -3
View File
@@ -1,13 +1,22 @@
import { FC } from 'react';
import { FC, useEffect, useState } from 'react';
import BackgroundSelector from '../components/BackgroundSelector';
import ThemeSelector from '../components/ThemeSelector';
const Themes: FC = () => {
const [isEditMode, setIsEditMode] = useState<boolean>(false);
const [selectedType, setSelectedType] = useState<'background' | 'theme'>('background');
useEffect(() => {
setSelectedType('background');
}, [])
return (
<div>
<BackgroundSelector />
<ThemeSelector />
<button className="absolute top-0 right-0 p-2 text-[0.8rem] text-blue-500" onClick={() => setIsEditMode(!isEditMode)}>
{isEditMode ? 'Done' : 'Edit'}
</button>
<BackgroundSelector selectedType={selectedType} isEditMode={isEditMode} />
<ThemeSelector selectedType={selectedType} isEditMode={isEditMode} />
</div>
);
};