To make the input field expand when the button is minimized after clicking, you can dynamically toggle a class on the parent container and adjust the styles accordingly. Please observe this line:
const [isExpanded, setExpanded] = useState(false);
and,
<div className={`right_buddySearch ${isExpanded ? 'expanded' : ''}`}>
Here's a simple example using React and CSS:
import React, { useState } from 'react';
import './YourStyles.css'; // Import your styles file
const YourComponent = () => {
const [searchText, setSearchText] = useState('');
const [isExpanded, setExpanded] = useState(false);
const handleInputChange = (e) => {
setSearchText(e.target.value);
};
const handleInputFocus = () => {
setExpanded(true);
};
const handleInputBlur = () => {
setExpanded(false);
};
const handleSearch = () => {
// Your search logic here
};
return (
<div className={`right_buddySearch ${isExpanded ? 'expanded' : ''}`}>
<div className="buddySearch_container">
<input
type="text"
className="buddySearch_input"
placeholder="Ask us anything..."
value={searchText}
onChange={handleInputChange}
onFocus={handleInputFocus}
onBlur={handleInputBlur}
/>
<div className="char-counter">
{searchText.length}/{maxCharacters}
</div>
<button className="buddySearch_send" onClick={handleSearch}>
<img src="/assets/icons/send_24.png" alt="Send" />
{/*