New: cp members card

Author: adrianrrruiz

src/components/home/cp-members-content.tsx

@@ -2,6 +2,7 @@
 import { useTranslations } from "next-intl";
 import { FocusCards } from "./focus-cards";
 import { useCodeforcesData } from "@/hooks/use-codeforces-data";
+import AnimatedTooltip from "../shared/ui/tooltip";
 
 const CP_MEMBERS: string[] = [
   "adrianrrruiz",
@@ -12,25 +13,88 @@ const CP_MEMBERS: string[] = [
   "Lorenzo_lrc",
   "harry3008",
   "sandoval95",
+  "Pyotr_",
+  "johan-smc",
+  "a_santamaria",
+  "Julianasolanx"
+];
+
+const CONTESTS: { title: string; src: string; icon: string }[] = [
+  {
+    title: "ICPC (2025)",
+    src: "https://drive.google.com/uc?export=view&id=1a8dbWnSSFwPnR77IJPEJoYB0U4cJxuJN",
+    icon: "/icpc.svg",
+  },
+  {
+    title: "BUHOS INTERNA (2025)",
+    src: "https://drive.google.com/uc?export=view&id=1MptlEaenvDrRRdAKYHWfxxT4ImQNkv8v",
+    icon: "/buhos.svg",
+  },
+  {
+    title: "ECICIENCIA (2025)",
+    src: "https://drive.google.com/uc?export=view&id=19b_jK2XTfC7YxuzbGukJRg_E9WEtCPzR",
+    icon: "/eciciencia.svg",
+  },
+  {
+    title: "ICPC (2024)",
+    src: "https://drive.google.com/uc?export=view&id=1EQ9XTZtkO-JMewDzqfBqUl3UUe3GpauS",
+    icon: "/icpc.svg",
+  },
+  {
+    title: "ECICIENCIA (2024)",
+    src: "https://drive.google.com/uc?export=view&id=1URu88UvYTYdr_gnHZo9kFRErZMJZY-PA",
+    icon: "/eciciencia.svg",
+  },
+  {
+    title: "ICPC (2023)",
+    src: "https://drive.google.com/uc?export=view&id=1_wmQo9AJYp60SpNc-XwZiz7uhSrtGBdd",
+    icon: "/icpc.svg",
+  },
+  {
+    title: "ECICIENCIA (2023)",
+    src: "https://drive.google.com/uc?export=view&id=11v5zOU6sXeikOgXhf9YxYdvxsiTPzCZ_",
+    icon: "/eciciencia.svg",
+  },
+  {
+    title: "ICPC (2022)",
+    src: "https://drive.google.com/uc?export=view&id=1mEeOwdGvE66pQjgf_6WP8IRlwNha2z8L",
+    icon: "/icpc.svg",
+  },
 ];
 
 export const CPMembersContent = () => {
   const t = useTranslations("Activities.cpMembers");
-  const { members, coaches, loading } = useCodeforcesData(CP_MEMBERS);
+  const { members, loading } = useCodeforcesData(CP_MEMBERS);
+
+  const membersItems = members.map((member, index) => ({
+    id: index,
+    name: member.title,
+    designation: "CP Member",
+    image: member.src,
+    html_url: `https://codeforces.com/profile/${member.handle}`,
+    className: "border-gray-200 hover:border-blue-400",
+  }));
 
   if (loading) return <p>{t("loading")}</p>;
 
   return (
     <>
       <p className="dark:text-(--azul-niebla)">
-        Somos un grupo apasionado por competir y desctacarnos cada día más
+        {t("description")}
       </p>
       <br />
-      <FocusCards cards={members} />
+      <FocusCards cards={CONTESTS} />
       <p className="text-3xl text-center my-10 font-semibold dark:text-(--azul-niebla)">
-        {t("coach")}
+        {t("membersTitle")}
       </p>
-      <FocusCards cards={coaches} />
+      {/* Contribuidores del proyecto en el centro*/}
+      <div className="flex justify-center relative z-0">
+        <AnimatedTooltip
+          items={membersItems}
+          className="relative z-0"
+          tooltipOffset="-translate-x-3/4"
+        />
+      </div>
     </>
   );
 };

src/components/home/focus-cards.tsx

@@ -5,6 +5,7 @@ import { cn } from "@/utils/cn";
 type Card = {
   title: string;
   src: string;
+  icon?: string;
 };
 export const Card = React.memo(
   ({
@@ -40,6 +41,7 @@ export const Card = React.memo(
         )}
       >
         <div className="text-xl md:text-2xl font-medium bg-clip-text text-transparent bg-linear-to-b from-neutral-50 to-neutral-200">
+          {card.icon && <Image src={card.icon} width={70} height={70} alt={card.icon} />}
           {card.title}
         </div>
       </div>
@@ -53,7 +55,7 @@ export function FocusCards({ cards }: { cards: Card[] }) {
   const [hovered, setHovered] = useState<number | null>(null);
 
   return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-10 max-w-5xl mx-auto md:px-8 w-full">
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-10 max-w-5xl mx-auto md:px-8 w-full">
       {cards.map((card, index) => (
         <Card
           key={card.title}

src/hooks/use-codeforces-data.ts

@@ -6,15 +6,8 @@ export interface CodeforcesUser {
   titlePhoto: string;
 }
 
-export interface CPData {
-  members: { title: string; src: string }[];
-  coaches: { title: string; src: string }[];
-  loading: boolean;
-}
-
 export const useCodeforcesData = (
-  memberHandles: string[],
-  coachHandle: string = "sandoval95",
+  memberHandles: string[]
 ) => {
   const { data, isLoading } = useQuery({
     queryKey: ["codeforces", memberHandles],
@@ -28,39 +21,29 @@ export const useCodeforcesData = (
       const responseData = await response.json();
 
       if (responseData.status === "OK" && Array.isArray(responseData.result)) {
-        // Separar los coaches de los miembros
         const membersData = responseData.result
-          .filter((user: CodeforcesUser) => user.handle !== coachHandle)
           .sort(
             (a: CodeforcesUser, b: CodeforcesUser) =>
               (b.rating || 0) - (a.rating || 0),
           )
           .map((user: CodeforcesUser) => ({
             title: `${user.handle} - (Rating: ${user.rating})`,
             src: user.titlePhoto,
-          }));
-
-        const coachData = responseData.result
-          .filter((user: CodeforcesUser) => user.handle === coachHandle)
-          .map((user: CodeforcesUser) => ({
-            title: `${user.handle} - Coach`,
-            src: user.titlePhoto,
+            handle: user.handle,
           }));
 
         return {
           members: membersData,
-          coaches: coachData,
           loading: false,
         };
       }
-      return { members: [], coaches: [], loading: false };
+      return { members: [], loading: false };
     },
   });
 
   return (
     data || {
       members: [],
-      coaches: [],
       loading: isLoading,
     }
   );