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]}