Set up a question box on the homepage

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 (
     <SiteLink className="relative" href={`/${username}`}>

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 <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>
+  )
+}

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">

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}