konnosDashboard
[[...routeSlug]].tsx80 lines · main
1import { NextPage } from 'next'
2import Head from 'next/head'
3import { useRouter } from 'next/router'
4import { cn } from 'ui'
5
6import {
7 Header,
8 LoadingCardView,
9 NoOrganizationsState,
10} from '@/components/interfaces/Home/ProjectList/EmptyStates'
11import { buildOrgUrl } from '@/components/interfaces/Organization/Organization.utils'
12import { OrganizationCard } from '@/components/interfaces/Organization/OrganizationCard'
13import { PageLayout } from '@/components/layouts/PageLayout/PageLayout'
14import { ScaffoldContainer, ScaffoldSection } from '@/components/layouts/Scaffold'
15import { useOrganizationsQuery } from '@/data/organizations/organizations-query'
16import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
17import { withAuth } from '@/hooks/misc/withAuth'
18import { buildStudioPageTitle } from '@/lib/page-title'
19
20const GenericOrganizationPage: NextPage = () => {
21 const router = useRouter()
22 const { appTitle } = useCustomContent(['app:title'])
23 const { routeSlug, ...queryParams } = router.query
24 const queryString =
25 Object.keys(queryParams).length > 0
26 ? new URLSearchParams(queryParams as Record<string, string>).toString()
27 : ''
28
29 const { data: organizations, isPending: isLoading } = useOrganizationsQuery()
30 const pageTitle = buildStudioPageTitle({
31 section: 'Select an organization',
32 surface: 'Organizations',
33 brand: appTitle || 'Briven',
34 })
35
36 return (
37 <>
38 <Head>
39 <title>{pageTitle}</title>
40 <meta name="description" content="Briven Studio" />
41 </Head>
42 <Header />
43 <PageLayout className="grow min-h-0" title="Select an organization to continue">
44 <ScaffoldContainer>
45 <ScaffoldSection isFullWidth>
46 <div
47 className="grow overflow-y-auto"
48 style={{ maxHeight: 'calc(100vh - 49px - 64px)' }}
49 >
50 <div className="w-full mx-auto flex flex-col gap-y-8">
51 {isLoading ? (
52 <LoadingCardView />
53 ) : organizations?.length === 0 ? (
54 <NoOrganizationsState />
55 ) : (
56 <ul
57 className={cn(
58 'w-full mx-auto grid grid-cols-1 gap-4',
59 'sm:grid-cols-1 md:grid-cols-1 lg:grid-cols-2 xl:grid-cols-3'
60 )}
61 >
62 {organizations?.map((org) => (
63 <OrganizationCard
64 key={org.id}
65 organization={org}
66 href={buildOrgUrl({ slug: routeSlug, orgSlug: org.slug, queryString })}
67 />
68 ))}
69 </ul>
70 )}
71 </div>
72 </div>
73 </ScaffoldSection>
74 </ScaffoldContainer>
75 </PageLayout>
76 </>
77 )
78}
79
80export default withAuth(GenericOrganizationPage)