diff --git a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts index 81f0e67c..2443d77b 100644 --- a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts +++ b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.theme.ts @@ -18,6 +18,7 @@ export const projectCardTheme = tv({ 'tracking-[-0.006em]', ], description: ['text-xs', 'text-elements-low-em'], + icons: ['flex', 'items-center', 'gap-1'], lowerContent: [ 'bg-surface-card-hovered', 'px-4', diff --git a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx index 0ebfd255..85603037 100644 --- a/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx +++ b/packages/frontend/src/components/projects/ProjectCard/ProjectCard.tsx @@ -8,6 +8,7 @@ import { ClockIcon, GitHubLogo, HorizontalDotIcon, + WarningDiamondIcon, } from 'components/shared/CustomIcon'; import { relativeTimeMs } from 'utils/time'; import { Link } from 'react-router-dom'; @@ -29,12 +30,14 @@ export interface ProjectCardProps export const ProjectCard = ({ className, project, - status, + status = 'failure', ...props }: ProjectCardProps) => { const theme = projectCardTheme(); const hasDeployment = project.deployments.length > 0; - console.log(project); + // TODO: Update this to use the actual status from the API + const hasError = status === 'failure'; + const handleOptionsClick = ( e: MouseEvent, ) => { @@ -59,27 +62,29 @@ export const ProjectCard = ({ {project.deployments[0]?.domain?.name ?? 'No domain'}

- {/* Dot icon */} - {/* // TODO: Add popover menu here */} - - - - - - Project settings - - Delete project - - - + {/* Icons */} +
+ {hasError && } + + + + + + Project settings + + Delete project + + + +
{/* Wave */} diff --git a/packages/frontend/src/components/shared/CustomIcon/WarningDiamondIcon.tsx b/packages/frontend/src/components/shared/CustomIcon/WarningDiamondIcon.tsx new file mode 100644 index 00000000..cb60f239 --- /dev/null +++ b/packages/frontend/src/components/shared/CustomIcon/WarningDiamondIcon.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { CustomIcon, CustomIconProps } from './CustomIcon'; + +export const WarningDiamondIcon = (props: CustomIconProps) => { + return ( + + + + ); +}; diff --git a/packages/frontend/src/components/shared/CustomIcon/index.ts b/packages/frontend/src/components/shared/CustomIcon/index.ts index ccc6e792..471d8272 100644 --- a/packages/frontend/src/components/shared/CustomIcon/index.ts +++ b/packages/frontend/src/components/shared/CustomIcon/index.ts @@ -29,3 +29,4 @@ export * from './BranchIcon'; export * from './GitHubLogo'; export * from './ClockIcon'; export * from './HorizontalDotIcon'; +export * from './WarningDiamondIcon';