Some UI for showing answers

web/components/answers-panel.tsx

@@ -7,6 +7,12 @@ import { Contract } from '../../common/contract'
 import { AmountInput } from './amount-input'
 import { Col } from './layout/col'
 import { createAnswer } from '../lib/firebase/api-call'
+import { Row } from './layout/row'
+import { Avatar } from './avatar'
+import { SiteLink } from './site-link'
+import { DateTimeTooltip } from './datetime-tooltip'
+import dayjs from 'dayjs'
+import { BuyButton } from './yes-no-selector'
 
 export function AnswersPanel(props: {
   contract: Contract<'MULTI'>
@@ -15,11 +21,48 @@ export function AnswersPanel(props: {
   const { contract, answers } = props
 
   return (
-    <Col>
-      <CreateAnswerInput contract={contract} />
+    <Col className="gap-4">
       {answers.map((answer) => (
-        <div>{answer.text}</div>
+        <AnswerItem key={answer.id} answer={answer} contract={contract} />
       ))}
+      <CreateAnswerInput contract={contract} />
+    </Col>
+  )
+}
+
+function AnswerItem(props: { answer: Answer; contract: Contract<'MULTI'> }) {
+  const { answer, contract } = props
+  const { username, avatarUrl, name, createdTime } = answer
+
+  const createdDate = dayjs(createdTime).format('MMM D')
+
+  return (
+    <Col className="p-2 sm:flex-row">
+      <Col className="gap-2 flex-1">
+        <div>{answer.text}</div>
+
+        <Row className="text-gray-500 text-sm gap-2 items-center">
+          <SiteLink className="relative" href={`/${username}`}>
+            <Row className="items-center gap-2">
+              <Avatar avatarUrl={avatarUrl} size={6} />
+              <div className="truncate">{name}</div>
+            </Row>
+          </SiteLink>
+
+          <div className="">•</div>
+
+          <div className="whitespace-nowrap">
+            <DateTimeTooltip text="" time={contract.createdTime}>
+              {createdDate}
+            </DateTimeTooltip>
+          </div>
+        </Row>
+      </Col>
+
+      <BuyButton
+        className="justify-end self-end flex-initial"
+        onClick={() => {}}
+      />
     </Col>
   )
 }
@@ -55,8 +98,10 @@ function CreateAnswerInput(props: { contract: Contract<'MULTI'> }) {
   }
 
   return (
-    <Col className="gap-4">
-      <div className="text-xl text-indigo-700">Add your answer</div>
+    <Col className="gap-4 mt-2">
+      <Col className="sm:flex-row gap-8">
+        <Col className="flex-1 gap-2">
+          <div className="text-gray-500 text-sm mb-1">Add your answer</div>
           <Textarea
             value={text}
             onChange={(e) => setText(e.target.value)}
@@ -65,9 +110,18 @@ function CreateAnswerInput(props: { contract: Contract<'MULTI'> }) {
             rows={1}
             maxLength={10000}
           />
-      <Col className="gap-2 justify-between self-end sm:flex-row">
-        {text && (
-          <Col className="gap-2">
+          <button
+            className={clsx(
+              'btn btn-sm self-end mt-2',
+              canSubmit ? 'btn-outline' : 'btn-disabled'
+            )}
+            disabled={!canSubmit}
+            onClick={submitAnswer}
+          >
+            Submit answer & bet
+          </button>
+        </Col>
+        <Col className={clsx('gap-2', text ? 'visible' : 'invisible')}>
           <div className="text-gray-500 text-sm">Bet amount</div>
           <AmountInput
             amount={betAmount}
@@ -78,17 +132,6 @@ function CreateAnswerInput(props: { contract: Contract<'MULTI'> }) {
             disabled={isSubmitting}
           />
         </Col>
-        )}
-        <button
-          className={clsx(
-            'btn btn-sm self-start',
-            canSubmit ? 'btn-outline' : 'btn-disabled'
-          )}
-          disabled={!canSubmit}
-          onClick={submitAnswer}
-        >
-          Submit answer
-        </button>
       </Col>
     </Col>
   )

web/components/contract-overview.tsx

@@ -28,9 +28,10 @@ export const ContractOverview = (props: {
   bets: Bet[]
   comments: Comment[]
   folds: Fold[]
+  children?: any
   className?: string
 }) => {
-  const { contract, bets, comments, folds, className } = props
+  const { contract, bets, comments, folds, children, className } = props
   const { question, resolution, creatorId, outcomeType } = contract
 
   const user = useUser()
@@ -85,6 +86,8 @@ export const ContractOverview = (props: {
 
       {isBinary && <ContractProbGraph contract={contract} bets={bets} />}
 
+      {children}
+
       <Row className="mt-6 ml-4 hidden items-center justify-between gap-4 sm:flex">
         {folds.length === 0 ? (
           <TagsInput className={clsx('mx-4')} contract={contract} />

web/components/yes-no-selector.tsx

@@ -120,6 +120,15 @@ export function FundsSelector(props: {
   )
 }
 
+export function BuyButton(props: { className?: string; onClick?: () => void }) {
+  const { className, onClick } = props
+  return (
+    <Button className={className} onClick={onClick} color="green">
+      Buy
+    </Button>
+  )
+}
+
 function Button(props: {
   className?: string
   onClick?: () => void
@@ -132,7 +141,7 @@ function Button(props: {
     <button
       type="button"
       className={clsx(
-        'inline-flex flex-1 items-center justify-center rounded-md border border-transparent px-8 py-3 text-sm font-medium shadow-sm',
+        'inline-flex flex-1 items-center justify-center rounded-md border border-transparent px-8 py-3 font-medium shadow-sm',
         color === 'green' && 'btn-primary text-white',
         color === 'red' && 'bg-red-400 text-white hover:bg-red-500',
         color === 'yellow' && 'bg-yellow-400 text-white hover:bg-yellow-500',

web/pages/[username]/[contractSlug].tsx

@@ -119,11 +119,15 @@ export default function ContractPage(props: {
             bets={bets ?? []}
             comments={comments ?? []}
             folds={folds}
-          />
-
+          >
             {contract.outcomes === 'FREE_ANSWER' && (
-            <AnswersPanel contract={contract as any} answers={props.answers} />
+              <AnswersPanel
+                contract={contract as any}
+                answers={props.answers}
+              />
             )}
+          </ContractOverview>
+
           <BetsSection contract={contract} user={user ?? null} bets={bets} />
         </div>