plebdevs/src/pages/create.js

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/course/CourseForm";

const Create = () => {
    const [activeIndex, setActiveIndex] = useState(0); // State to track the active tab index
    const homeItems = [
        { label: 'Resource', icon: 'pi pi-book' },
        { label: 'Workshop', icon: 'pi pi-video' },
        { label: 'Course', icon: 'pi pi-desktop' }
    ];

    // 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-full min-bottom-bar:w-[87vw] max-sidebar:w-[100vw] px-8 mx-auto my-8 flex flex-col justify-center">
            <h2 className="text-center mb-8">Create a {homeItems[activeIndex].label}</h2>
            <MenuTab items={homeItems} activeIndex={activeIndex} onTabChange={setActiveIndex} />
            {renderForm()}
        </div>
    );
};

export default Create;