109 lines
3.2 KiB
TypeScript
109 lines
3.2 KiB
TypeScript
import { Page } from 'web/components/page'
|
|
|
|
import { fromPropz, usePropz } from 'web/hooks/use-propz'
|
|
import { dashboardPath, getDashboardBySlug } from 'web/lib/firebase/dashboards'
|
|
import { Dashboard } from 'common/dashboard'
|
|
import { Title } from 'web/components/title'
|
|
import { Spacer } from 'web/components/layout/spacer'
|
|
import { Content } from 'web/components/editor'
|
|
import { UserLink } from 'web/components/user-page'
|
|
import { getUser, User } from 'web/lib/firebase/users'
|
|
import { ShareIcon } from '@heroicons/react/solid'
|
|
import clsx from 'clsx'
|
|
import { Button } from 'web/components/button'
|
|
import { useState } from 'react'
|
|
import { ShareDashboardModal } from 'web/components/share-dashboard-modal'
|
|
import { Row } from 'web/components/layout/row'
|
|
import { Col } from 'web/components/layout/col'
|
|
import { ENV_CONFIG } from 'common/envs/constants'
|
|
import Custom404 from 'web/pages/404'
|
|
|
|
export const getStaticProps = fromPropz(getStaticPropz)
|
|
export async function getStaticPropz(props: { params: { slugs: string[] } }) {
|
|
const { slugs } = props.params
|
|
|
|
const dashboard = await getDashboardBySlug(slugs[0])
|
|
const creatorPromise = dashboard ? getUser(dashboard.creatorId) : null
|
|
const creator = await creatorPromise
|
|
|
|
return {
|
|
props: {
|
|
dashboard: dashboard,
|
|
creator: creator,
|
|
},
|
|
|
|
revalidate: 60, // regenerate after a minute
|
|
}
|
|
}
|
|
|
|
export async function getStaticPaths() {
|
|
return { paths: [], fallback: 'blocking' }
|
|
}
|
|
|
|
export default function DashboardPage(props: {
|
|
dashboard: Dashboard
|
|
creator: User
|
|
}) {
|
|
props = usePropz(props, getStaticPropz) ?? {
|
|
dashboard: null,
|
|
}
|
|
const [isShareOpen, setShareOpen] = useState(false)
|
|
|
|
if (props.dashboard === null) {
|
|
return <Custom404 />
|
|
}
|
|
|
|
const shareUrl = `https://${ENV_CONFIG.domain}${dashboardPath(
|
|
props?.dashboard.slug
|
|
)}`
|
|
|
|
return (
|
|
<Page>
|
|
<div className="mx-auto w-full max-w-3xl ">
|
|
<Spacer h={1} />
|
|
<Title className="!mt-0" text={props.dashboard.name} />
|
|
<Row>
|
|
<Col className="flex-1">
|
|
<div className={'inline-flex'}>
|
|
<div className="mr-1 text-gray-500">Created by</div>
|
|
<UserLink
|
|
className="text-neutral"
|
|
name={props.creator.name}
|
|
username={props.creator.username}
|
|
/>
|
|
</div>
|
|
</Col>
|
|
<Col>
|
|
<Button
|
|
size="lg"
|
|
color="gray-white"
|
|
className={'flex'}
|
|
onClick={() => {
|
|
setShareOpen(true)
|
|
}}
|
|
>
|
|
<ShareIcon
|
|
className={clsx('mr-2 h-[24px] w-5')}
|
|
aria-hidden="true"
|
|
/>
|
|
Share
|
|
<ShareDashboardModal
|
|
isOpen={isShareOpen}
|
|
setOpen={setShareOpen}
|
|
shareUrl={shareUrl}
|
|
/>
|
|
</Button>
|
|
</Col>
|
|
</Row>
|
|
|
|
<Spacer h={2} />
|
|
<div className="rounded-lg bg-white px-6 py-4 sm:py-0">
|
|
<div className="form-control w-full py-2">
|
|
<Content content={props.dashboard.content} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Page>
|
|
)
|
|
}
|