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

refactor theme creator menu

Browse Source
This commit is contained in:
SethBurkart123
2024-03-31 17:56:14 +11:00
parent 869058ff73
commit 01a0cfb683
4 changed files with 105 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/interface/pages/ThemeCreator.tsx
+43 -24
View File
@@ -1,58 +1,77 @@
import CodeEditor from '../components/CodeEditor';
import Accordion from '../components/Accordian';
import { useState } from 'react';
import ColorPicker from 'react-best-gradient-color-picker';
import { SettingsContextProvider } from '../SettingsContext';
import Accordion from '../components/Accordian';
import Switch from '../components/Switch';
export default function ThemeCreator() {
const [theme, setTheme] = useState<CustomTheme>({
name: '',
description: '',
defaultColour: '',
CanChangeColour: false,
CanChangeColour: true,
CustomCSS: '',
CustomImages: []
});
const handleSave = (value: string) => {
// Save the theme
console.log(value)
}
return (
<div className='w-full min-h-[100vh] bg-zinc-100 dark:bg-zinc-800 dark:text-white transition duration-30'>
<div className='flex flex-col gap-2 p-2'>
<h1 className='text-xl font-semibold pb-0.5'>Theme Creator</h1>
<div className='flex flex-col p-2'>
<h1 className='pb-2 text-xl font-semibold'>Theme Creator</h1>
<div>
<label htmlFor='themeName' className='pb-1 text-sm'>Theme Name</label>
<input id='themeName' type='text' placeholder='Whatcha calling it?' value={theme.name} onChange={e => setTheme({ ...theme, name: e.target.value })} className='w-full p-2 mb-4 rounded-lg dark:border-gray-700 dark:bg-zinc-900 dark:text-white' />
<div className='pb-2 text-sm'>Theme Name</div>
<input
id='themeName'
type='text'
placeholder='Whatcha calling it?'
value={theme.name}
onChange={e => setTheme({ ...theme, name: e.target.value })}
className='w-full p-2 mb-4 rounded-lg dark:border-gray-700 dark:bg-zinc-900 dark:text-white' />
</div>
<div>
<label htmlFor='themeDescription' className='pb-1 text-sm'>Description <span className='italic opacity-80'>(optional)</span></label>
<textarea id='themeDescription' placeholder='' value={theme.description} onChange={e => setTheme({ ...theme, description: e.target.value })} className='w-full p-2 mb-4 rounded-lg dark:border-gray-700 dark:bg-zinc-900 dark:text-white' />
<div className='pb-2 text-sm'>Description <span className='italic opacity-80'>(optional)</span></div>
<textarea
id='themeDescription'
value={theme.description}
onChange={e => setTheme({ ...theme, description: e.target.value })}
className='w-full p-2 mb-4 rounded-lg dark:border-gray-700 dark:bg-zinc-900 dark:text-white' />
</div>
<div className=''>
<label htmlFor='defaultColour' className='pb-1 text-sm'>Default Colour</label>
<div className=''>
<Accordion defaultOpened title='Default Theme Colour'>
<div className='p-2 bg-white rounded-lg w-fit dark:bg-zinc-900'>
<ColorPicker
width={278}
disableDarkMode={true}
hideInputs={true}
value={theme.defaultColour}
onChange={(color: string) => setTheme({ ...theme, defaultColour: color })} />
</div>
</div>
<div className='flex items-center justify-between py-2'>
<div className='text-sm '>Allow users to change the colour</div>
<Switch
state={theme.CanChangeColour}
onChange={value => setTheme({ ...theme, CanChangeColour: value })} />
</div>
</Accordion>
<div>
<label htmlFor='defaultColour' className='pb-1 text-sm'>Default Colour</label>
<CodeEditor height='100px' initialState={''} callback={handleSave} />
</div>
<div className='h-4'></div>
<button className='w-full px-4 py-2 mb-4 text-white transition bg-blue-500 rounded dark:text-white'>
<Accordion defaultOpened title='Custom CSS'>
<CodeEditor
height='300px'
initialState={theme.CustomCSS}
callback={(code: string) => setTheme({ ...theme, CustomCSS: code })} />
</Accordion>
<button className='w-full px-4 py-2 my-4 text-white transition bg-blue-500 rounded dark:text-white'>
Save Theme
</button>
<SettingsContextProvider><></></SettingsContextProvider>
</div>
</div>
);