Add empty project type and make it so you can see what is selected

src/newproject/components/OptionButtons.tsx

@@ -1,12 +1,8 @@
+import { JSX } from 'react'
 import './OptionButtons.css'
 
-type ButtonOption = {
-  label: string
-  onClick: () => void
-}
-
 type OptionButtonsProps = {
-  buttons: ButtonOption[]
+  buttons: JSX.Element[]
   name: string | null
 }
 
@@ -15,13 +11,7 @@ export default function OptionButtons ({ buttons, name }: OptionButtonsProps) {
     <>
       <div className='container'>
         <h2 style={{ display: name == null ? 'none' : 'block' }}>{name}</h2>
-        <div className='flex gap-2'>
-          {buttons.map((btn, index) => (
-            <button key={index} onClick={btn.onClick}>
-              {btn.label}
-            </button>
-          ))}
-        </div>
+        <div className='flex gap-2'>{buttons}</div>
       </div>
     </>
   )

src/newproject/routes/Home.css

@@ -9,3 +9,7 @@
 input {
   @apply w-full max-w-md p-2 border border-[rgb(48,48,72)] bg-[rgb(24,24,36)] rounded-lg mt-5;
 }
+
+.projecttypebutton:disabled {
+  @apply bg-[rgb(72,72,96)] border-[rgb(96,96,128)];
+}

src/newproject/routes/Home.tsx

@@ -5,7 +5,7 @@ import { documentDir } from '@tauri-apps/api/path'
 import { open } from '@tauri-apps/plugin-dialog'
 
 export default function Home () {
-  const [projectType, setProjectType] = useState<string>('website')
+  const [projectType, setProjectType] = useState<string>('empty')
   const [projectFolder, setProjectFolder] = useState<string>('')
   const [projectName, setProjectName] = useState<string>('')
 
@@ -48,8 +48,27 @@ export default function Home () {
         </div>
         <OptionButtons
           buttons={[
-            { label: 'Website', onClick: () => setProjectType('website') },
-            { label: 'Web Server', onClick: () => setProjectType('webserver') }
+            <button
+              onClick={() => setProjectType('empty')}
+              className='projecttypebutton'
+              disabled={projectType == 'empty'}
+            >
+              Empty
+            </button>,
+            <button
+              onClick={() => setProjectType('website')}
+              className='projecttypebutton'
+              disabled={projectType == 'website'}
+            >
+              Website
+            </button>,
+            <button
+              onClick={() => setProjectType('webserver')}
+              className='projecttypebutton'
+              disabled={projectType == 'webserver'}
+            >
+              Web Server
+            </button>
           ]}
           name='Project Type'
         />