Added text for the option in the option buttons component

now you know what the option does no way

src/newproject/components/OptionButtons.css

@@ -4,6 +4,10 @@ button {
   @apply bg-[rgb(54,54,72)] hover:bg-[rgb(72,72,96)] border border-[rgb(72,72,96)] hover:border-[rgb(96,96,128)] m-1 p-2 rounded-lg transition-colors cursor-pointer;
 }
 
+h2 {
+  @apply mx-auto;
+}
+
 .container {
-  @apply bg-[rgb(24,24,36)] mt-10 p-5 border border-[rgb(48,48,72)] rounded-lg justify-center mx-auto w-fit flex gap-2;
+  @apply bg-[rgb(24,24,36)] mt-10 p-5 border border-[rgb(48,48,72)] rounded-lg justify-center mx-auto w-fit flex flex-col gap-2;
 }

src/newproject/components/OptionButtons.tsx

@@ -7,16 +7,22 @@ type ButtonOption = {
 
 type OptionButtonsProps = {
   buttons: ButtonOption[];
+  name: string;
 };
 
-export default function OptionButtons({ buttons }: OptionButtonsProps) {
+export default function OptionButtons({ buttons, name }: OptionButtonsProps) {
   return (
     <>
-      {buttons.map((btn, index) => (
-        <button key={index} onClick={btn.onClick}>
-          {btn.label}
-        </button>
-      ))}
+      <div className='container'>
+        <h2>{name}</h2>
+        <div className="flex gap-2">
+          {buttons.map((btn, index) => (
+            <button key={index} onClick={btn.onClick}>
+              {btn.label}
+            </button>
+          ))}
+        </div>
+      </div>
     </>
   );
 }

src/newproject/routes/Home.tsx

@@ -6,15 +6,13 @@ export default function Home () {
 
   return (
     <>
-      <div className='container'>
-        <p>Project Type: {projectType}</p>
         <OptionButtons
           buttons={[
             { label: 'Website', onClick: () => setProjectType('website') },
             { label: 'Web Server', onClick: () => setProjectType('webserver') }
           ]}
+          name="Project Type"
         />
-      </div>
     </>
   )
 }