feat: Add "Ver combate" button to Combates page

src/consts/combats.ts

@@ -8,13 +8,15 @@ export const COMBATS: Combat[] = [
 		boxers: ["carreraaa", "agustin-51"],
 		titleSize: [1920, 1012],
 		title: "Agustin 51 vs Carreraaa",
+		videoUrl: "https://www.youtube.com/watch?v=IPbkwObKdlU",
 	},
 	{
 		id: "2-guanyar-vs-la-cobra",
 		number: 2,
 		boxers: ["guanyar", "la-cobra"],
 		titleSize: [1920, 927],
 		title: "Guanyar vs La Cobra",
+		videoUrl: "https://www.youtube.com/watch?v=jdchidzFY6Y",
 	},
 	{
 		id: "3-zeling-y-nissaxter-vs-alana-y-ama-blitz",
@@ -23,13 +25,15 @@ export const COMBATS: Combat[] = [
 		teams: ["zeling-nissaxter", "alana-ama-blitz"],
 		titleSize: [1525, 1525],
 		title: "Zeling y Nissaxter vs Alana y Ama Blitz",
+		videoUrl: "https://www.youtube.com/watch?v=yF-ahJkOYyI",
 	},
 	{
 		id: "4-viruzz-vs-shelao",
 		number: 4,
 		boxers: ["viruzz", "shelao"],
 		titleSize: [1623, 1077],
 		title: "Viruzz vs Shelao",
+		videoUrl: "https://www.youtube.com/watch?v=qW2lfuM8uH4",
 	},
 	{
 		id: REY_DE_LA_PISTA_ID,
@@ -48,12 +52,14 @@ export const COMBATS: Combat[] = [
 		],
 		titleSize: [1185, 1139],
 		title: "Rey de la Pista",
+		videoUrl: "https://www.youtube.com/watch?v=m8Is6KAYIZ4",
 	},
 	{
 		id: "6-el-mariana-vs-plex",
 		number: 6,
 		boxers: ["plex", "el-mariana"],
 		titleSize: [1920, 950],
 		title: "El Mariana vs Plex",
+		videoUrl: "https://www.youtube.com/watch?v=WnryYJ0k-_0",
 	},
 ]

src/pages/combates/[id].astro

@@ -1,6 +1,7 @@
 ---
 import { Image } from "astro:assets"
 
+import Action from "@/components/Action.astro"
 import BackgroundVideo from "@/components/Combates/BackgroundVideo.astro"
 import { COMBATS, REY_DE_LA_PISTA_ID } from "@/consts/combats"
 import Layout from "@/layouts/Layout.astro"
@@ -35,7 +36,7 @@ if (!combatData) {
 	}
 }
 
-const { teams, boxers } = combatData
+const { teams, boxers, videoUrl } = combatData
 const [slug1, slug2] = teams ?? boxers
 const [image1, image2] = [
 	{ alt: slug1.replaceAll("-", " "), src: createImgRoute(combatData.number, slug1) },
@@ -102,6 +103,19 @@ export const prerender = true
 			{combatData.boxers.length <= 4 && <CombatFeatures boxerIds={combatData.boxers} />}
 		</div>
 		<Forecasts combatId={id} />
+
+		<div class="action flex w-full flex-col items-center justify-center">
+			<Action
+				class="mt-20 w-full max-w-lg text-center text-base uppercase text-primary"
+				as="a"
+				href={videoUrl}
+				target="_blank"
+				rel="noopener noreferrer"
+				aria-label={`Ver combate entre ${boxerNames.join("y ")} en el canal de Ibai`}
+			>
+				¡Ver combate!
+			</Action>
+		</div>
 	</main>
 </Layout>
 

src/sections/Forecasts.astro

@@ -1,5 +1,4 @@
 ---
-import Action from "@/components/Action.astro"
 import ForecastBoxer from "@/components/ForecastBoxer.astro"
 import Velocimetro from "@/components/Velocimetro.astro"
 import { BOXERS } from "@/consts/boxers"
@@ -41,16 +40,6 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 				/>
 			))}
 			</div>
-
-			<div class="action flex w-full flex-col items-center justify-center">
-				<Action
-					class="mt-20 w-full max-w-lg text-center text-base uppercase text-primary"
-					as="a"
-					href="/pronosticos"
-				>
-					¡Haz tu pronóstico!
-				</Action>
-			</div>
 	</section>
 }
 
@@ -86,16 +75,6 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 				boxerHref={"/boxers/alana"}
 				class:list={["boxer2"]}
 			/>
-
-		<div class="action flex w-full flex-col items-center justify-center">
-			<Action
-				class="mt-20 w-full max-w-lg text-center text-base uppercase text-primary"
-				as="a"
-				href="/pronosticos"
-			>
-				¡Haz tu pronóstico!
-			</Action>
-		</div>
 	</section>
 )}
 
@@ -132,21 +111,12 @@ const boxers = combat?.boxers.map((boxer) => BOXERS.find((b) => b.id === boxer))
 					class:list={["boxer2"]}
 				/>
 			)}
-			<div class="action flex w-full flex-col items-center justify-center">
-				<Action
-					class="mt-20 w-full max-w-lg text-center text-base uppercase text-primary"
-					as="a"
-					href="/pronosticos"
-				>
-					¡Haz tu pronóstico!
-				</Action>
-			</div>
 		</section>
 	)
 }
 
 <script>
-	import { $ } from "@/lib/dom-selector"
+	import { $ } from '@/lib/dom-selector'
 
 	document.addEventListener("astro:page-load", () => {
 		const $forecast = $("#forecast") as HTMLElement

src/types/Combat.ts

@@ -5,4 +5,5 @@ export interface Combat {
 	teams?: string[]
 	titleSize: [number, number]
 	title: string
+	videoUrl: string
 }