Merge pull request #11 from 1xINTERNET/11-videos

#11: Videos

package.json

@@ -14,6 +14,7 @@
     "@astrojs/check": "^0.7.0",
     "@astrojs/tailwind": "^5.1.0",
     "astro": "^4.10.1",
+    "tailwind-scrollbar-hide": "^1.1.7",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.4.5"
   },

src/assets/icons/IconChevronRight.astro

@@ -0,0 +1,12 @@
+---
+
+---
+
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+  <path
+    fill="none"
+    stroke="#54F400"
+    stroke-linecap="round"
+    stroke-width="3"
+    d="m7.6 2.52 8.34 8.34a1.6 1.6 0 0 1 0 2.24L7.6 21.44"></path>
+</svg>

src/components/Section.astro

@@ -20,9 +20,13 @@ const { backgroundColor, backgroundImage, eyebrow, heading, links } =
   class={`bg-${backgroundImage ? `[url('${backgroundImage}')]` : backgroundColor} bg-cover p-6 sm:p-12`}
 >
   <div
-    class={`container flex flex-col gap-6 sm:gap-12 items-center justify-center mx-auto ${backgroundImage ? "text-light-lilac" : backgroundColor === "green" ? "text-blue" : "text-green"}`}
+    class={`container flex flex-col gap-6 sm:gap-12 items-center justify-center mx-auto ${backgroundImage ? "text-light-lilac" : backgroundColor === "green" ? "text-blue" : "text-white"}`}
   >
-    <div class="uppercase font-bold text-sm tracking-[3px]">{eyebrow}</div>
+    <div
+      class=`uppercase font-bold text-sm ${backgroundColor === "green" ? "text-blue" : "text-green"} tracking-[3px]`
+    >
+      {eyebrow}
+    </div>
     <div class="text-3xl sm:text-5xl text-center">{heading}</div>
     <slot />
     {

src/components/VideoPlayer.astro

@@ -0,0 +1,37 @@
+---
+import IconChevronRight from "@icons/IconChevronRight.astro";
+---
+
+<iframe class="w-full" src="https://www.youtube.com/embed/LyVeknDDQCw"></iframe>
+<div>
+  <div class="flex gap-3 items-center mb-3">
+    <span>More videos</span>
+    <div class="w-3 h-3">
+      <IconChevronRight />
+    </div>
+  </div>
+  <div class="relative">
+    <div class="flex gap-3 overflow-x-scroll relative scrollbar-hide">
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/Fxb9bgPpnys"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/x2fNlaTvd60"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/wFAazFeFgOY"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/QNXl7RAOevI"></iframe>
+      <iframe
+        class="w-4/5 sm:w-2/5"
+        src="https://www.youtube.com/embed/i4Ap6hCtyug"></iframe>
+      <div class="min-w-[40%] min-h-full"></div>
+    </div>
+    <div
+      class="absolute bg-gradient-to-r from-transparent to-blue h-full ml-auto top-0 right-0 w-2/12 sm:w-1/5"
+    >
+    </div>
+  </div>
+</div>

src/pages/index.astro

@@ -2,6 +2,7 @@
 import Layout from "@layouts/Layout.astro";
 import "@styles/global.css";
 import Section from "../components/Section.astro";
+import VideoPlayer from "../components/VideoPlayer.astro";
 ---
 
 <Layout title="Welcome to Whyuluvfootball">
@@ -17,4 +18,11 @@ import Section from "../components/Section.astro";
       },
     ]}
   />
+  <Section
+    backgroundColor="blue"
+    eyebrow="Videos"
+    heading="I love football because..."
+  >
+    <VideoPlayer />
+  </Section>
 </Layout>

src/styles/global.css

@@ -57,4 +57,8 @@
   p {
     @apply text-[18px] leading-6;
   }
+
+  iframe {
+    @apply aspect-video;
+  }
 }

tailwind.config.mjs

@@ -22,7 +22,9 @@ export default {
       }
     },
   },
-  plugins: [],
+  plugins: [
+    require('tailwind-scrollbar-hide')
+  ],
   safelist: [
     'bg-blue',
     'bg-green',