Expand create panel on focus
From Richard Hanania's feedback
This commit is contained in:
parent
515676f885
commit
a12a8bcd6a
|
@ -61,6 +61,7 @@ export default function FeedCreate(props: {
|
||||||
}) {
|
}) {
|
||||||
const { user, tag, className } = props
|
const { user, tag, className } = props
|
||||||
const [question, setQuestion] = useState('')
|
const [question, setQuestion] = useState('')
|
||||||
|
const [focused, setFocused] = useState(false)
|
||||||
|
|
||||||
const placeholders = [
|
const placeholders = [
|
||||||
'Will anyone I know get engaged this year?',
|
'Will anyone I know get engaged this year?',
|
||||||
|
@ -81,7 +82,11 @@ export default function FeedCreate(props: {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={clsx('mt-2 w-full bg-white p-4 shadow-md', className)}
|
className={clsx(
|
||||||
|
'mt-2 w-full rounded bg-white p-4 shadow-md',
|
||||||
|
question || focused ? 'ring-2 ring-indigo-300' : '',
|
||||||
|
className
|
||||||
|
)}
|
||||||
onClick={() => !question && inputRef.current?.focus()}
|
onClick={() => !question && inputRef.current?.focus()}
|
||||||
>
|
>
|
||||||
<div className="relative flex items-start space-x-3">
|
<div className="relative flex items-start space-x-3">
|
||||||
|
@ -99,17 +104,19 @@ export default function FeedCreate(props: {
|
||||||
value={question}
|
value={question}
|
||||||
onClick={(e) => e.stopPropagation()}
|
onClick={(e) => e.stopPropagation()}
|
||||||
onChange={(e) => setQuestion(e.target.value.replace('\n', ''))}
|
onChange={(e) => setQuestion(e.target.value.replace('\n', ''))}
|
||||||
|
onFocus={() => setFocused(true)}
|
||||||
|
onBlur={() => setFocused(false)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Hide component instead of deleting, so edits to NewContract don't get lost */}
|
{/* Hide component instead of deleting, so edits to NewContract don't get lost */}
|
||||||
<div className={question ? '' : 'hidden'}>
|
<div className={question || focused ? '' : 'hidden'}>
|
||||||
<NewContract question={question} tag={tag} />
|
<NewContract question={question} tag={tag} />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
|
{/* Show a fake "Create Market" button, which gets replaced with the NewContract one*/}
|
||||||
{!question && (
|
{!(question || focused) && (
|
||||||
<div className="flex justify-end">
|
<div className="flex justify-end">
|
||||||
<button className="btn btn-sm" disabled>
|
<button className="btn btn-sm" disabled>
|
||||||
Create Market
|
Create Market
|
||||||
|
|
Loading…
Reference in New Issue
Block a user