Skip to content

Commit a92fb03

Browse files
lkallenlkallen
authored
Merge pull request #61 from chingu-voyages/Add/visual-movement
Add/visual movement
2 parents 14ea95d + 7006b55 commit a92fb03

File tree

6 files changed

+250
-43
lines changed

6 files changed

+250
-43
lines changed

‎package-lock.json

Lines changed: 69 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
"test": "vitest"
1111
},
1212
"dependencies": {
13+
"motion": "^12.6.0",
1314
"next": "^15.2.3",
1415
"react": "^19.0.0",
1516
"react-dom": "^19.0.0"

‎src/app/promptInput/page.tsx

Lines changed: 25 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"use client";
22

33
import Form from "@/components/form/Form";
4-
import { RefObject, useRef } from "react";
4+
import { RefObject, useRef, useState } from "react";
55

66
export interface Inputs {
77
title: string;
@@ -22,13 +22,34 @@ export default function PromptInput() {
2222
{ title: "Output", inputRef: outputRef },
2323
{ title: "Constrain", inputRef: constrainRef },
2424
];
25+
//add state to handle active step.
26+
const [activeStep, setActiveStep] = useState(0);
27+
28+
function handleNext() {
29+
setActiveStep((prevActiveStep) => prevActiveStep + 1);
30+
}
31+
32+
function handleBack() {
33+
setActiveStep((prevActiveStep) => prevActiveStep - 1);
34+
}
35+
36+
function handleReset() {
37+
setActiveStep(0);
38+
}
39+
2540
return (
26-
<div className="h-full border-white overflow-y-scroll">
41+
<div className="h-full border-white overflow-y-hidden">
2742
<header className="bg-white text-black mx-auto w-full px-4 py-6 sm:px-6 lg:px-8 absolute flex justify-center ">
28-
Stepper - Breadcrumbs - Breadcrumbs
43+
O-O-O-O-O
2944
</header>
3045
<main className="">
31-
<Form inputs={inputs} />
46+
<Form
47+
inputs={inputs}
48+
activeStep={activeStep}
49+
handleNext={handleNext}
50+
handleBack={handleBack}
51+
handleReset={handleReset}
52+
/>
3253
</main>
3354
</div>
3455
);

‎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: 36 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,45 @@
11
"use client";
22

3-
import { useRouter } from "next/navigation";
4-
53
import { Inputs } from "@/app/promptInput/page";
6-
export default function Form({ inputs }: { inputs: Inputs[] }) {
7-
const router = useRouter()
4+
import { FormEvent } from "react";
5+
import NavigationButtons from "../navigationButtons/NavigationButtons";
6+
import AnimationContainer from "../animationContainer/AnimationContainer";
7+
8+
interface FormProps {
9+
inputs: Inputs[];
10+
activeStep: number;
11+
handleNext: () => void;
12+
handleBack: () => void;
13+
handleReset: () => void;
14+
}
815

9-
function scrollToComponent(input: Inputs, idx: number) {
16+
export default function Form({ inputs, handleNext, handleBack }: FormProps) {
17+
function scrollToNextComponent(input: Inputs, idx: number) {
1018
inputs[idx + 1].inputRef.current?.scrollIntoView({
1119
behavior: "smooth",
1220
});
21+
handleNext();
22+
}
23+
24+
function scrollToPrevComponent(input: Inputs, idx: number) {
25+
inputs[idx - 1].inputRef.current?.scrollIntoView({
26+
behavior: "smooth",
27+
});
28+
handleBack();
29+
}
30+
31+
function handleSubmit(event: FormEvent<HTMLFormElement>) {
32+
event.preventDefault();
1333
}
1434

1535
return (
1636
<form
17-
onSubmit={async (event) => {
18-
event?.preventDefault();
19-
}}
37+
onSubmit={handleSubmit}
2038
className="flex flex-col w-full p-10 items-center"
2139
>
40+
{/* Form Sections */}
2241
{inputs.map((input, idx) => (
23-
<div
24-
key={input.title}
25-
className={`${
26-
idx === 0 ? "h-[40vh]" : "h-[50vh]"
27-
} w-full flex flex-col justify-center`}
28-
ref={input.inputRef}
29-
>
42+
<AnimationContainer key={input.title} input={input} idx={idx}>
3043
<div className="flex flex-col items-center text-black">
3144
<label className="bg-white m-2">{input.title}</label>
3245
<input
@@ -36,31 +49,15 @@ export default function Form({ inputs }: { inputs: Inputs[] }) {
3649
className="p-4 bg-[#CAD2C5] w-1/2 flex"
3750
placeholder={input.title}
3851
/>
39-
{idx < inputs.length - 1 ? (
40-
<div className="w-1/2 flex justify-evenly">
41-
<button
42-
className={`${idx === 0 ? "hidden" : "visible"}`}
43-
type="button"
44-
onClick={() => scrollToComponent(input, idx)}
45-
>
46-
Back
47-
</button>
48-
<button
49-
type="button"
50-
onClick={() => scrollToComponent(input, idx)}
51-
>
52-
Next
53-
</button>
54-
</div>
55-
) : (
56-
<button className="cursor-pointer w-1/2 p-4 m-2 h-12 text-black underline"
57-
onClick={() => router.push('/review')}
58-
>
59-
Review
60-
</button>
61-
)}
52+
{/* Buttons */}
53+
<NavigationButtons
54+
idx={idx}
55+
scrollToNextComponent={scrollToNextComponent}
56+
scrollToPrevComponent={scrollToPrevComponent}
57+
input={input}
58+
/>
6259
</div>
63-
</div>
60+
</AnimationContainer>
6461
))}
6562
</form>
6663
);

‎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)