Skip to content

Commit 7006b55

Browse files
ivannissimrchivannissimrch
committed
Add navigation buttons and animationContainer components
1 parent a85c891 commit 7006b55

File tree

3 files changed

+141
-102
lines changed

3 files changed

+141
-102
lines changed

‎src/components/animationContainer/AnimationContainer.tsx

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import { Inputs } from "@/app/promptInput/page";
2+
import { easeInOut } from "motion";
3+
import { motion } from "motion/react";
4+
5+
const variants = {
6+
hidden: { opacity: 0, y: 50, scale: 0.95, rotateX: -10 },
7+
visible: {
8+
opacity: 1,
9+
y: 0,
10+
rotateX: 0,
11+
transition: { duration: 0.8, delay: 0.2, easeInOut },
12+
},
13+
};
14+
15+
interface AnimationProps {
16+
children: React.ReactNode;
17+
input: Inputs;
18+
idx: number;
19+
}
20+
21+
export default function AnimationContainer({
22+
children,
23+
input,
24+
idx,
25+
}: AnimationProps) {
26+
return (
27+
<motion.div
28+
key={input.title}
29+
initial="hidden"
30+
whileInView="visible"
31+
viewport={{ once: false, amount: 0.5 }}
32+
variants={variants}
33+
className={`${
34+
idx === 0 ? "h-[90vh]" : "h-[100vh]"
35+
} w-full flex flex-col justify-center`}
36+
ref={input.inputRef}
37+
>
38+
{children}
39+
</motion.div>
40+
);
41+
}

‎src/components/form/Form.tsx

Lines changed: 22 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
"use client";
22

33
import { Inputs } from "@/app/promptInput/page";
4-
import { motion } from "motion/react";
5-
6-
import Link from "next/link";
74
import { FormEvent } from "react";
5+
import NavigationButtons from "../navigationButtons/NavigationButtons";
6+
import AnimationContainer from "../animationContainer/AnimationContainer";
87

98
interface FormProps {
109
inputs: Inputs[];
@@ -29,115 +28,36 @@ export default function Form({ inputs, handleNext, handleBack }: FormProps) {
2928
handleBack();
3029
}
3130

32-
const variants = {
33-
hidden: { opacity: 0, y: 50, scale: 0.95, rotateX: -10 },
34-
visible: {
35-
opacity: 1,
36-
y: 0,
37-
scale: 1,
38-
rotateX: 0,
39-
transition: { duration: 0.8, ease: "easeOut", delay: 0.2 },
40-
},
41-
};
42-
43-
function NextButton({ input, idx }: { input: Inputs; idx: number }) {
44-
return (
45-
<button
46-
className="w-1/4 mt-4 flex justify-end bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
47-
type="button"
48-
onClick={() => scrollToNextComponent(input, idx)}
49-
>
50-
Next
51-
</button>
52-
);
53-
}
54-
55-
function BackButton({ input, idx }: { input: Inputs; idx: number }) {
56-
return (
57-
<button
58-
className={`${
59-
idx === 0 ? "hidden" : "visible"
60-
} w-1/4 flex justify-start bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4`}
61-
type="button"
62-
onClick={() => scrollToPrevComponent(input, idx)}
63-
>
64-
Back
65-
</button>
66-
);
67-
}
68-
69-
function ReviewButton() {
70-
return (
71-
<Link
72-
href="review"
73-
className="flex w-full justify-end p-4 m-2 h-12 text-black underline"
74-
>
75-
ReView
76-
</Link>
77-
);
78-
}
79-
8031
function handleSubmit(event: FormEvent<HTMLFormElement>) {
8132
event.preventDefault();
8233
}
8334

84-
const FIRST_INPUT_INDEX = 0;
85-
const LAST_INPUT_INDEX = inputs.length - 1;
86-
8735
return (
8836
<form
8937
onSubmit={handleSubmit}
9038
className="flex flex-col w-full p-10 items-center"
9139
>
92-
{/* inputs components */}
40+
{/* Form Sections */}
9341
{inputs.map((input, idx) => (
94-
<motion.div
95-
key={input.title}
96-
initial="hidden"
97-
whileInView="visible"
98-
viewport={{ once: false, amount: 0.5 }}
99-
variants={variants}
100-
className="w-full"
101-
>
102-
<section
103-
className={`${
104-
idx === FIRST_INPUT_INDEX ? "h-[90vh]" : "h-[100vh]"
105-
} w-full flex flex-col justify-center`}
106-
ref={input.inputRef}
107-
>
108-
<div className="flex flex-col items-center text-black">
109-
<label className="bg-white m-2">{input.title}</label>
110-
<input
111-
type="text"
112-
required
113-
name={input.title}
114-
className="p-4 bg-[#CAD2C5] w-1/2 flex"
115-
placeholder={input.title}
116-
/>
117-
{/* Buttons */}
118-
119-
{idx === FIRST_INPUT_INDEX ? (
120-
<div className="w-1/2 flex justify-end">
121-
{" "}
122-
<NextButton idx={idx} input={input} />
123-
</div>
124-
) : idx === LAST_INPUT_INDEX ? (
125-
<div className=" w-1/2">
126-
<BackButton idx={idx} input={input} /> <ReviewButton />{" "}
127-
</div>
128-
) : (
129-
<div className="w-1/2 flex justify-evenly">
130-
<div className=" w-full flex ">
131-
<BackButton idx={idx} input={input} />
132-
</div>
133-
<div className="flex justify-end w-full">
134-
<NextButton idx={idx} input={input} />
135-
</div>
136-
</div>
137-
)}
138-
</div>
139-
</section>
140-
</motion.div>
42+
<AnimationContainer key={input.title} input={input} idx={idx}>
43+
<div className="flex flex-col items-center text-black">
44+
<label className="bg-white m-2">{input.title}</label>
45+
<input
46+
type="text"
47+
required
48+
name={input.title}
49+
className="p-4 bg-[#CAD2C5] w-1/2 flex"
50+
placeholder={input.title}
51+
/>
52+
{/* Buttons */}
53+
<NavigationButtons
54+
idx={idx}
55+
scrollToNextComponent={scrollToNextComponent}
56+
scrollToPrevComponent={scrollToPrevComponent}
57+
input={input}
58+
/>
59+
</div>
60+
</AnimationContainer>
14161
))}
14262
</form>
14363
);

‎src/components/navigationButtons/NavigationButtons.tsx

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
import { Inputs } from "@/app/promptInput/page";
2+
import Link from "next/link";
3+
4+
interface NavigationButtonsProps {
5+
idx: number;
6+
scrollToNextComponent: (input: Inputs, idx: number) => void;
7+
scrollToPrevComponent: (input: Inputs, idx: number) => void;
8+
input: Inputs;
9+
}
10+
11+
export default function NavigationButtons({
12+
idx,
13+
scrollToNextComponent,
14+
scrollToPrevComponent,
15+
input,
16+
}: NavigationButtonsProps) {
17+
const FIRST_INPUT_INDEX = 0;
18+
const LAST_INPUT_INDEX = 4;
19+
function NextButton({ input, idx }: { input: Inputs; idx: number }) {
20+
return (
21+
<button
22+
className="w-1/4 mt-4 flex justify-end bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
23+
type="button"
24+
onClick={() => scrollToNextComponent(input, idx)}
25+
>
26+
Next
27+
</button>
28+
);
29+
}
30+
31+
function BackButton({ input, idx }: { input: Inputs; idx: number }) {
32+
return (
33+
<button
34+
className={`${
35+
idx === 0 ? "hidden" : "visible"
36+
} w-1/4 flex justify-start bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded mt-4`}
37+
type="button"
38+
onClick={() => scrollToPrevComponent(input, idx)}
39+
>
40+
Back
41+
</button>
42+
);
43+
}
44+
45+
function ReviewButton() {
46+
return (
47+
<Link
48+
href="review"
49+
className="flex w-full justify-end p-4 m-2 h-12 text-black underline"
50+
>
51+
ReView
52+
</Link>
53+
);
54+
}
55+
56+
return idx === FIRST_INPUT_INDEX ? (
57+
<div className="w-1/2 flex justify-evenly">
58+
<div className=" w-full flex ">
59+
<button>Inspire Me</button>
60+
</div>
61+
62+
<NextButton idx={idx} input={input} />
63+
</div>
64+
) : idx === LAST_INPUT_INDEX ? (
65+
<div className=" w-1/2">
66+
<BackButton idx={idx} input={input} /> <ReviewButton />{" "}
67+
</div>
68+
) : (
69+
<div className="w-1/2 flex justify-evenly">
70+
<div className=" w-full flex ">
71+
<BackButton idx={idx} input={input} />
72+
</div>
73+
<div className="flex justify-end w-full">
74+
<NextButton idx={idx} input={input} />
75+
</div>
76+
</div>
77+
);
78+
}

0 commit comments

Comments
 (0)