Add combat video for every one

src/consts/combats.ts

@@ -8,13 +8,15 @@ export const COMBATS: Combat[] = [
 		boxers: ["carreraaa", "agustin-51"],
 		titleSize: [1920, 1012],
 		title: "Agustin 51 vs Carreraaa",
+		video: "IPbkwObKdlU",
 	},
 	{
 		id: "2-guanyar-vs-la-cobra",
 		number: 2,
 		boxers: ["guanyar", "la-cobra"],
 		titleSize: [1920, 927],
 		title: "Guanyar vs La Cobra",
+		video: "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",
+		video: "yF-ahJkOYyI",
 	},
 	{
 		id: "4-viruzz-vs-shelao",
 		number: 4,
 		boxers: ["viruzz", "shelao"],
 		titleSize: [1623, 1077],
 		title: "Viruzz vs Shelao",
+		video: "qW2lfuM8uH4",
 	},
 	{
 		id: REY_DE_LA_PISTA_ID,
@@ -48,12 +52,14 @@ export const COMBATS: Combat[] = [
 		],
 		titleSize: [1185, 1139],
 		title: "Rey de la Pista",
+		video: "m8Is6KAYIZ4",
 	},
 	{
 		id: "6-el-mariana-vs-plex",
 		number: 6,
 		boxers: ["plex", "el-mariana"],
 		titleSize: [1920, 950],
 		title: "El Mariana vs Plex",
+		video: "WnryYJ0k-_0",
 	},
 ]

src/pages/combates/[id].astro

@@ -5,6 +5,7 @@ import BackgroundVideo from "@/components/Combates/BackgroundVideo.astro"
 import { COMBATS, REY_DE_LA_PISTA_ID } from "@/consts/combats"
 import Layout from "@/layouts/Layout.astro"
 import CombatFeatures from "@/sections/CombatFeatures.astro"
+import CombatVideo from "@/sections/CombatVideo.astro"
 import Forecasts from "@/sections/Forecasts.astro"
 
 const getCombatById = (id: string) => {
@@ -98,6 +99,7 @@ export const prerender = true
 				)
 			}
 		</div>
+		<CombatVideo combatId={id} />
 		<div class="pointer-events-auto">
 			{combatData.boxers.length <= 4 && <CombatFeatures boxerIds={combatData.boxers} />}
 		</div>

src/sections/CombatVideo.astro

@@ -0,0 +1,40 @@
+---
+import DrawnXLogo from "@/components/DrawnXLogo.astro"
+import LiteYouTube from "@/components/LiteYouTube.astro"
+import Typography from "@/components/Typography.astro"
+import { COMBATS } from "@/consts/combats"
+
+const { combatId } = Astro.props
+
+const combat = COMBATS.find((combat) => combat.id === combatId)
+
+if (!combat) return null
+
+const { title, video } = combat
+---
+
+<section class="mt-10 overflow-hidden px-2 pb-48 pt-16 sm:pb-56 sm:pt-32 md:pt-32">
+	<Typography as="h3" variant="h3" color="white" class:list={"text-center"}>
+		¡Revive el combate!
+	</Typography>
+
+	<Typography
+		as="p"
+		variant="body"
+		color="neutral"
+		class:list={"mx-auto mt-4 max-w-[250px] text-wrap text-center"}
+	>
+		Vuelve a ver el combate {title}
+	</Typography>
+
+	<div class="relative mt-8">
+		<DrawnXLogo
+			class:list={"absolute inset-0 -z-10 m-auto scale-125 select-none drop-shadow-[0_0_40px_rgba(213,255,0,1)]"}
+		/>
+		<LiteYouTube
+			videoId={video}
+			backgroundImage={`/img/combats/${combatId}.webp`}
+			title="Reproducir presentación de La Velada del Año"
+		/>
+	</div>
+</section>

src/types/Combat.ts

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