feat: opening patrols instagram accounts clicking in positions table

Lenugo · Dec 14, 2024 · 695670b · 695670b
1 parent c516d07
commit 695670b
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 37 deletions.
diff --git a/docs/Tropa/ScorePatrols.js b/docs/Tropa/ScorePatrols.js
@@ -1,40 +1,51 @@
-import React from 'react'
-import { scorePatrols } from './utils'
+import React from "react";
+import { scorePatrols } from "./utils";
 
 const ScorePatrols = () => {
-	const sortedPatrols = scorePatrols.patrols.sort((a, b) => b.score - a.score)
+  const sortedPatrols = scorePatrols.patrols.sort((a, b) => b.score - a.score);
 
-	return (
-		<div className='w-full md:w-4/5 mx-auto'>
-			<div className='flex justify-between mb-4 text-xl md:text-2xl font-bold'>
-				<span>Patrulla</span>
-				<span>Puntos</span>
-			</div>
+  const openInstagramAccount = (patrolAccount) => {
+    window.open(`https://www.instagram.com/${patrolAccount}`, "_blank");
+  };
 
-			{sortedPatrols.map((x, index) => (
-				<div key={x.name} className='flex justify-between'>
-					<div className='flex items-center'>
-						<div className='mr-2 sm:mr-3'>
-							<img
-								className='w-14 h-14 rounded-full'
-								src={require(`${x.imgUri}`).default}
-								width='50'
-								height='50'
-								alt={`Insignia de ${x.name}`}
-							/>
-						</div>
-						<div className='font-medium text-gray-800 dark:text-white capitalize'>{x.name}</div>
-						{index === 0 && <span className="text-yellow-500 ml-2">🥇</span>}
+  return (
+    <div className="w-full md:w-4/5 mx-auto">
+      <div className="flex justify-between mb-4 text-xl md:text-2xl font-bold">
+        <span>Patrulla</span>
+        <span>Puntos</span>
+      </div>
+
+      {sortedPatrols.map((x, index) => (
+        <div key={x.name} className="flex justify-between">
+          <div
+            className="flex items-center hover:cursor-pointer"
+            onClick={() => openInstagramAccount(x.igAccount)}
+          >
+            <div className="mr-2 sm:mr-3">
+              <img
+                className="w-14 h-14 rounded-full"
+                src={require(`${x.imgUri}`).default}
+                width="50"
+                height="50"
+                alt={`Insignia de ${x.name}`}
+              />
+            </div>
+            <div className="font-medium text-gray-800 dark:text-white capitalize hover:text-blue-600 dark:hover:text-blue-500">
+              {x.name}
+            </div>
+            {index === 0 && <span className="text-yellow-500 ml-2">🥇</span>}
             {index === 1 && <span className="text-yellow-500 ml-2">🥈</span>}
             {index === 2 && <span className="text-yellow-500 ml-2">🥉</span>}
-					</div>
-					<span className='mr-2'>{x.score}</span>
-				</div>
-			))}
+          </div>
+          <span className="mr-2">{x.score}</span>
+        </div>
+      ))}
 
-			<span className='block text-right w-full text-sm text-gray-500 italic'>Actualizado por última vez: <strong>{scorePatrols.lastUpdated}</strong></span>
-		</div>
-	)
-}
+      <span className="block text-right w-full text-sm text-gray-500 italic">
+        Actualizado por última vez: <strong>{scorePatrols.lastUpdated}</strong>
+      </span>
+    </div>
+  );
+};
 
-export default ScorePatrols
+export default ScorePatrols;
diff --git a/docs/Tropa/utils.js b/docs/Tropa/utils.js
@@ -5,10 +5,35 @@
 export const scorePatrols = {
   lastUpdated: "1/12/2024", // TODO: date time format {d/m/yyyy}
   patrols: [
-    { name: "Patrulla lobo", imgUri: "./img/lobo-badge.png", score: 737 },
-    { name: "Patrulla ardilla", imgUri: "./img/ardilla-badge.png", score: 256 },
-    { name: "Patrulla cuervo", imgUri: "./img/cuervo-badge.png", score: 358 },
-    { name: "Patrulla liebre", imgUri: "./img/liebre-badge.png", score: 322 },
-    { name: "Patrulla toro", imgUri: "./img/toro-badge.png", score: 510 },
+    {
+      name: "Patrulla lobo",
+      igAccount: "patrullalobo44",
+      imgUri: "./img/lobo-badge.png",
+      score: 737,
+    },
+    {
+      name: "Patrulla ardilla",
+      igAccount: "patullaardilla44",
+      imgUri: "./img/ardilla-badge.png",
+      score: 256,
+    },
+    {
+      name: "Patrulla cuervo",
+      igAccount: "patrullacuervo_gs44",
+      imgUri: "./img/cuervo-badge.png",
+      score: 358,
+    },
+    {
+      name: "Patrulla liebre",
+      igAccount: "patrullaliebre44",
+      imgUri: "./img/liebre-badge.png",
+      score: 322,
+    },
+    {
+      name: "Patrulla toro",
+      igAccount: "patrulla_toro44",
+      imgUri: "./img/toro-badge.png",
+      score: 510,
+    },
   ],
 };