Merge pull request #52 from juanpablo-is/master

Add Twitch embed channel
Afordin · Jul 21, 2023 · da9ab08 · da9ab08
2 parents a91f263 + d5d9a9a
commit da9ab08
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 15 deletions.
diff --git a/src/components/SectionTimer.tsx b/src/components/SectionTimer.tsx
@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import { calculateDifference } from '../utils/calculateTimeLeft'
+import Countdown from './Countdown.jsx'
+
+const SectionTimer = () => {
+    const timeLeft = useMemo(
+        () => calculateDifference('2023-07-21T20:00:00+02:00'), []
+    )
+
+    return (
+        timeLeft > 0 ?
+            <section
+                className='py-16 flex flex-col text-center gap-[3rem]'
+                id='countdown'
+            >
+                <h3 className='text-gray-400 text-2xl'>Quedan</h3>
+                <Countdown date='2023-07-21T20:00:00+02:00' />
+                <h3 className='text-gray-400 text-2xl'>
+                    Para el <span className='font-bold'>AforShow</span>
+                </h3>
+            </section>
+        :
+        <iframe src="https://player.twitch.tv/?channel=afor_digital&parent=afor.show" height="378" width="620" className='m-auto'></iframe>
+    )
+}
+
+export default SectionTimer
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import Countdown from '../components/Countdown.jsx'
+import SectionTimer from '../components/SectionTimer.jsx'
 import Header from '../components/Header.astro'
 import Ticket from '../components/Ticket/Ticket'
 import Faq from '../components/Faq.jsx'
@@ -51,19 +51,7 @@ const ogTitle =
     >
         <Header />
         <main>
-            <section
-                class="py-16 flex flex-col text-center gap-[3rem]"
-                id="countdown"
-            >
-                <h3 class="text-gray-400 text-2xl">Quedan</h3>
-                <Countdown
-                    client:only="react"
-                    date="2023-07-21T20:00:00+02:00"
-                />
-                <h3 class="text-gray-400 text-2xl">
-                    Para el <span class="font-bold">AforShow</span>
-                </h3>
-            </section>
+            <SectionTimer client:only="react" />
             <Schedule />
             <Ticket client:load />
             <Faq client:only="react" />

diff --git a/src/utils/calculateTimeLeft.js b/src/utils/calculateTimeLeft.js
@@ -1,6 +1,6 @@
 import { getLocalTime } from './getLocalTime'
 
-export function calculateTimeLeft(time) {
+export function calculateTimeLeft (time) {
     const { fulltime } = getLocalTime(time)
     const difference = new Date(fulltime) - new Date()
 
@@ -37,3 +37,8 @@ export function calculateTimeLeft(time) {
 
     return timeLeft
 }
+
+export function calculateDifference (time) {
+    const { fulltime } = getLocalTime(time)
+    return new Date(fulltime) - new Date()
+}