Experimental Home: Add links. Single layer carousel for < 6 cards

web/pages/experimental/home.tsx

@@ -14,16 +14,16 @@ import { useSaveReferral } from 'web/hooks/use-save-referral'
 import { GetServerSideProps } from 'next'
 import { Sort } from 'web/components/contract-search'
 import { Button } from 'web/components/button'
-import { Spacer } from 'web/components/layout/spacer'
 import { useMemberGroups } from 'web/hooks/use-group'
 import { Group } from 'common/group'
 import { Carousel } from 'web/components/carousel'
 import { LoadingIndicator } from 'web/components/loading-indicator'
 import { ContractCard } from 'web/components/contract/contract-card'
 import { range } from 'lodash'
-import { Subtitle } from 'web/components/subtitle'
 import { Contract } from 'common/contract'
 import { ShowTime } from 'web/components/contract/contract-details'
+import { GroupLinkItem } from '../groups'
+import { SiteLink } from 'web/components/site-link'
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   const creds = await authenticateOnServer(ctx)
@@ -44,7 +44,7 @@ const Home = (props: { auth: { user: User } | null }) => {
 
   return (
     <Page>
-      <Col className="mx-4 mt-4 gap-2 sm:mx-10 xl:w-[125%]">
+      <Col className="mx-4 mt-4 gap-4 sm:mx-10 xl:w-[125%]">
         <SearchSection label="Trending" sort="score" user={user} />
         <SearchSection label="Newest" sort="newest" user={user} />
         <SearchSection label="Closing soon" sort="close-date" user={user} />
@@ -72,10 +72,13 @@ function SearchSection(props: {
   sort: Sort
 }) {
   const { label, user, sort } = props
+  const href = `/home?s=${sort}`
 
   return (
     <Col>
-      <Subtitle className="mx-2 !mt-2 !text-gray-800 sm:mx-0" text={label} />
+      <SiteLink className="mb-2 text-xl" href={href}>
+        {label}
+      </SiteLink>
       <ContractSearch
         user={user}
         defaultSort={sort}
@@ -85,7 +88,12 @@ function SearchSection(props: {
           contracts ? (
             <DoubleCarousel
               contracts={contracts}
-              seeMoreUrl={`/home?s=${sort}`}
+              seeMoreUrl={href}
+              showTime={
+                sort === 'close-date' || sort === 'resolve-date'
+                  ? sort
+                  : undefined
+              }
             />
           ) : (
             <LoadingIndicator />
@@ -100,9 +108,8 @@ function GroupSection(props: { group: Group; user: User | null }) {
   const { group, user } = props
 
   return (
-    <Col className="">
-      <Subtitle className="mx-2 !text-gray-800 sm:mx-0" text={group.name} />
-      <Spacer h={2} />
+    <Col>
+      <GroupLinkItem className="mb-2 text-xl" group={group} />
       <ContractSearch
         user={user}
         defaultSort={'score'}
@@ -133,8 +140,8 @@ function DoubleCarousel(props: {
   return (
     <Carousel className="-mx-4 mt-2 sm:-mx-10">
       <div className="shrink-0 sm:w-6" />
-      {contracts &&
-        range(0, Math.floor(contracts.length / 2)).map((col) => {
+      {contracts.length >= 6
+        ? range(0, Math.floor(contracts.length / 2)).map((col) => {
             const i = col * 2
             return (
               <Col>
@@ -156,7 +163,17 @@ function DoubleCarousel(props: {
                 />
               </Col>
             )
-        })}
+          })
+        : contracts.map((c) => (
+            <ContractCard
+              key={c.id}
+              contract={c}
+              className="mb-2 max-h-[200px] w-96 shrink-0"
+              questionClass="line-clamp-3"
+              trackingPostfix=" tournament"
+              showTime={showTime}
+            />
+          ))}
       <Button
         className="self-center whitespace-nowrap"
         color="blue"