Tweaks to search layout

This commit is contained in:
James Grugett 2022-09-14 11:55:16 -05:00
parent af2831cbfa
commit 10a5596a5c

View File

@ -2,9 +2,8 @@ import React, { ReactNode } from 'react'
import Router from 'next/router' import Router from 'next/router'
import { import {
AdjustmentsIcon, AdjustmentsIcon,
PlusSmIcon, PencilAltIcon,
ArrowSmRightIcon, ArrowSmRightIcon,
SearchIcon,
DotsHorizontalIcon, DotsHorizontalIcon,
} from '@heroicons/react/solid' } from '@heroicons/react/solid'
import clsx from 'clsx' import clsx from 'clsx'
@ -55,8 +54,6 @@ export default function Home() {
return ( return (
<Page> <Page>
<Col className="pm:mx-10 gap-4 px-4 pb-12 pt-2 sm:pt-0"> <Col className="pm:mx-10 gap-4 px-4 pb-12 pt-2 sm:pt-0">
<SearchRow />
<Row className={'w-full items-start justify-between gap-8'}> <Row className={'w-full items-start justify-between gap-8'}>
<Row className="items-end gap-4"> <Row className="items-end gap-4">
<Title className="!mb-1 !mt-0" text="Home" /> <Title className="!mb-1 !mt-0" text="Home" />
@ -65,6 +62,8 @@ export default function Home() {
<DailyProfitAndBalance className="" user={user} /> <DailyProfitAndBalance className="" user={user} />
</Row> </Row>
<SearchRow />
{sections.map((item) => { {sections.map((item) => {
const { id } = item const { id } = item
if (id === 'daily-movers') { if (id === 'daily-movers') {
@ -91,13 +90,13 @@ export default function Home() {
</Col> </Col>
<button <button
type="button" type="button"
className="fixed bottom-[70px] right-3 z-20 inline-flex items-center rounded-full border border-transparent bg-indigo-600 p-3 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 lg:hidden" className="fixed bottom-[70px] right-3 z-20 inline-flex items-center rounded-full border border-transparent bg-indigo-600 p-4 text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 lg:hidden"
onClick={() => { onClick={() => {
Router.push('/create') Router.push('/create')
track('mobile create button') track('mobile create button')
}} }}
> >
<PlusSmIcon className="h-8 w-8" aria-hidden="true" /> <PencilAltIcon className="h-7 w-7" aria-hidden="true" />
</button> </button>
</Page> </Page>
) )
@ -163,7 +162,7 @@ function GroupSection(props: {
buttonContent={ buttonContent={
<button className="text-gray-500 hover:text-gray-700"> <button className="text-gray-500 hover:text-gray-700">
<DotsHorizontalIcon <DotsHorizontalIcon
className={clsx('h-6 w-6 flex-shrink-0')} className={clsx('h-5 w-5 flex-shrink-0')}
aria-hidden="true" aria-hidden="true"
/> />
</button> </button>
@ -183,7 +182,7 @@ function GroupSection(props: {
defaultSort={'score'} defaultSort={'score'}
additionalFilter={{ groupSlug: group.slug }} additionalFilter={{ groupSlug: group.slug }}
noControls noControls
maxResults={6} maxResults={4}
persistPrefix={`experimental-home-${group.slug}`} persistPrefix={`experimental-home-${group.slug}`}
/> />
</Col> </Col>
@ -217,15 +216,7 @@ function EditButton(props: { className?: string }) {
function SearchRow() { function SearchRow() {
return ( return (
<SiteLink href="/search" className="hover:no-underline"> <SiteLink href="/search" className="hover:no-underline">
<Row> <input className="input input-bordered w-full" placeholder="Search" />
<Button size="sm" color="gray-white">
<SearchIcon className={clsx('h-[24px] w-5')} aria-hidden="true" />
</Button>
<input
className="input pointer-events-none w-full"
placeholder="Search"
/>
</Row>
</SiteLink> </SiteLink>
) )
} }