diff --git a/web/components/contract-feed.tsx b/web/components/contract-feed.tsx index 064ca7fc..c97a3b29 100644 --- a/web/components/contract-feed.tsx +++ b/web/components/contract-feed.tsx @@ -40,7 +40,7 @@ import { Comment, mapCommentsByBetId } from '../lib/firebase/comments' import { JoinSpans } from './join-spans' import Textarea from 'react-expanding-textarea' -function AvatarWithIcon(props: { username: string; avatarUrl: string }) { +export function AvatarWithIcon(props: { username: string; avatarUrl: string }) { const { username, avatarUrl } = props return ( diff --git a/web/components/feed-create.tsx b/web/components/feed-create.tsx new file mode 100644 index 00000000..0f57a982 --- /dev/null +++ b/web/components/feed-create.tsx @@ -0,0 +1,43 @@ +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 + } + + 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> + ) +} diff --git a/web/pages/activity.tsx b/web/pages/activity.tsx index 44f33617..e05ff1df 100644 --- a/web/pages/activity.tsx +++ b/web/pages/activity.tsx @@ -79,7 +79,6 @@ export function ActivityFeed(props: { return contracts.length > 0 ? ( <Col className="items-center"> <Col className="w-full max-w-3xl"> - <Title text="Recent Activity" /> <Col className="w-full bg-white self-center divide-gray-300 divide-y"> {activeContracts.map((contract, i) => ( <div key={contract.id} className="py-6 px-2 sm:px-4"> diff --git a/web/pages/index.tsx b/web/pages/index.tsx index f102bb34..b49679b8 100644 --- a/web/pages/index.tsx +++ b/web/pages/index.tsx @@ -9,6 +9,8 @@ import { listAllComments, } from '../lib/firebase/comments' import { Bet, listAllBets } from '../lib/firebase/bets' +import FeedCreate from '../components/feed-create' +import { Spacer } from '../components/layout/spacer' export async function getStaticProps() { const [contracts, recentComments] = await Promise.all([ @@ -44,6 +46,8 @@ const Home = (props: { return ( <Page> + <FeedCreate /> + <Spacer h={5} /> <ActivityFeed contracts={activeContracts} contractBets={activeContractBets}