konnosDashboard
EmptyStates.tsx77 lines · main
1import { Github } from 'lucide-react'
2import Link from 'next/link'
3import { Button } from 'ui'
4
5import { BranchSelector } from './BranchSelector'
6import { DocsButton } from '@/components/ui/DocsButton'
7import type { Branch } from '@/data/branches/branches-query'
8import { DOCS_URL } from '@/lib/constants'
9
10const EMPTY_STATE_CONTAINER = 'flex items-center flex-col gap-0.5 justify-center w-full py-10 px-4'
11
12export const PullRequestsEmptyState = ({
13 url,
14 projectRef,
15 branches,
16 onBranchSelected,
17 isUpdating,
18 hasGithubConnection,
19}: {
20 url: string
21 projectRef: string
22 branches: Branch[]
23 onBranchSelected: (branch: Branch) => void
24 isUpdating: boolean
25 hasGithubConnection?: boolean
26}) => {
27 return (
28 <div className={EMPTY_STATE_CONTAINER}>
29 <p>No merge requests</p>
30 <p className="text-foreground-lighter text-center text-balance">
31 Create your first merge request to merge changes back to the main branch
32 </p>
33 <div className="flex items-center space-x-2 mt-4">
34 {hasGithubConnection ? (
35 <Button type="outline" asChild icon={<Github />}>
36 <a href={url} target="_blank" rel="noopener noreferrer">
37 Create pull request
38 </a>
39 </Button>
40 ) : (
41 <Button asChild type="outline">
42 <Link href={`/project/${projectRef}/settings/integrations`}>Connect to GitHub</Link>
43 </Button>
44 )}
45 <BranchSelector
46 type="outline"
47 align="center"
48 branches={branches}
49 onBranchSelected={onBranchSelected}
50 isUpdating={isUpdating}
51 />
52 </div>
53 </div>
54 )
55}
56
57export const PreviewBranchesEmptyState = ({
58 onSelectCreateBranch,
59}: {
60 onSelectCreateBranch: () => void
61}) => {
62 return (
63 <div className={EMPTY_STATE_CONTAINER}>
64 <p>Create your first preview branch</p>
65 <p className="text-foreground-lighter text-center text-balance mb-4">
66 Preview branches are short-lived environments that let you safely experiment with changes to
67 your database schema without affecting your main database.
68 </p>
69 <div className="flex items-center space-x-2">
70 <DocsButton href={`${DOCS_URL}/guides/platform/branching`} />
71 <Button type="primary" onClick={() => onSelectCreateBranch()}>
72 Create branch
73 </Button>
74 </div>
75 </div>
76 )
77}