"use client";
import React, { useState } from "react";
import Jrui from "@/imgs/JRuiLogo.png";
import Image from "next/image";
import Reveal from "@/components/Reveal";

const Form = () => {
    // State to manage form input values
    const [ideaName, setIdeaName] = useState("");
    const [ideaDescription, setIdeaDescription] = useState("");
    const [submitted, setSubmitted] = useState(false);

    // Function to handle form submission
    const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    // Your form logic here
    setSubmitted(true); // Temporary logic to simulate submission
    };

    return (
    <Reveal className="center mt-10">
        <div className="w-max flex">
        <Reveal className="center">
            <Image
            src={Jrui}
            width={300}
            height={300}
            alt="It's Jrui the mascot!!"
            className="hidden md:flex"
            priority={true}
            />
        </Reveal>

        {/* Conditional rendering based on submission status */}
        <Reveal>
            {submitted ? ( // If idea has been submitted
            // Reveal animation for thank you message
            <Reveal className="md:w-[512px] mx-auto p-4 md:pr-14 ">
                <h1 className="text-primary mb-4 text-3xl font-semibold">
                Thank you!
                </h1>
                <p>
                Your idea has been submitted. I will look into it as soon as
                possible.
                </p>
            </Reveal>
            ) : (
            // If idea has not been submitted
            // Form for submitting ideas
            <form className="md:w-[512px] mx-auto p-4" onSubmit={handleSubmit}>
                <h1 className="text-primary mb-4 text-3xl font-semibold">
                Share your Ideas!
                </h1>
                {/* Input field for idea name */}
                <div className="mb-4">
                <label htmlFor="ideaName" className="block font-medium">
                    What is your idea about?
                </label>
                <input
                    type="text"
                    id="ideaName"
                    value={ideaName}
                    onChange={(e) => setIdeaName(e.target.value)}
                    required
                    className="mt-1 p-2 w-full border "
                    placeholder="Component, Section, Feature, Template"
                />
                </div>

                {/* Textarea for idea description */}
                <div className="mb-4">
                <label htmlFor="ideaDescription" className="block font-medium">
                    Give a detailed description:
                </label>
                <textarea
                    id="ideaDescription"
                    value={ideaDescription}
                    onChange={(e) => setIdeaDescription(e.target.value)}
                    required
                    className="mt-1 p-2 w-full border "
                    rows={4}
                    placeholder="Let's hear this amazing idea!"
                />
                </div>

                {/* Submit button */}
                <button
                type="submit"
                className="w-full px-4 py-2 border border-gradient btn-hover"
                >
                Submit Idea
                </button>
            </form>
            )}
        </Reveal>
        </div>
    </Reveal>
    );
};

export default Form;
                

"use client";
import React, { FC, ReactNode, useEffect } from "react";
import { motion, useAnimation } from "framer-motion";
import { useInView } from "react-intersection-observer";

interface RevealProps {
  direction?: "up" | "down" | "left" | "right";
  delay?: number;
  duration?: number;
  children: ReactNode;
  className?: string;
}

const Reveal: FC<RevealProps> = ({
  direction = "up",
  delay = 0.2,
  duration = 0.5,
  children,
  className,
}) => {
  const controls = useAnimation();
  const [ref, inView] = useInView({
    triggerOnce: true,
  });

  useEffect(() => {
    if (inView) {
      controls.start({
        opacity: 1,
        y: 0,
        x: 0,
        transition: { duration: duration, delay },
      });
    }
  }, [controls, inView, delay]);

  // Set initial styles before the animation
  const initialStyles = {
    opacity: 0,
    y: direction === "up" ? 20 : direction === "down" ? -20 : 0,
    x: direction === "left" ? 20 : direction === "right" ? -20 : 0,
  };

  return (
    <motion.Reveal
      className={className}
      ref={ref}
      initial={initialStyles}
      animate={controls}
    >
      {children}
    </motion.Reveal>
  );
};

export default Reveal;
              
              

import React from "react";
import Form from "@/components/Form"; // Adjust the import path based on your project structure

const Example: React.FC = () => {
  return (
    <Form/>
  );
};

export default Example;