RadioChilmariFacebookPage add

zbjs · Nov 20, 2024 · c35f366 · c35f366
1 parent f73d852
commit c35f366
Show file tree

Hide file tree

Showing 5 changed files with 135 additions and 41 deletions.
diff --git a/src/components/pages/home/Home.tsx b/src/components/pages/home/Home.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import { Alert } from "flowbite-react";
 import TopRegularProgramSlider from '@/components/ui/TopRegularProgramSlider';
+import FacebookVideoEmbed from '@/components/ui/FacebookVideoEmbed';
+import RadioChilmariFacebookPage from '@/components/ui/FacebookPage';
 
 
 
@@ -12,6 +14,10 @@ const Home = () => {
 
 <TopRegularProgramSlider />
 
+<FacebookVideoEmbed />
+
+<RadioChilmariFacebookPage />
+
 
     </div>
   )

diff --git a/src/components/ui/FacebookPage.tsx b/src/components/ui/FacebookPage.tsx
@@ -0,0 +1,46 @@
+'use client';
+
+import { useEffect } from 'react';
+
+const RadioChilmariFacebookPage = () => {
+  useEffect(() => {
+    // Load the Facebook SDK
+    if (!document.getElementById('facebook-jssdk')) {
+      const script = document.createElement('script');
+      script.id = 'facebook-jssdk';
+      script.async = true;
+      script.defer = true;
+      script.crossOrigin = 'anonymous';
+      script.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0';
+      document.body.appendChild(script);
+    }
+  }, []);
+
+  return (
+    <div>
+      {/* Embed Radio Chilmari Facebook Page */}
+      <div
+        className="fb-page"
+        data-href="https://www.facebook.com/radiochilmari"
+        data-tabs="timeline"
+        data-width="500"
+        data-height="600"
+        data-small-header="false"
+        data-adapt-container-width="true"
+        data-hide-cover="false"
+        data-show-facepile="true"
+      ></div>
+
+      {/* Facebook Share Button */}
+      <div className="mt-4">
+        <div
+          className="fb-share-button"
+          data-href="https://www.facebook.com/radiochilmari"
+          data-layout="button"
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export default RadioChilmariFacebookPage;
diff --git a/src/components/ui/FacebookVideoEmbed.tsx b/src/components/ui/FacebookVideoEmbed.tsx
@@ -0,0 +1,35 @@
+'use client';
+
+import { useEffect } from 'react';
+
+const FacebookVideoEmbed = () => {
+  useEffect(() => {
+    // Load the Facebook SDK
+    if (!document.getElementById('facebook-jssdk')) {
+      const script = document.createElement('script');
+      script.id = 'facebook-jssdk';
+      script.async = true;
+      script.defer = true;
+      script.crossOrigin = 'anonymous';
+      script.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v17.0';
+      document.body.appendChild(script);
+    }
+  }, []);
+
+  return (
+    <div>
+      {/* Add the Facebook Embedded Video */}
+      <div
+        className="fb-video"
+        data-href="https://www.facebook.com/facebook/videos/10153231379946729/"
+        data-width="500"
+        data-show-text="false"
+      ></div>
+
+
+<iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fradiochilmari%2Fvideos%2F3470305789941801%2F&show_text=false&width=560&t=0" width="560" height="314" style={{border:"none",overflow:"hidden"}} scrolling="no"  allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" ></iframe>
+    </div>
+  );
+};
+
+export default FacebookVideoEmbed;
diff --git a/src/components/ui/TopRegularProgramSlider.tsx b/src/components/ui/TopRegularProgramSlider.tsx
@@ -1,53 +1,54 @@
 'use client';
-import React from 'react';
+import React, { useState } from 'react';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import { Autoplay } from 'swiper/modules';
 import 'swiper/css';
+import imageUrls from '@/contexts/TopRegularProgramSliderData';
 
 const TopRegularProgramSlider = () => {
+
+
+  const [bgColor, setBgColor] = useState('bg-white');
+  const [currentSlide, setCurrentSlide] = useState(1);
+
+  const handleBgColorChange = () => {
+    const colors = ['bg-white', 'bg-gray-100', 'bg-blue-50', 'bg-yellow-50'];
+    const nextColor = colors[(colors.indexOf(bgColor) + 1) % colors.length];
+    setBgColor(nextColor);
+  };
+
   return (
-    <div className="relative">
-     <div>
-     <Swiper
+    <div className={`relative ${bgColor}`}>
+      <div className="absolute  flex items-center space-x-4">
+        <button onClick={handleBgColorChange}>Change Color</button>
+        <div>Current Slide: {currentSlide}</div>
+      </div>
+      <Swiper
         spaceBetween={50}
         slidesPerView={1}
         loop={true}
+        modules={[Autoplay]}
         autoplay={{
           delay: 3000,
           disableOnInteraction: false,
         }}
+        onSlideChange={(swiper) => setCurrentSlide(swiper.realIndex + 1)}
       >
-        {/* Slider 1 */}
-        <SwiperSlide>
-          <img
-            src="https://github.com/zbjs/radiochilmari/blob/dev/src/assets/images/top_regular_program/radiochilmari_%E0%A6%89%E0%A6%A8%E0%A7%8D%E0%A6%A8%E0%A7%9F%E0%A6%A8%20%E0%A6%B8%E0%A6%82%E0%A6%AC%E0%A6%BE%E0%A6%A6.jpg?raw=true"
-            alt="Image 1"
-            className="w-full h-auto object-cover"
-          />
-        </SwiperSlide>
+        {imageUrls.map((url, index) => (
+          <SwiperSlide key={index}>
+            <img
+              src={url}
+              alt={`Image ${index + 1}`}
+              className="w-full h-auto object-cover"
+            />
+          </SwiperSlide>
+
+        ))}
 
-        {/* Slider 2 */}
-        <SwiperSlide>
-          <img
-            src="https://github.com/zbjs/radiochilmari/blob/dev/src/assets/images/top_regular_program/radiochilmari_%E0%A6%95%E0%A6%AC%E0%A6%BF%E0%A6%B0%20%E0%A6%B9%E0%A6%BE%E0%A6%9F.jpg?raw=true"
-            alt="Image 2"
-            className="w-full h-auto object-cover"
-          />
-        </SwiperSlide>
-
-        {/* Slider 3 */}
-        <SwiperSlide>
-          <img
-            src="/images/slide3.jpg"
-            alt="Image 3"
-            className="w-full h-auto object-cover"
-          />
-        </SwiperSlide>
       </Swiper>
-     </div>
+
     </div>
   );
 };
 
 export default TopRegularProgramSlider;
-
-
diff --git a/src/contexts/TopRegularProgramSliderData.ts b/src/contexts/TopRegularProgramSliderData.ts
@@ -1,11 +1,17 @@
-import image1 from '../assets/images/top_regular_program/radiochilmari_উন্নয়ন সংবাদ.jpg'
+const imageUrls = [
+    "https://github.com/zbjs/radiochilmari/blob/dev/src/assets/images/top_regular_program/radiochilmari_%E0%A6%89%E0%A6%A8%E0%A7%8D%E0%A6%A8%E0%A7%9F%E0%A6%A8%20%E0%A6%B8%E0%A6%82%E0%A6%AC%E0%A6%BE%E0%A6%A6.jpg?raw=true",
 
+    "https://github.com/zbjs/radiochilmari/blob/dev/src/assets/images/top_regular_program/radiochilmari_%E0%A6%95%E0%A6%AC%E0%A6%BF%E0%A6%B0%20%E0%A6%B9%E0%A6%BE%E0%A6%9F.jpg?raw=true",
 
-export const TopRegularProgramSliderData = [
-    {
-        image: image1,
-        title: "উন্নয়ন সংবাদ",
-        description: "উন্নয়ন সংবাদ",
-        link: "#",
-    },
-]
+    "https://github.com/zbjs/radiochilmari/blob/dev/src/assets/images/top_regular_program/radiochilmari_%E0%A6%9F%E0%A7%8B%E0%A6%A8%E0%A6%BE%20%E0%A6%9F%E0%A7%81%E0%A6%A8%E0%A6%BF%E0%A6%B0%20%E0%A6%97%E0%A6%B2%E0%A7%8D%E0%A6%AA.png?raw=true",
+
+    "https://github.com/zbjs/radiochilmari/blob/dev/src/assets/images/top_regular_program/radiochilmari_%E0%A6%AA%E0%A7%8D%E0%A6%B0%E0%A6%A4%E0%A6%BF%E0%A6%A6%E0%A6%BF%E0%A6%A8%E0%A7%87%E0%A6%B0%20%E0%A6%B2%E0%A6%BE%E0%A6%87%E0%A6%AD%20%E0%A6%AE%E0%A7%8D%E0%A6%AF%E0%A6%BE%E0%A6%97%E0%A6%BE%E0%A6%9C%E0%A6%BF%E0%A6%A8%20%E2%80%98%E0%A6%AA%E0%A6%BE%E0%A6%81%E0%A6%9A%20%E0%A6%AB%E0%A7%87%E0%A6%BE%E0%A6%81%E0%A7%9C%E0%A6%A8%E2%80%99.png?raw=true",
+
+    "https://github.com/zbjs/radiochilmari/blob/dev/src/assets/images/top_regular_program/radiochilmari_%E0%A6%AC%E0%A6%BF%E0%A6%A8%E0%A7%8B%E0%A6%A6%E0%A6%A8%E0%A6%AE%E0%A7%81%E0%A6%B2%E0%A6%95%20%E0%A6%B2%E0%A6%BE%E0%A6%87%E0%A6%AD%20%E0%A6%85%E0%A6%A8%E0%A7%81%E0%A6%B7%E0%A7%8D%E0%A6%A0%E0%A6%BE%E0%A6%A8%20%E2%80%98%E0%A6%86%E0%A6%A8%E0%A6%A8%E0%A7%8D%E0%A6%A6%20%E0%A6%86%E0%A6%A1%E0%A7%8D%E0%A6%A1%E0%A6%BE%E2%80%99.png?raw=true",
+
+    "https://github.com/zbjs/radiochilmari/blob/dev/src/assets/images/top_regular_program/radiochilmari_%E0%A6%AD%E0%A6%BE%E0%A6%93%E0%A7%9F%E0%A6%BE%E0%A6%87%E0%A7%9F%E0%A6%BE%E0%A6%B0%20%E0%A6%85%E0%A6%A8%E0%A7%81%E0%A6%B7%E0%A7%8D%E0%A6%A0%E0%A6%BE%E0%A6%A8%20%E2%80%98%E0%A6%89%E0%A6%A4%E0%A7%8D%E0%A6%A4%E0%A6%B0%E0%A7%87%E0%A6%B0%20%E0%A6%B8%E0%A7%81%E0%A6%B0%E2%80%99.png?raw=true",
+
+    "https://github.com/zbjs/radiochilmari/blob/dev/src/assets/images/top_regular_program/radiochilmari_%E0%A6%B8%E0%A7%81%E0%A6%B0%E0%A7%87%E0%A6%B0%20%E0%A6%AE%E0%A6%BE%E0%A6%A8%E0%A6%BF%E0%A6%95.png?raw=true"
+  ];
+
+  export default imageUrls;