manifold/web/components/feed-create.tsx
2022-01-20 01:55:26 -05:00

44 lines
1.6 KiB
TypeScript

import { useUser } from '../hooks/use-user'
import { ResolutionOrChance } from './contract-card'
import { AvatarWithIcon } from './contract-feed'
import { Col } from './layout/col'
import { Title } from './title'
import Textarea from 'react-expanding-textarea'
export default function FeedCreate() {
const user = useUser()
if (!user) {
return <Title text="Sign in to start trading!" />
}
const question = 'Ask a question...'
const description =
'Resolves YES under no circumstances, but perhaps lorem ipsum will come and save the day!\nI kinda doubt it though...'
return (
<Col className="items-center">
<div className="w-full max-w-3xl bg-indigo-50 rounded-md">
<div className="relative flex items-start space-x-3 p-4">
<AvatarWithIcon
username={user.username}
avatarUrl={user.avatarUrl || ''}
/>
<div className="min-w-0 flex-1 py-1.5">
{/* Text form to type a question */}
{/* TODO: Figure out how to get rid of border; but also show focus for accessibility */}
<Textarea
className="text-lg sm:text-xl text-indigo-700 w-full border-transparent focus:border-transparent bg-transparent p-0 appearance-none resize-none outline-hidden focus:outline-none"
placeholder={question}
/>
{/* "Create" button on the bottom right */}
<button className="float-right bg-indigo-500 text-white text-sm font-semibold py-2 px-4 rounded-md">
CREATE MARKET
</button>
</div>
</div>
</div>
</Col>
)
}