Card Click Redirect Implementationbe a codev

Author: raineer

apps/codebility/app/(marketing)/_components/landing/LandingIntern-CodevCard.tsx

@@ -6,6 +6,7 @@ import { motion, useInView } from "framer-motion";
 import { Card, CardContent } from "@/components/ui/card";
 
 type Person = {
+  id: string; // ✅ Added id field for navigation
   name: string;
   role: 'Intern' | 'Codev'; // Only two possible roles from database
   image?: string; // image URL (optional)
@@ -231,6 +232,8 @@ export default function InternCards({ interns }: { interns: Person[] }) {
               }}
               whileTap={{ scale: 0.95 }}
               style={{ perspective: "1000px" }}
+              onClick={() => window.location.href = `https://www.codebility.tech/profiles/${intern.id}`}
+              className="cursor-pointer"
             >
               <motion.div
                 className="h-full relative"

apps/codebility/app/(marketing)/profiles/_components/CodevCard.tsx

@@ -118,13 +118,17 @@ const CodevCard = ({ codev, color }: Props) => {
       : {};
   }, [codev.level, codev.codev_points]);
 
+  // Line 119: Enhanced card wrapper with click redirect
   return (
     <div
       className="h-64"
       onMouseEnter={() => setHovered(true)}
       onMouseLeave={() => setHovered(false)}
     >
-      <div className="group relative flex h-full w-full flex-col items-center justify-between rounded-lg border border-white/20 bg-white/10 p-4 shadow-2xl backdrop-blur-md transition-all duration-300 hover:bg-white/20 dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10">
+      <div 
+        onClick={() => window.location.href = `https://www.codebility.tech/profiles/${codev.id}`}
+        className="group relative flex h-full w-full flex-col items-center justify-between rounded-lg border border-white/20 bg-white/10 p-4 shadow-2xl backdrop-blur-md transition-all duration-300 cursor-pointer hover:bg-white/20 hover:scale-[1.02] dark:border-white/10 dark:bg-white/5 dark:hover:bg-white/10"
+      >
         {/* Background decoration */}
         <div className="from-customBlue-50/30 dark:from-customBlue-950/10 absolute inset-0 bg-gradient-to-br to-purple-50/30 opacity-0 transition-opacity duration-300 group-hover:opacity-100 dark:to-purple-950/10" />
         <div className="absolute -right-4 -top-4 h-32 w-32 rounded-full bg-gradient-to-br from-yellow-400/10 to-orange-400/10 opacity-0 blur-2xl transition-opacity duration-500 group-hover:opacity-100" />
@@ -197,7 +201,8 @@ const CodevCard = ({ codev, color }: Props) => {
             <TooltipProvider>
               <Tooltip delayDuration={100}>
                 <TooltipTrigger asChild>
-                  <Link href={`/profiles/${codev.id}`} target="_blank">
+                  {/* Line 217: Added stopPropagation to prevent card click when button is clicked */}
+                  <Link href={`/profiles/${codev.id}`} target="_blank" onClick={(e) => e.stopPropagation()}>
                     <Button
                       variant="outline"
                       size="icon"
@@ -242,4 +247,4 @@ const CodevCard = ({ codev, color }: Props) => {
   );
 };
 
-export default CodevCard;
+export default CodevCard;

apps/codebility/app/home/in-house/_components/cards/CodevCard.tsx

@@ -95,6 +95,7 @@ export function CodevCard({ data, onEdit, onDelete, roles }: CodevCardProps) {
             alt={`${data.first_name} avatar`}
             width={80}
             height={80}
+            unoptimized={true}
             className="border-light-700 dark:border-dark-200 h-20 w-20 rounded-full border-2 object-cover"
           />
         </div>
@@ -182,10 +183,11 @@ export function CodevCard({ data, onEdit, onDelete, roles }: CodevCardProps) {
       </CardContent>
 
       <CardFooter className="border-light-700 dark:border-dark-200 flex justify-center gap-2 border-t py-1">
+        {/* Line 138: Enhanced View button with actual profile navigation */}
         <Button
           variant="ghost"
           size="sm"
-          onClick={() => alert("View action")}
+          onClick={() => window.location.href = `https://www.codebility.tech/profiles/${data.id}`}
           className="dark:text-light-900 hover:bg-light-800 dark:hover:bg-dark-200 p-1 text-black"
         >
           <Eye className="h-4 w-4" />
@@ -209,4 +211,4 @@ export function CodevCard({ data, onEdit, onDelete, roles }: CodevCardProps) {
       </CardFooter>
     </Card>
   );
-}
+}

apps/codebility/app/home/orgchart/_components/OrgChartTeamMemberCard.tsx

@@ -6,16 +6,22 @@ import { Card, CardContent } from "@codevs/ui/card";
 
 import { TeamMemberCardProps } from "../_types/org-chart";
 
+// Line 8: Added id destructuring and onClick handler with hover effects
 export const TeamMemberCard = ({
+  id,
   first_name,
   last_name,
   display_position,
   image_url,
 }: TeamMemberCardProps) => {
   const validImageUrl = getValidImageUrl(image_url);
 
+  // Line 15: Card wrapper now clickable with cursor pointer and enhanced hover
   return (
-    <Card className="group relative h-32 w-36 overflow-hidden border-2 border-gray-200 shadow-lg transition-all duration-300 hover:-translate-y-1 hover:shadow-xl dark:border-gray-700">
+    <Card 
+      onClick={() => window.location.href = `https://www.codebility.tech/profiles/${id}`}
+      className="group relative h-32 w-36 overflow-hidden border-2 border-gray-200 shadow-lg transition-all duration-300 cursor-pointer hover:-translate-y-1 hover:shadow-2xl hover:scale-[1.02] dark:border-gray-700"
+    >
       <div className="absolute inset-0 bg-gradient-to-t from-customBlue-500/5 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100" />
       <CardContent className="relative flex h-full flex-col items-center justify-center gap-1 p-2">
         <div className="relative">
@@ -40,4 +46,4 @@ export const TeamMemberCard = ({
       </CardContent>
     </Card>
   );
-};
+};