Reuse ResolutionOrChance component. Make smaller for card, larger for contract page.

web/components/contract-card.tsx

@@ -5,27 +5,13 @@ import { formatMoney } from '../lib/util/format'
 import { UserLink } from './user-page'
 import { Linkify } from './linkify'
 import { Contract, compute, path } from '../lib/firebase/contracts'
+import { Col } from './layout/col'
 
 export function ContractCard(props: { contract: Contract }) {
   const { contract } = props
+  const { resolution } = contract
   const { probPercent } = compute(contract)
 
-  const resolutionColor = {
-    YES: 'text-primary',
-    NO: 'text-red-400',
-    MKT: 'text-blue-400',
-    CANCEL: 'text-yellow-400',
-    '': '', // Empty if unresolved
-  }[contract.resolution || '']
-
-  const resolutionText = {
-    YES: 'YES',
-    NO: 'NO',
-    MKT: 'MKT',
-    CANCEL: 'N/A',
-    '': '',
-  }[contract.resolution || '']
-
   return (
     <Link href={path(contract)}>
       <a>
@@ -36,14 +22,11 @@ export function ContractCard(props: { contract: Contract }) {
                 <p className="font-medium text-indigo-700">
                   <Linkify text={contract.question} />
                 </p>
-                <div className={clsx('text-4xl', resolutionColor)}>
-                  {resolutionText || (
-                    <div className="text-primary">
-                      {probPercent}
-                      <div className="text-lg">chance</div>
-                    </div>
-                  )}
-                </div>
+                <ResolutionOrChance
+                  className="items-center"
+                  resolution={resolution}
+                  probPercent={probPercent}
+                />
               </Row>
               <ContractDetails contract={contract} />
             </div>
@@ -54,6 +37,55 @@ export function ContractCard(props: { contract: Contract }) {
   )
 }
 
+export function ResolutionOrChance(props: {
+  resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL'
+  probPercent: string
+  large?: boolean
+  className?: string
+}) {
+  const { resolution, probPercent, large, className } = props
+
+  const resolutionColor = {
+    YES: 'text-primary',
+    NO: 'text-red-400',
+    MKT: 'text-blue-400',
+    CANCEL: 'text-yellow-400',
+    '': '', // Empty if unresolved
+  }[resolution || '']
+
+  const resolutionText = {
+    YES: 'YES',
+    NO: 'NO',
+    MKT: 'MKT',
+    CANCEL: 'N/A',
+    '': '',
+  }[resolution || '']
+
+  return (
+    <Col className={clsx(large ? 'text-4xl' : 'text-3xl', className)}>
+      {resolution ? (
+        <>
+          <div
+            className={clsx('text-gray-500', large ? 'text-xl' : 'text-base')}
+          >
+            Resolved
+          </div>
+          <div className={resolutionColor}>{resolutionText}</div>
+        </>
+      ) : (
+        <>
+          <div className="text-primary">{probPercent}</div>
+          <div
+            className={clsx('text-primary', large ? 'text-xl' : 'text-base')}
+          >
+            chance
+          </div>
+        </>
+      )}
+    </Col>
+  )
+}
+
 export function ContractDetails(props: { contract: Contract }) {
   const { contract } = props
   const { truePool, createdDate, resolvedDate } = compute(contract)

web/components/contract-overview.tsx

@@ -14,7 +14,7 @@ import { Row } from './layout/row'
 import dayjs from 'dayjs'
 import { Linkify } from './linkify'
 import clsx from 'clsx'
-import { ContractDetails } from './contract-card'
+import { ContractDetails, ResolutionOrChance } from './contract-card'
 
 function ContractDescription(props: {
   contract: Contract
@@ -84,40 +84,6 @@ function ContractDescription(props: {
   )
 }
 
-function ResolutionOrChance(props: {
-  resolution?: 'YES' | 'NO' | 'MKT' | 'CANCEL'
-  probPercent: string
-  className?: string
-}) {
-  const { resolution, probPercent, className } = props
-
-  const resolutionColor = {
-    YES: 'text-primary',
-    NO: 'text-red-400',
-    MKT: 'text-blue-400',
-    CANCEL: 'text-yellow-400',
-    '': '', // Empty if unresolved
-  }[resolution || '']
-
-  return (
-    <Col className={clsx('text-3xl md:text-4xl', className)}>
-      {resolution ? (
-        <>
-          <div className="text-lg md:text-xl text-gray-500">Resolved</div>
-          <div className={resolutionColor}>
-            {resolution === 'CANCEL' ? 'N/A' : resolution}
-          </div>
-        </>
-      ) : (
-        <>
-          <div className="text-primary">{probPercent}</div>
-          <div className="text-lg md:text-xl text-primary">chance</div>
-        </>
-      )}
-    </Col>
-  )
-}
-
 export const ContractOverview = (props: {
   contract: Contract
   className?: string
@@ -141,6 +107,7 @@ export const ContractOverview = (props: {
             className="md:hidden"
             resolution={resolution}
             probPercent={probPercent}
+            large
           />
 
           <ContractDetails contract={contract} />
@@ -150,6 +117,7 @@ export const ContractOverview = (props: {
           className="hidden md:flex md:items-end"
           resolution={resolution}
           probPercent={probPercent}
+          large
         />
       </Row>