Quality of life changes

Author: arnab2001

src/app/chat/[id]/project.json

@@ -13,5 +13,10 @@
       "id": "3",
       "projectname": "code-compass",
       "indexname": "code-compass"
+    },
+    {
+      "id": "4",
+      "projectname": "Vibe-n",
+      "indexname": "codetest"
     }
   ]

src/components/home/section/ProjectCart.tsx

@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion';
+import { useRouter } from 'next/navigation';
 import { LuChevronRight, LuCode, LuStar, LuUsers } from 'react-icons/lu';
 
 import { ProjectCardProps } from 'types';
@@ -11,49 +12,61 @@ const ProjectCard: React.FC<ProjectCardProps> = ({
   stars,
   contributors,
   isRight,
-}) => (
-  <motion.div
-    className={`flex ${isRight ? 'justify-start' : 'justify-end'}  relative`}
-    initial={{ opacity: 0, x: isRight ? 100 : -100 }}
-    whileInView={{ opacity: 1, x: 0 }}
-    viewport={{ once: true }}
-    transition={{ duration: 0.6 }}
-  >
-    <div
-      className={`w-full md:w-5/12 ${
-        isRight ? 'md:ml-auto md:pr-8' : 'md:mr-auto md:pl-8'
-      }`}
+  url,
+}) => {
+  const router = useRouter();
+
+  const handleExploreClick = () => {
+    router.push(url);
+  };
+
+  return (
+    <motion.div
+      className={`flex ${isRight ? 'justify-start' : 'justify-end'} relative`}
+      initial={{ opacity: 0, x: isRight ? 100 : -100 }}
+      whileInView={{ opacity: 1, x: 0 }}
+      viewport={{ once: true }}
+      transition={{ duration: 0.6 }}
     >
-      <div className="rounded-xl bg-gradient-to-br from-green-700 to-primary-900 p-6 shadow-lg transition-all duration-300 hover:shadow-2xl">
-        <div className="mb-4 flex items-center justify-between">
-          <div className="flex items-center">
-            <LuCode className="mr-2 text-green-300" size={24} />
-            <h3 className="text-xl font-bold text-white">{title}</h3>
-          </div>
-          <span className="rounded-full bg-green-900 px-3 py-1 text-sm font-semibold text-green-300">
-            {language}
-          </span>
-        </div>
-        <p className="mb-4 text-gray-300">{description}</p>
-        <div className="flex items-center justify-between text-gray-300">
-          <div className="flex items-center space-x-4">
-            <span className="flex items-center">
-              <LuStar className="mr-1" /> {stars}
-            </span>
-            <span className="flex items-center">
-              <LuUsers className="mr-1" /> {contributors}
+      <div
+        className={`w-full md:w-5/12 ${
+          isRight ? 'md:ml-auto md:pr-8' : 'md:mr-auto md:pl-8'
+        }`}
+      >
+        <div className="rounded-xl bg-gradient-to-br from-green-700 to-primary-900 p-6 shadow-lg transition-all duration-300 hover:shadow-2xl">
+          <div className="mb-4 flex items-center justify-between">
+            <div className="flex items-center">
+              <LuCode className="mr-2 text-green-300" size={24} />
+              <h3 className="text-xl font-bold text-white">{title}</h3>
+            </div>
+            <span className="rounded-full bg-green-900 px-3 py-1 text-sm font-semibold text-green-300">
+              {language}
             </span>
           </div>
-          <span className="text-sm">Updated {lastUpdated}</span>
-        </div>
-        <div className="mt-4 flex justify-end">
-          <button className="flex items-center rounded-full bg-green-500 px-4 py-2 text-white transition-colors duration-300 hover:bg-green-400">
-            Explore <LuChevronRight className="ml-1" />
-          </button>
+          <p className="mb-4 text-gray-300">{description}</p>
+          <div className="flex items-center justify-between text-gray-300">
+            <div className="flex items-center space-x-4">
+              <span className="flex items-center">
+                <LuStar className="mr-1" /> {stars}
+              </span>
+              <span className="flex items-center">
+                <LuUsers className="mr-1" /> {contributors}
+              </span>
+            </div>
+            <span className="text-sm">Updated {lastUpdated}</span>
+          </div>
+          <div className="mt-4 flex justify-end">
+            <button
+              className="flex items-center rounded-full bg-green-500 px-4 py-2 text-white transition-colors duration-300 hover:bg-green-400"
+              onClick={handleExploreClick}
+            >
+              Explore <LuChevronRight className="ml-1" />
+            </button>
+          </div>
         </div>
       </div>
-    </div>
-  </motion.div>
-);
+    </motion.div>
+  );
+};
 
 export default ProjectCard;

src/components/home/section/helper/projects.ts

@@ -5,7 +5,7 @@ export const projects = [
       'AttireX is a fashion e-commerce website that aims to provide a seamless and enjoyable shopping experience for customers looking to explore and purchase the latest fashion trends..',
     language: 'React',
     lastUpdated: 'last year',
-    url: '/chat/3',
+    url: '/chat/2',
     stars: 8,
     contributors: 1,
   },
@@ -15,7 +15,7 @@ export const projects = [
       ' Save time, boost productivity, and ensure seamless knowledge transfer across your organization. Transform how your team navigates project information.',
     language: 'NextJS',
     lastUpdated: 'a day ago',
-    url: '/chat/1',
+    url: '/chat/3',
     stars: 2,
     contributors: 2,
   },
@@ -26,7 +26,7 @@ export const projects = [
     language: 'Typescript',
     lastUpdated: '3 days ago',
     stars: 2,
-    url: '/chat/2',
+    url: '/chat/1',
     contributors: 1,
   },
 ];

types/interface/projectCard.ts

@@ -6,4 +6,5 @@ export interface ProjectCardProps {
   stars: number;
   contributors: number;
   isRight: boolean;
+  url: string;
 }