konnosDashboard
benefits.tsx91 lines · main
1import { CheckCircle2 } from 'lucide-react'
2import { Button } from 'ui'
3
4import { ProjectClaimLayout } from './layout'
5import { ApiAuthorizationResponse } from '@/data/api-authorization/api-authorization-query'
6import { OrganizationProjectClaimResponse } from '@/data/organizations/organization-project-claim-query'
7
8export const ProjectClaimBenefits = ({
9 projectClaim,
10 requester,
11 onContinue,
12}: {
13 projectClaim: OrganizationProjectClaimResponse
14 requester: ApiAuthorizationResponse
15 onContinue: () => void
16}) => {
17 return (
18 <ProjectClaimLayout
19 title={
20 <>
21 Claim a project <span className="text-brand">{projectClaim?.project?.name}</span> from{' '}
22 <span className="text-brand">{requester?.name}</span>
23 </>
24 }
25 >
26 <div className="space-y-8 text-sm flex flex-col items-center">
27 <div className="space-y-4 mt-6">
28 <h3 className="">Why manage your database project on Briven?</h3>
29 <ul className="space-y-3">
30 <li className="flex space-x-2">
31 <CheckCircle2 className="text-brand w-5 h-5" />
32 <span>
33 <span className="text-foreground-light">Excellent Technical Support</span>
34 <span className="block text-foreground-lighter">
35 Get expert help when you need it, with support ready to assist your development
36 process.
37 </span>
38 </span>
39 </li>
40 <li className="flex space-x-2">
41 <CheckCircle2 className="text-brand w-5 h-5" />
42 <span>
43 <span className="text-foreground-light">Unrestricted usage.</span>
44 <span className="block text-foreground-lighter">
45 Grow your application without hitting arbitrary usage caps—built to scale with
46 you.
47 </span>
48 </span>
49 </li>
50 <li className="flex space-x-2">
51 <CheckCircle2 className="text-brand w-5 h-5" />
52 <span>
53 <span className="text-foreground-light">Visibility into your data.</span>
54 <span className="block text-foreground-lighter">
55 You'll have full control over your data to help your users get the best
56 experience.
57 </span>
58 </span>
59 </li>
60 <li className="flex space-x-2">
61 <CheckCircle2 className="text-brand w-5 h-5" />
62 <span>
63 <span className="text-foreground-light">Observability and easy debugging.</span>
64 <span className="block text-foreground-lighter">
65 You'll have full view when things go wrong.
66 </span>
67 </span>
68 </li>
69 <li className="flex space-x-2">
70 <div>
71 <CheckCircle2 className="text-brand w-5 h-5" />
72 </div>
73 <span>
74 <span className="text-foreground-light">Easy Compute Scaling.</span>
75 <span className="block text-foreground-lighter">
76 Upgrade compute resources to handle increased traffic and larger database
77 operations smoothly.
78 </span>
79 </span>
80 </li>
81 </ul>
82 </div>
83 <div className="flex justify-center sticky bottom-0">
84 <Button size="medium" onClick={onContinue}>
85 Continue connection
86 </Button>
87 </div>
88 </div>
89 </ProjectClaimLayout>
90 )
91}