From 67203755530af41c6bc5c633e7dd9c4a8f040beb Mon Sep 17 00:00:00 2001
From: James Grugett <jahooma@gmail.com>
Date: Mon, 12 Sep 2022 01:09:31 -0500
Subject: [PATCH] Factor out section header

---
 web/pages/experimental/home/index.tsx | 35 ++++++++++++---------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/web/pages/experimental/home/index.tsx b/web/pages/experimental/home/index.tsx
index 08f502b6..f0352fb1 100644
--- a/web/pages/experimental/home/index.tsx
+++ b/web/pages/experimental/home/index.tsx
@@ -97,17 +97,10 @@ function SearchSection(props: {
   followed?: boolean
 }) {
   const { label, user, sort, yourBets, followed } = props
-  const href = `/home?s=${sort}`
 
   return (
     <Col>
-      <SiteLink className="mb-2 text-xl" href={href}>
-        {label}{' '}
-        <ArrowSmRightIcon
-          className="mb-0.5 inline h-6 w-6 text-gray-500"
-          aria-hidden="true"
-        />
-      </SiteLink>
+      <SectionHeader label={label} href={`/home?s=${sort}`} />
       <ContractSearch
         user={user}
         defaultSort={sort}
@@ -134,13 +127,7 @@ function GroupSection(props: {
 
   return (
     <Col>
-      <SiteLink className="mb-2 text-xl" href={groupPath(group.slug)}>
-        {group.name}{' '}
-        <ArrowSmRightIcon
-          className="mb-0.5 inline h-6 w-6 text-gray-500"
-          aria-hidden="true"
-        />
-      </SiteLink>
+      <SectionHeader label={group.name} href={groupPath(group.slug)} />
       <ContractSearch
         user={user}
         defaultSort={'score'}
@@ -159,15 +146,25 @@ function DailyMoversSection(props: { userId: string | null | undefined }) {
 
   return (
     <Col className="gap-2">
-      <SiteLink className="text-xl" href={'/daily-movers'}>
-        Daily movers{' '}
+      <SectionHeader label="Daily movers" href="daily-movers" />
+      <ProbChangeTable changes={changes} />
+    </Col>
+  )
+}
+
+function SectionHeader(props: { label: string; href: string }) {
+  const { label, href } = props
+
+  return (
+    <Row className="mb-3 items-center justify-between">
+      <SiteLink className="text-xl" href={href}>
+        {label}{' '}
         <ArrowSmRightIcon
           className="mb-0.5 inline h-6 w-6 text-gray-500"
           aria-hidden="true"
         />
       </SiteLink>
-      <ProbChangeTable changes={changes} />
-    </Col>
+    </Row>
   )
 }