⚡️ feat: Add isComingSoon property to templates and handle click event in TemplateCard component

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,
   },
 ];

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>
   );
 };