import React, { useState } from 'react';
import { css } from '@emotion/react';
const ColTest = () => {
const [isInputFocused, setIsInputFocused] = useState(false);
const containerStyles = css`
display: flex;
flex-direction: row;
width: 100%;
max-width: 700px;
margin: 0 auto;
overflow: hidden;
`;
const buttonStyles = css`
width: ${isInputFocused ? '10%' : '20%'};
overflow: hidden;
white-space: nowrap;
transition: width 0.5s;
`;
const inputStyles = css`
width: ${isInputFocused ? '90%' : '100%'};
transition: width 0.5s;
`;
return (
<div css={containerStyles}>
<button css={buttonStyles}>{isInputFocused ? '+' : '+ New Topic'}</button>
<input
type="text"
css={inputStyles}
placeholder="Enter your topic..."
onFocus={() => setIsInputFocused(true)}
onBlur={() => setIsInputFocused(false)}
/>
</div>
);
};
export default ColTest;