fix : modify project ui

Author: keimindev

app/projects/page.tsx

@@ -24,6 +24,8 @@ export default function Projects() {
                 href={d.href}
                 github={d.github}
                 stack={d.stack}
+                live={d.live}
+                app={d.app}
               />
             ))}
           </div>

components/Card.tsx

@@ -3,7 +3,7 @@ import Link from './Link'
 import SocialIcon from './social-icons'
 import TechStackIcon from './stack-icons'
 
-const Card = ({ title, description, imgSrc, href, github, stack }) => (
+const Card = ({ title, description, imgSrc, href, github, stack, live, app }) => (
   <div
     className={`${
       imgSrc && 'h-full'
@@ -49,12 +49,25 @@ const Card = ({ title, description, imgSrc, href, github, stack }) => (
       </h2>
       <p className="prose mb-3 max-w-none text-gray-500 dark:text-gray-400">{description}</p>
       <div className="flex justify-between">
-        <div className="flex flex-wrap items-center justify-between">
+        <div className="flex flex-wrap items-center">
+          {app && (
+            <>
+              <Link href={app} className="text-gray-900 hover:text-primary-500 dark:text-gray-400">
+                AppStore
+              </Link>
+            </>
+          )}
           {github && (
             <>
               <SocialIcon kind="github" href={github} size={5} />
+              <span className="mx-2 text-gray-900 dark:text-gray-400">|</span>
             </>
           )}
+          {live && (
+            <Link href={live} className="text-gray-900 hover:text-primary-500 dark:text-gray-400">
+              Live
+            </Link>
+          )}
         </div>
         {stack?.length > 0 && (
           <div className="flex">

data/projectsData.ts

@@ -5,6 +5,8 @@ interface Project {
   imgSrc?: string
   github?: string
   stack?: string[]
+  live?: string
+  app?: string
 }
 
 const projectsData: Project[] = [
@@ -21,6 +23,7 @@ const projectsData: Project[] = [
     href: '/blog/projects/tot-app',
     github: '',
     stack: ['reactnative', 'tailwindcss', 'recoil', 'appwrite'],
+    app: 'https://apps.apple.com/us/app/t-o-t/id6449160981',
   },
   {
     title: 'SafeMoney',
@@ -37,6 +40,7 @@ const projectsData: Project[] = [
     href: '/blog/projects/tot',
     github: 'https://github.com/keimindev/tot',
     stack: ['nextjs', 'recoil', 'mongodb', 'tailwindcss'],
+    live: 'https://tot.keimindev.com',
   },
   {
     title: 'Netflix OX Quiz',
@@ -45,6 +49,7 @@ const projectsData: Project[] = [
     href: '/blog/projects/netflix-ox-quiz',
     github: 'https://github.com/keimindev/OX_Quiz',
     stack: ['react', 'redux', 'firebase'],
+    live: 'https://netflix-ox-quiz.web.app/',
   },
 ]