54c227cf6c
* Line clamp question in prob change table * Tweaks * Expand option for daily movers * Snap scrolling for carousel * Add arrows to section headers * Remove carousel from experimental/home * React querify fetching your groups * Edit home is its own page * Add daily profit and balance * Merge branch 'main' into new-home * Make experimental search by your followed groups/creators * Just submit, allow xs on pills * Weigh in * Use next/future/image component to optimize avatar images * Inga/challenge icon (#857) * changed challenge icon to custom icon * fixed tip button alignment * weighing in and trading "weigh in" for "trade" Co-authored-by: Ian Philips <iansphilips@gmail.com> Co-authored-by: Austin Chen <akrolsmir@gmail.com> Co-authored-by: ingawei <46611122+ingawei@users.noreply.github.com> Co-authored-by: mantikoros <sgrugett@gmail.com>
61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import clsx from 'clsx'
|
|
import { useState } from 'react'
|
|
import { ArrangeHome } from 'web/components/arrange-home'
|
|
import { Button } from 'web/components/button'
|
|
import { Col } from 'web/components/layout/col'
|
|
import { Row } from 'web/components/layout/row'
|
|
import { Page } from 'web/components/page'
|
|
import { SiteLink } from 'web/components/site-link'
|
|
import { Title } from 'web/components/title'
|
|
import { useTracking } from 'web/hooks/use-tracking'
|
|
import { useUser } from 'web/hooks/use-user'
|
|
import { updateUser } from 'web/lib/firebase/users'
|
|
|
|
export default function Home() {
|
|
const user = useUser()
|
|
|
|
useTracking('edit home')
|
|
|
|
const [homeSections, setHomeSections] = useState(
|
|
user?.homeSections ?? { visible: [], hidden: [] }
|
|
)
|
|
|
|
const updateHomeSections = (newHomeSections: {
|
|
visible: string[]
|
|
hidden: string[]
|
|
}) => {
|
|
if (!user) return
|
|
updateUser(user.id, { homeSections: newHomeSections })
|
|
setHomeSections(newHomeSections)
|
|
}
|
|
|
|
return (
|
|
<Page>
|
|
<Col className="pm:mx-10 gap-4 px-4 pb-12">
|
|
<Row className={'w-full items-center justify-between'}>
|
|
<Title text="Edit your home page" />
|
|
<DoneButton />
|
|
</Row>
|
|
|
|
<ArrangeHome
|
|
user={user}
|
|
homeSections={homeSections}
|
|
setHomeSections={updateHomeSections}
|
|
/>
|
|
</Col>
|
|
</Page>
|
|
)
|
|
}
|
|
|
|
function DoneButton(props: { className?: string }) {
|
|
const { className } = props
|
|
|
|
return (
|
|
<SiteLink href="/experimental/home">
|
|
<Button size="lg" color="blue" className={clsx(className, 'flex')}>
|
|
Done
|
|
</Button>
|
|
</SiteLink>
|
|
)
|
|
}
|