Basic forms ui, not handling submit yet

src/components/forms/CourseForm.js

@@ -0,0 +1,78 @@
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+import { InputNumber } from "primereact/inputnumber";
+import { InputSwitch } from "primereact/inputswitch";
+import { Editor } from "primereact/editor";
+import { Button } from "primereact/button";
+import 'primeicons/primeicons.css';
+
+const CourseForm = () => {
+    const [title, setTitle] = useState('');
+    const [summary, setSummary] = useState('');
+    const [checked, setChecked] = useState(false);
+    const [price, setPrice] = useState(0);
+    const [text, setText] = useState('');
+    const [resources, setResources] = useState(['']); // Start with one empty resource
+
+    const addResource = () => {
+        setResources([...resources, '']); // Add another empty resource
+    };
+
+    const handleResourceChange = (value, index) => {
+        const updatedResources = resources.map((resource, i) => 
+            i === index ? value : resource
+        );
+        setResources(updatedResources);
+    };
+
+    const handleSubmit = (e) => {
+        e.preventDefault();
+        const payload = {
+            title,
+            summary,
+            isPaidResource: checked,
+            price: checked ? price : null,
+            content: text,
+            resources // Add the resources to the payload
+        };
+        console.log(payload);
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="p-inputgroup flex-1">
+                <InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
+            </div>
+            <div className="p-inputgroup flex-1 mt-8">
+                <InputText value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" />
+            </div>
+
+            <div className="p-inputgroup flex-1 mt-8 flex-col">
+                <p className="py-2">Paid Course</p>
+                <InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
+                <div className="p-inputgroup flex-1 py-4">
+                    {checked && (
+                        <>
+                            <i className="pi pi-bolt p-inputgroup-addon text-2xl text-yellow-500"></i>
+                            <InputNumber value={price} onValueChange={(e) => setPrice(e.value)} placeholder="Price (sats)" />
+                        </>
+                    )}
+                </div>
+            </div>
+            {resources.map((resource, index) => (
+                <div key={index} className="p-inputgroup flex-1 mt-8">
+                    <InputText value={resource} onChange={(e) => handleResourceChange(e.target.value, index)} placeholder={`Resource #${index + 1}`} />
+                </div>
+            ))}
+            <div className="flex justify-center mt-4">
+                <Button type="button" onClick={addResource} label="Add Resource" />
+            </div>
+
+            <div className="flex justify-center mt-8">
+                <Button type="submit" severity="success" outlined label="Submit" />
+            </div>
+        </form>
+    );
+}
+
+export default CourseForm;

src/components/forms/WorkshopForm.js

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+import { InputNumber } from "primereact/inputnumber";
+import { InputSwitch } from "primereact/inputswitch";
+import { Editor } from "primereact/editor";
+import { Button } from "primereact/button";
+import 'primeicons/primeicons.css';
+
+const WorkshopForm = () => {
+    const [title, setTitle] = useState('');
+    const [summary, setSummary] = useState('');
+    const [checked, setChecked] = useState(false);
+    const [price, setPrice] = useState(0);
+    const [text, setText] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault(); // Prevents the default form submission mechanism
+        const payload = {
+            title,
+            summary,
+            isPaidResource: checked,
+            price: checked ? price : null,
+            content: text
+        };
+        console.log(payload);
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="p-inputgroup flex-1">
+                <InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
+            </div>
+            <div className="p-inputgroup flex-1 mt-8">
+                <InputText value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" />
+            </div>
+
+            <div className="p-inputgroup flex-1 mt-8 flex-col">
+                <p className="py-2">Paid Workshop</p>
+                <InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
+                <div className="p-inputgroup flex-1 py-4">
+                    {checked && (
+                        <>
+                            <i className="pi pi-bolt p-inputgroup-addon text-2xl text-yellow-500"></i>
+                            <InputNumber value={price} onValueChange={(e) => setPrice(e.value)} placeholder="Price (sats)" />
+                        </>
+                    )}
+                </div>
+            </div>
+            <div className="p-inputgroup flex-1 flex-col mt-8">
+                <span>Content</span>
+                <Editor value={text} onTextChange={(e) => setText(e.htmlValue)} style={{ height: '320px' }} />
+            </div>
+            <div className="flex justify-center mt-8">
+                <Button type="submit" severity="success" outlined label="Submit" />
+            </div>
+        </form>
+    );
+}
+
+export default WorkshopForm;

src/components/menutab/MenuTab.js

@@ -1,12 +1,14 @@
 import React from 'react'; 
 import { TabMenu } from 'primereact/tabmenu';
 
-export default function MenuTab({items}) {
+export default function MenuTab({items, activeIndex, onTabChange}) {
     return (
         <div className="w-[100%]">
             <TabMenu 
                 className='w-full bg-transparent border-none'
                 model={items}
+                activeIndex={activeIndex}
+                onTabChange={(e) => onTabChange(e.index)}
                 pt={{
                     tabmenu: {
                         menu: ({ context }) => ({
@@ -19,5 +21,5 @@ export default function MenuTab({items}) {
                 }}
             />
         </div>
-    )
+    );
 }

src/pages/create.js

@@ -1,20 +1,38 @@
-import React from "react";
+import React, { useState } from "react";
 import MenuTab from "@/components/menutab/MenuTab";
 import ResourceForm from "@/components/forms/ResourceForm";
+import WorkshopForm from "@/components/forms/WorkshopForm";
+import CourseForm from "@/components/forms/CourseForm";
 
 const Create = () => {
+    const [activeIndex, setActiveIndex] = useState(0); // State to track the active tab index
     const homeItems = [
         { label: 'Course', icon: 'pi pi-desktop' },
         { label: 'Workshop', icon: 'pi pi-cog' },
         { label: 'Resource', icon: 'pi pi-book' },
-      ];
+    ];
+
+    // Function to render the correct form based on the active tab
+    const renderForm = () => {
+        switch (homeItems[activeIndex].label) {
+            case 'Course':
+                return <CourseForm />;
+            case 'Workshop':
+                return <WorkshopForm />;
+            case 'Resource':
+                return <ResourceForm />;
+            default:
+                return null; // or a default component
+        }
+    };
+
     return (
         <div className="w-fit mx-auto mt-8 flex flex-col justify-center">
-            <h1 className="text-center mb-8">Create</h1>
+            <h2 className="text-center mb-8">Create a {homeItems[activeIndex].label}</h2>
-            <MenuTab items={homeItems} />
+            <MenuTab items={homeItems} activeIndex={activeIndex} onTabChange={setActiveIndex} />
-            <ResourceForm />
+            {renderForm()}
         </div>
-    )
+    );
-}
+};
 
 export default Create;