manifold/web/pages/experimental/home/edit.tsx

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 ?? [])

  const updateHomeSections = (newHomeSections: string[]) => {
    if (!user) return
    updateUser(user.id, { homeSections: newHomeSections })
    setHomeSections(newHomeSections)
  }

  return (
    <Page>
      <Col className="pm:mx-10 gap-4 px-4 pb-6 pt-2">
        <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>
  )
}