refactor theme creator menu

src/interface/components/Accordian.tsx

@@ -1,17 +1,28 @@
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { ChevronDownIcon } from '@heroicons/react/24/outline';
 
-const Accordion = ({ children }: { children: React.ReactNode }) => {
+const Accordion = ({ children, title, defaultOpened }: { children: React.ReactNode, title: string, defaultOpened?: boolean }) => {
   const ref = useRef<HTMLDivElement>(null);
   const [shown, setShown] = useState<boolean>(false);
 
+  useEffect(() => {
+    const show = async () => {
+      if (defaultOpened) {
+        await new Promise(resolve => setTimeout(resolve, 100));
+        setShown(true);
+      }
+    };
+
+    show();
+  }, [])
+
   return (
     <div>
       <button onClick={() => setShown(!shown)} className='flex items-center justify-between text-[15px] w-full'>
-        Custom CSS
+        { title }
         <ChevronDownIcon className={`transition-transform duration-300 ${shown ? 'rotate-180' : ''}`} height='24' aria-hidden />
       </button>
-      <div ref={ref} className='overflow-y-hidden transition-all' style={{ height: `${shown ? ref.current?.scrollHeight : '0'}px` }}>
+      <div ref={ref} className='overflow-y-hidden transition-all duration-300 ease-in-out' style={{ height: `${shown ? ref.current?.scrollHeight : '0'}px` }}>
         {children}
       </div>
     </div>

src/interface/components/Checkbox.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+type CheckboxProps = {
+  value: boolean;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+};
+
+const Checkbox: React.FC<CheckboxProps> = ({ value, onChange }) => {
+  return (
+    <label className="flex items-center cursor-pointer">
+      <div className="relative">
+        <input
+          type="checkbox"
+          className="absolute opacity-0"
+          checked={value}
+          onChange={onChange}
+        />
+        <div
+          className={`w-5 h-5 rounded-md bg-gradient-to-tr transition-colors duration-200 ${
+            value
+              ? 'from-blue-500 to-blue-600'
+              : 'from-gray-300 to-gray-400 dark:from-zinc-700 dark:to-zinc-700/50'
+          }`}
+        />
+        {value && (
+          <svg
+            className="absolute inset-0 m-auto text-white"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <polyline points="20 6 9 17 4 12" />
+          </svg>
+        )}
+      </div>
+    </label>
+  );
+};
+
+export default Checkbox;

src/interface/components/CodeEditor.tsx

@@ -30,8 +30,8 @@ export default function CodeEditor({ callback, initialState, height }: { callbac
         tabSize: 2,
       }}
       theme={ darkMode ? githubDark : githubLight }
-      placeholder={"It's time to dream up some code!"}
-      className='rounded-lg'
+      placeholder={"Happy coding!"}
+      className='rounded-lg text-[13px]'
       value={value}
       height={height}
       extensions={[less(), color]}

src/interface/pages/ThemeCreator.tsx

@@ -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 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 className='h-4'></div>
 
-        <div>
-          <label htmlFor='defaultColour' className='pb-1 text-sm'>Default Colour</label>
-          <CodeEditor height='100px' initialState={''} callback={handleSave} />
-        </div>
+        <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 mb-4 text-white transition bg-blue-500 rounded dark:text-white'>
+        <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>
   );