konnosDashboard
ProjectCard.tsx163 lines · main
1import { Copy, Github, MoreVertical, Settings } from 'lucide-react'
2import { useRouter } from 'next/router'
3import InlineSVG from 'react-inlinesvg'
4import { toast } from 'sonner'
5import {
6 Button,
7 copyToClipboard,
8 DropdownMenu,
9 DropdownMenuContent,
10 DropdownMenuItem,
11 DropdownMenuTrigger,
12} from 'ui'
13
14import { inferProjectStatus } from './ProjectCard.utils'
15import { ProjectCardStatus } from './ProjectCardStatus'
16import CardButton from '@/components/ui/CardButton'
17import { ComputeBadgeWrapper } from '@/components/ui/ComputeBadgeWrapper'
18import PartnerIcon from '@/components/ui/PartnerIcon'
19import type { IntegrationProjectConnection } from '@/data/integrations/integrations.types'
20import { getManagedByFromOrganizationPartner } from '@/data/organizations/managed-by-utils'
21import { ProjectIndexPageLink } from '@/data/prefetchers/project.$ref'
22import { getComputeSize, OrgProject } from '@/data/projects/org-projects-infinite-query'
23import type { ResourceWarning } from '@/data/usage/resource-warnings-query'
24import { useCustomContent } from '@/hooks/custom-content/useCustomContent'
25import { useIsFeatureEnabled } from '@/hooks/misc/useIsFeatureEnabled'
26import { BASE_PATH } from '@/lib/constants'
27import type { Organization } from '@/types'
28
29export interface ProjectCardProps {
30 slug?: string
31 project: OrgProject
32 organization?: Organization
33 rewriteHref?: string
34 githubIntegration?: IntegrationProjectConnection
35 vercelIntegration?: IntegrationProjectConnection
36 resourceWarnings?: ResourceWarning
37}
38
39export const ProjectCard = ({
40 slug,
41 project,
42 rewriteHref,
43 githubIntegration,
44 vercelIntegration,
45 resourceWarnings,
46}: ProjectCardProps) => {
47 const router = useRouter()
48 const { name, ref: projectRef } = project
49
50 const { infraAwsNimbusLabel } = useCustomContent(['infra:aws_nimbus_label'])
51 const providerLabel =
52 project.cloud_provider === 'AWS_NIMBUS' ? infraAwsNimbusLabel : project.cloud_provider
53
54 const desc = `${providerLabel} | ${project.region}`
55
56 const { projectHomepageShowInstanceSize } = useIsFeatureEnabled([
57 'project_homepage:show_instance_size',
58 ])
59
60 const isGithubIntegrated = githubIntegration !== undefined
61 const isVercelIntegrated = vercelIntegration !== undefined
62 const githubRepository = githubIntegration?.metadata.name ?? undefined
63 const projectManagedBy = getManagedByFromOrganizationPartner(
64 undefined,
65 project.integration_source
66 )
67 const projectStatus = inferProjectStatus(project.status)
68
69 return (
70 <>
71 <li className="list-none h-min">
72 <CardButton
73 linkHref={rewriteHref ? rewriteHref : `/project/${projectRef}`}
74 className="h-44 px-0! group pt-5 pb-0 overflow-hidden relative"
75 hideChevron
76 title={
77 <div className="w-full flex flex-col gap-y-4 justify-between px-5">
78 <div className="flex flex-col gap-y-0.5 relative">
79 <div className="flex items-center justify-between">
80 <h5 className="text-sm shrink truncate pr-5">{name}</h5>
81 <div onClick={(e) => e.preventDefault()}>
82 <DropdownMenu>
83 <DropdownMenuTrigger asChild>
84 <Button
85 type="text"
86 icon={<MoreVertical size={14} />}
87 className="w-6 h-6 px-0"
88 onClick={(e) => {
89 e.stopPropagation()
90 e.preventDefault()
91 }}
92 onPointerDown={(e) => e.stopPropagation()}
93 />
94 </DropdownMenuTrigger>
95 <DropdownMenuContent align="end" className="w-48">
96 <DropdownMenuItem
97 className="gap-x-2"
98 onClick={(e) => {
99 e.stopPropagation()
100 copyToClipboard(projectRef)
101 toast.success('Copied project ID to clipboard')
102 }}
103 >
104 <Copy size={14} />
105 <span>Copy project ID</span>
106 </DropdownMenuItem>
107 <DropdownMenuItem
108 className="gap-x-2"
109 onClick={(e) => {
110 e.stopPropagation()
111 router.push(`/project/${projectRef}/settings/general`)
112 }}
113 >
114 <Settings size={14} />
115 <span>Settings</span>
116 </DropdownMenuItem>
117 </DropdownMenuContent>
118 </DropdownMenu>
119 </div>
120 </div>
121 <p className="text-sm text-foreground-lighter">{desc}</p>
122 </div>
123 <div className="flex items-center gap-x-1.5 relative overflow-hidden">
124 {project.status !== 'INACTIVE' && projectHomepageShowInstanceSize && (
125 <ComputeBadgeWrapper
126 slug={slug}
127 projectRef={project.ref}
128 cloudProvider={project.cloud_provider}
129 computeSize={getComputeSize(project)}
130 resourceWarnings={resourceWarnings}
131 badgeClassName="text-[10px] leading-none tracking-[0.07em]"
132 />
133 )}
134 {isVercelIntegrated && (
135 <div className="bg-surface-100 w-5 h-5 p-1 border border-strong rounded-md flex items-center justify-center text-black dark:text-white">
136 <InlineSVG
137 src={`${BASE_PATH}/img/icons/vercel-icon.svg`}
138 title="Vercel Icon"
139 className="w-3"
140 />
141 </div>
142 )}
143 <PartnerIcon organization={{ managed_by: projectManagedBy }} />
144 {isGithubIntegrated && (
145 <div className="bg-surface-100 flex items-center gap-x-0.5 h-5 pr-1 border border-strong rounded-md min-w-0">
146 <div className="w-5 h-5 p-1 flex items-center justify-center shrink-0">
147 <Github size={12} strokeWidth={1.5} />
148 </div>
149 <p className="text-xs text-foreground-light truncate">{githubRepository}</p>
150 </div>
151 )}
152 </div>
153 </div>
154 }
155 footer={
156 <ProjectCardStatus projectStatus={projectStatus} resourceWarnings={resourceWarnings} />
157 }
158 containerElement={<ProjectIndexPageLink projectRef={projectRef} />}
159 />
160 </li>
161 </>
162 )
163}