From 392377d6ae8d5b26185e421812fa12d9355ed822 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Wed, 28 Feb 2024 14:45:27 +0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20feat:=20Add=20isComingSoon?=
 =?UTF-8?q?=20property=20to=20templates=20and=20handle=20click=20event=20i?=
 =?UTF-8?q?n=20TemplateCard=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/frontend/src/assets/templates.ts     |  5 +++
 .../create/TemplateCard/TemplateCard.tsx      | 43 ++++++++++++++-----
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/assets/templates.ts b/packages/frontend/src/assets/templates.ts
index 0b56696f..84c60bb5 100644
--- a/packages/frontend/src/assets/templates.ts
+++ b/packages/frontend/src/assets/templates.ts
@@ -4,29 +4,34 @@ export default [
     name: 'Progressive Web App (PWA)',
     icon: 'pwa',
     repoFullName: `${process.env.REACT_APP_GITHUB_PWA_TEMPLATE_REPO}`,
+    isComingSoon: false,
   },
   {
     id: '2',
     name: 'Image Upload PWA',
     icon: 'pwa',
     repoFullName: `${process.env.REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
+    isComingSoon: false,
   },
   {
     id: '3',
     name: 'Kotlin',
     icon: 'kotlin',
     repoFullName: '',
+    isComingSoon: false,
   },
   {
     id: '4',
     name: 'React Native',
     icon: 'react-native',
     repoFullName: '',
+    isComingSoon: false,
   },
   {
     id: '5',
     name: 'Swift',
     icon: 'swift',
     repoFullName: '',
+    isComingSoon: true,
   },
 ];
diff --git a/packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx b/packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx
index a191d117..b5ac2057 100644
--- a/packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx
+++ b/packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx
@@ -9,12 +9,14 @@ import { Tag } from 'components/shared/Tag';
 import React, { ComponentPropsWithoutRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useToast } from 'components/shared/Toast';
+import { cn } from 'utils/classnames';
 
 export interface TemplateDetail {
   id: string;
   name: string;
   icon: string;
   repoFullName?: string;
+  isComingSoon?: boolean;
 }
 
 export interface TemplateCardProps extends ComponentPropsWithoutRef<'div'> {
@@ -27,6 +29,14 @@ export const TemplateCard = ({ template, isGitAuth }: TemplateCardProps) => {
   const navigate = useNavigate();
 
   const handleClick = useCallback(() => {
+    if (template?.isComingSoon) {
+      return toast({
+        id: 'coming-soon',
+        title: 'This template is coming soon',
+        variant: 'info',
+        onDismiss: dismiss,
+      });
+    }
     if (isGitAuth) {
       return navigate(`/template?templateId=${template.id}`);
     }
@@ -36,27 +46,40 @@ export const TemplateCard = ({ template, isGitAuth }: TemplateCardProps) => {
       variant: 'error',
       onDismiss: dismiss,
     });
-  }, [isGitAuth, navigate, template.id, toast]);
+  }, [isGitAuth, navigate, template, toast]);
 
   return (
-    <div className="flex items-center gap-3 px-3 py-3 bg-base-bg-alternate rounded-2xl">
+    <button
+      className={cn(
+        'flex items-center gap-3 px-3 py-3 bg-base-bg-alternate hover:bg-base-bg-emphasized rounded-2xl group',
+        {
+          'cursor-default': template?.isComingSoon,
+        },
+      )}
+      onClick={handleClick}
+    >
       {/* Icon */}
-      <div className="px-1 py-1 rounded-xl bg-base-bg border border-border-interactive shadow-card">
+      <div className="px-1 py-1 rounded-xl bg-base-bg border border-border-interactive/10 shadow-card-sm">
         <TemplateIcon type={template.icon as TemplateIconType} />
       </div>
       {/* Name */}
-      <p className="flex-1 text-sm tracking-tighter text-elements-high-em">
+      <p className="flex flex-1 text-sm tracking-tighter text-elements-high-em">
         {template.name}
       </p>
-      {template?.repoFullName ? (
-        <Button variant="tertiary" size="sm" iconOnly onClick={handleClick}>
-          <ArrowRightCircleIcon />
-        </Button>
-      ) : (
+      {template?.isComingSoon ? (
         <Tag size="xs" type="neutral" leftIcon={<ClockOutlineIcon />}>
           Soon
         </Tag>
+      ) : (
+        <Button
+          variant="tertiary"
+          size="sm"
+          iconOnly
+          className="group-hover:flex hidden"
+        >
+          <ArrowRightCircleIcon />
+        </Button>
       )}
-    </div>
+    </button>
   );
 };