My goal is to create an interactive input box that glides smoothly to the bottom of the screen when clicked by the user. However, the current implementation causes the input box to move too far down, requiring the user to scroll down in order to see it.
Here is the code for the page:
'use client';
import { useState, useRef, useEffect } from 'react';
import Header from '@/components/Header';
import SendChatButton from '@/components/buttons/SendChatButton';
export default function Home() {
const [isInputFocused, setInputFocused] = useState(false);
const formRef = useRef(null);
const [formHeight, setFormHeight] = useState(0);
useEffect(() => {
if (formRef.current) {
setFormHeight(formRef.current.offsetHeight);
}
}, []);
const formStyle = isInputFocused
? { transform: `translateY(calc(100vh - ${formHeight}px))` }
: {};
return (
<main>
<section className='p-4 pt-32'>
<div>
<h1 className='text-6xl font-bold'>
Your very own<br /> personal designer
</h1>
<h2 className='text-xl mt-6'>Makes finding outfits so much easier</h2>
</div>
<form
ref={formRef}
style={formStyle}
className="mt-6 flex shadow-md transition-transform duration-1000 ease-in-out"
>
<input
type="text"
placeholder='Message your personal designer...'
className="p-2 border border-gray-300 rounded-md block w-full text-sm outline-none"
onFocus={() => setInputFocused(true)}
onBlur={() => setInputFocused(false)}
/>
<SendChatButton />
</form>
</section>
</main>
);
}