⚡️ feat: restyling template card

packages/frontend/src/assets/templates.ts

@@ -2,31 +2,31 @@ export default [
   {
     id: '1',
     name: 'Progressive Web App (PWA)',
-    icon: '^',
+    icon: 'pwa',
     repoFullName: `${process.env.REACT_APP_GITHUB_PWA_TEMPLATE_REPO}`,
   },
   {
     id: '2',
     name: 'Image Upload PWA',
-    icon: '^',
+    icon: 'pwa',
     repoFullName: `${process.env.REACT_APP_GITHUB_IMAGE_UPLOAD_PWA_TEMPLATE_REPO}`,
   },
   {
     id: '3',
     name: 'Kotlin',
-    icon: '^',
+    icon: 'kotlin',
     repoFullName: '',
   },
   {
     id: '4',
     name: 'React Native',
-    icon: '^',
+    icon: 'react-native',
     repoFullName: '',
   },
   {
     id: '5',
     name: 'Swift',
-    icon: '^',
+    icon: 'swift',
     repoFullName: '',
   },
 ];

packages/frontend/src/components/projects/create/TemplateCard.tsx

@@ -1,53 +0,0 @@
-import React from 'react';
-import toast from 'react-hot-toast';
-
-import { IconButton, Typography } from '@material-tailwind/react';
-
-import { Link } from 'react-router-dom';
-
-interface TemplateDetails {
-  id: string;
-  name: string;
-  icon: string;
-}
-interface TemplateCardProps {
-  template: TemplateDetails;
-  isGitAuth: boolean;
-}
-
-const CardDetails = ({ template }: { template: TemplateDetails }) => {
-  return (
-    <div className="h-14 group bg-gray-200 border-gray-200 rounded-lg shadow p-4 flex items-center justify-between">
-      <Typography className="grow" placeholder={''}>
-        {template.icon} {template.name}
-      </Typography>
-      <div>
-        <IconButton
-          size="sm"
-          className="rounded-full hidden group-hover:block"
-          placeholder={''}
-        >
-          {'>'}
-        </IconButton>
-      </div>
-    </div>
-  );
-};
-
-const TemplateCard: React.FC<TemplateCardProps> = ({ template, isGitAuth }) => {
-  return isGitAuth ? (
-    <Link to={`template?templateId=${template.id}`}>
-      <CardDetails template={template} />
-    </Link>
-  ) : (
-    <a
-      onClick={() =>
-        toast.error('Connect Git account to start with a template')
-      }
-    >
-      <CardDetails template={template} />
-    </a>
-  );
-};
-
-export default TemplateCard;

packages/frontend/src/components/projects/create/TemplateCard/TemplateCard.tsx

@@ -0,0 +1,62 @@
+import { Button } from 'components/shared/Button';
+import {
+  ArrowRightCircleIcon,
+  ClockOutlineIcon,
+  TemplateIcon,
+  TemplateIconType,
+} from 'components/shared/CustomIcon';
+import { Tag } from 'components/shared/Tag';
+import React, { ComponentPropsWithoutRef, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useToast } from 'components/shared/Toast';
+
+export interface TemplateDetail {
+  id: string;
+  name: string;
+  icon: string;
+  repoFullName?: string;
+}
+
+export interface TemplateCardProps extends ComponentPropsWithoutRef<'div'> {
+  template: TemplateDetail;
+  isGitAuth: boolean;
+}
+
+export const TemplateCard = ({ template, isGitAuth }: TemplateCardProps) => {
+  const { toast, dismiss } = useToast();
+  const navigate = useNavigate();
+
+  const handleClick = useCallback(() => {
+    if (isGitAuth) {
+      return navigate(`/template?templateId=${template.id}`);
+    }
+    return toast({
+      id: 'connect-git-account',
+      title: 'Connect Git account to start with a template',
+      variant: 'error',
+      onDismiss: dismiss,
+    });
+  }, [isGitAuth, navigate, template.id, toast]);
+
+  return (
+    <div className="flex items-center gap-3 px-3 py-3 bg-base-bg-alternate rounded-2xl">
+      {/* Icon */}
+      <div className="px-1 py-1 rounded-xl bg-base-bg border border-border-interactive shadow-card">
+        <TemplateIcon type={template.icon as TemplateIconType} />
+      </div>
+      {/* Name */}
+      <p className="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>
+      ) : (
+        <Tag size="xs" type="neutral" leftIcon={<ClockOutlineIcon />}>
+          Soon
+        </Tag>
+      )}
+    </div>
+  );
+};

packages/frontend/src/components/projects/create/TemplateCard/index.ts

@@ -0,0 +1 @@
+export * from './TemplateCard';

packages/frontend/src/pages/org-slug/projects/create/index.tsx

@@ -1,18 +1,22 @@
 import React from 'react';
 
-import templates from '../../../../assets/templates';
-import TemplateCard from '../../../../components/projects/create/TemplateCard';
-import RepositoryList from '../../../../components/projects/create/RepositoryList';
-import ConnectAccount from '../../../../components/projects/create/ConnectAccount';
-import { useOctokit } from '../../../../context/OctokitContext';
+import templates from 'assets/templates';
+import RepositoryList from 'components/projects/create/RepositoryList';
+import ConnectAccount from 'components/projects/create/ConnectAccount';
+import { useOctokit } from 'context/OctokitContext';
+import { Heading } from 'components/shared/Heading';
+import { TemplateCard } from 'components/projects/create/TemplateCard';
 
 const NewProject = () => {
   const { octokit, updateAuth, isAuth } = useOctokit();
 
   return isAuth ? (
     <>
-      <h5 className="mt-4 ml-4">Start with template</h5>
-      <div className="grid grid-cols-3 p-4 gap-4">
+      <div className="space-y-3">
+        <Heading as="h3" className="font-medium text-lg">
+          Start with template
+        </Heading>
+        <div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
           {templates.map((template) => {
             return (
               <TemplateCard
@@ -23,6 +27,7 @@ const NewProject = () => {
             );
           })}
         </div>
+      </div>
       <h5 className="mt-4 ml-4">Import a repository</h5>
       <RepositoryList octokit={octokit} />
     </>