From d77092665140786fd68c15b3641a68645c799dfa Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Tue, 27 Feb 2024 20:51:29 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20add=20warning=20er?=
 =?UTF-8?q?ror=20icon?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../projects/ProjectCard/ProjectCard.theme.ts |  1 +
 .../projects/ProjectCard/ProjectCard.tsx      | 51 ++++++++++---------
 .../shared/CustomIcon/WarningDiamondIcon.tsx  | 19 +++++++
 .../src/components/shared/CustomIcon/index.ts |  1 +
 4 files changed, 49 insertions(+), 23 deletions(-)
 create mode 100644 packages/frontend/src/components/shared/CustomIcon/WarningDiamondIcon.tsx

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<HTMLButtonElement, globalThis.MouseEvent>,
   ) => {
@@ -59,27 +62,29 @@ export const ProjectCard = ({
             {project.deployments[0]?.domain?.name ?? 'No domain'}
           </p>
         </Link>
-        {/* Dot icon */}
-        {/* // TODO: Add popover menu here */}
-        <Menu placement="bottom-end">
-          <MenuHandler>
-            <Button
-              shape="default"
-              size="xs"
-              variant="ghost"
-              iconOnly
-              onClick={handleOptionsClick}
-            >
-              <HorizontalDotIcon />
-            </Button>
-          </MenuHandler>
-          <MenuList placeholder={''}>
-            <MenuItem placeholder={''}>Project settings</MenuItem>
-            <MenuItem className="text-red-500" placeholder={''}>
-              Delete project
-            </MenuItem>
-          </MenuList>
-        </Menu>
+        {/* Icons */}
+        <div className={theme.icons()}>
+          {hasError && <WarningDiamondIcon className="text-elements-danger" />}
+          <Menu placement="bottom-end">
+            <MenuHandler>
+              <Button
+                shape="default"
+                size="xs"
+                variant="ghost"
+                iconOnly
+                onClick={handleOptionsClick}
+              >
+                <HorizontalDotIcon />
+              </Button>
+            </MenuHandler>
+            <MenuList placeholder={''}>
+              <MenuItem placeholder={''}>Project settings</MenuItem>
+              <MenuItem className="text-red-500" placeholder={''}>
+                Delete project
+              </MenuItem>
+            </MenuList>
+          </Menu>
+        </div>
       </div>
       {/* Wave */}
       <WavyBorder />
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 (
+    <CustomIcon
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M18.3851 9.11879L10.8812 1.6141C10.647 1.38129 10.3302 1.25061 9.99999 1.25061C9.66976 1.25061 9.35294 1.38129 9.11874 1.6141L1.61874 9.11879C1.38593 9.35299 1.25525 9.66981 1.25525 10C1.25525 10.3303 1.38593 10.6471 1.61874 10.8813L9.12265 18.386C9.35685 18.6188 9.67367 18.7495 10.0039 18.7495C10.3341 18.7495 10.6509 18.6188 10.8851 18.386L18.3891 10.8813C18.6219 10.6471 18.7525 10.3303 18.7525 10C18.7525 9.66981 18.6219 9.35299 18.3891 9.11879H18.3851ZM9.37499 6.25004C9.37499 6.08428 9.44084 5.92531 9.55805 5.8081C9.67526 5.69089 9.83423 5.62504 9.99999 5.62504C10.1658 5.62504 10.3247 5.69089 10.4419 5.8081C10.5591 5.92531 10.625 6.08428 10.625 6.25004V10.625C10.625 10.7908 10.5591 10.9498 10.4419 11.067C10.3247 11.1842 10.1658 11.25 9.99999 11.25C9.83423 11.25 9.67526 11.1842 9.55805 11.067C9.44084 10.9498 9.37499 10.7908 9.37499 10.625V6.25004ZM9.99999 14.375C9.81457 14.375 9.63332 14.3201 9.47914 14.217C9.32497 14.114 9.20481 13.9676 9.13385 13.7963C9.0629 13.625 9.04433 13.4365 9.0805 13.2546C9.11668 13.0728 9.20597 12.9057 9.33708 12.7746C9.46819 12.6435 9.63524 12.5542 9.81709 12.5181C9.99895 12.4819 10.1875 12.5004 10.3588 12.5714C10.5301 12.6424 10.6765 12.7625 10.7795 12.9167C10.8825 13.0709 10.9375 13.2521 10.9375 13.4375C10.9375 13.6862 10.8387 13.9246 10.6629 14.1005C10.4871 14.2763 10.2486 14.375 9.99999 14.375Z"
+        fill="currentColor"
+      />
+    </CustomIcon>
+  );
+};
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';