YouTube component style.

Author: nikoshell

src/components/highlight-list/highlight-card.astro

@@ -1,4 +1,4 @@
-<div class="rounded-lg shadow-md p-5">
+<div class="bg-white rounded-lg shadow-md p-5 mt-6">
   <ul class="space-y-2">
     <slot />
   </ul>

src/components/sections/speakers.astro

@@ -22,7 +22,7 @@ const sectionSubtitle = "Meet some of our amazing speakers";
 
 ---
 
-<Section class="py-16 px-4 bg-gray-50">
+<Section>
   <div class="container mx-auto">
     <div class="text-center mb-12">
       <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">{sectionTitle}</h2>

src/components/ui/YouTube.astro

@@ -0,0 +1,13 @@
+---
+import { YouTube } from "@astro-community/astro-embed-youtube";
+
+const {
+  class: userClass = '',
+  ...attrs
+} = Astro.props;
+
+const defaultClass = 'border-4 border-white rounded-lg shadow-lg';
+const className = `${defaultClass} ${userClass}`.trim();
+---
+
+<YouTube class={className} {...attrs} />

src/pages/[...slug].astro

@@ -2,12 +2,11 @@
 import { type CollectionEntry, getCollection } from "astro:content";
 import Layout from "@layouts/MarkdownLayout.astro";
 
-import Prose from "../components/prose/prose.astro";
 import ButtonLink from "../components/button-link/button-link.astro";
 import { Separator } from "../components/separator/separator";
 import { Map } from "../components/map";
 import { MapSprints } from "../components//map-for-sprints";
-import { YouTube } from "@astro-community/astro-embed-youtube";
+import YouTube from "@ui/YouTube.astro";
 import BenefitsList from "../components/benefits-list/benefits-list.astro";
 import BenefitItem from "../components/benefits-list/benefit-item.astro";
 import HighlightCard from "../components/highlight-list/highlight-card.astro";