-Alert! ;
+Alert!
+
)
diff --git a/src/components/ui/FFD.css b/src/components/ui/FFD.css
new file mode 100644
index 0000000..0f06c73
--- /dev/null
+++ b/src/components/ui/FFD.css
@@ -0,0 +1,71 @@
+#app {
+ height: 100%;
+ }
+ html,
+ body {
+ position: relative;
+ height: 100%;
+ }
+
+ body {
+ background: #eee;
+ font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
+ font-size: 14px;
+ color: #000;
+ margin: 0;
+ padding: 0;
+ }
+
+ .swiper {
+ width: 100%;
+ height: 100%;
+ }
+
+ .swiper-slide {
+ text-align: center;
+ font-size: 18px;
+ background: #fff;
+
+ /* Center slide text vertically */
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ }
+
+ .swiper-slide img {
+ display: block;
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ }
+
+ .autoplay-progress {
+ position: absolute;
+ right: 16px;
+ bottom: 16px;
+ z-index: 10;
+ width: 48px;
+ height: 48px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-weight: bold;
+ color: var(--swiper-theme-color);
+ }
+
+ .autoplay-progress svg {
+ --progress: 0;
+ position: absolute;
+ left: 0;
+ top: 0px;
+ z-index: 10;
+ width: 100%;
+ height: 100%;
+ stroke-width: 4px;
+ stroke: var(--swiper-theme-color);
+ fill: none;
+ stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
+ stroke-dasharray: 125.6;
+ transform: rotate(-90deg);
+ }
+
\ No newline at end of file
diff --git a/src/components/ui/FacebookPage.tsx b/src/components/ui/FacebookPage.tsx
index a8b7329..9d10b3e 100644
--- a/src/components/ui/FacebookPage.tsx
+++ b/src/components/ui/FacebookPage.tsx
@@ -17,27 +17,41 @@ const RadioChilmariFacebookPage = () => {
}, []);
return (
- +
- {/* Embed Radio Chilmari Facebook Page */}
-
+
+ {/* Left Side: Text Content */}
+
+
- {/* Facebook Share Button */}
- + Our Facebook Page +
++ Stay updated all the time! Lorem ipsum dolor sit amet consectetur adipisicing elit. + Perspiciatis incidunt velit asperiores voluptate necessitatibus voluptates harum tempora atque quo. + Saepe vitae ad dicta neque voluptatibus ut officiis ducimus perspiciatis eos? +
+
+ {/* Right Side: Facebook Page Embed */}
+
);
diff --git a/src/components/ui/FacebookVideoEmbed.tsx b/src/components/ui/FacebookVideoEmbed.tsx
index c4d89f5..3b2c1e8 100644
--- a/src/components/ui/FacebookVideoEmbed.tsx
+++ b/src/components/ui/FacebookVideoEmbed.tsx
@@ -1,33 +1,21 @@
'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 (
-
+
+ {/* Facebook Share Button */}
+
+
+
- {/* Add the Facebook Embedded Video */}
-
-
-
-
+
+
);
};
diff --git a/src/components/ui/Navbar.tsx b/src/components/ui/Navbar.tsx
index ad90b66..528e258 100644
--- a/src/components/ui/Navbar.tsx
+++ b/src/components/ui/Navbar.tsx
@@ -1,31 +1,34 @@
import React from 'react';
import Image from 'next/image';
+import Link from 'next/link';
const Navbar = () => {
return (
-
+
+
+ (null);
+ const progressContent = useRef(null);
- 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);
+ useEffect(() => {
+ setBgColor(currentSlide === 1 ? 'bg-white' : 'bg-gray-100');
+ }, [currentSlide]);
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const onAutoplayTimeLeft = (swiper: any, time: number, progress: number) => {
+ if (progressCircle.current) {
+ progressCircle.current.style.setProperty('--progress', 1 - progress as never);
+ }
+ if (progressContent.current) {
+ progressContent.current.textContent = `${Math.ceil(time / 1000)}s`;
+ }
};
return (
-
{/* Centered Logo */}
);
diff --git a/src/components/ui/TopRegularProgramSlider.tsx b/src/components/ui/TopRegularProgramSlider.tsx
index c28ee96..3d20fee 100644
--- a/src/components/ui/TopRegularProgramSlider.tsx
+++ b/src/components/ui/TopRegularProgramSlider.tsx
@@ -1,28 +1,47 @@
'use client';
-import React, { useState } from 'react';
+
+import React, { useRef, useState, useEffect } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react';
import { Autoplay } from 'swiper/modules';
import 'swiper/css';
-import imageUrls from '@/contexts/TopRegularProgramSliderData';
-
-const TopRegularProgramSlider = () => {
+import Image, { StaticImageData } from 'next/image';
+import { imageK } from '@/contexts/TopRegularProgramSliderData';
+interface ImageItem {
+ id: number;
+ image: StaticImageData;
+}
+const TopRegularProgramSlider: React.FC = () => {
const [bgColor, setBgColor] = useState('bg-white');
const [currentSlide, setCurrentSlide] = useState(1);
+ const progressCircle = useRef
-
+
{/* Right Side Links */}
-
- About Us
-
-
- Our Show
-
-
- Contact Us
-
+
+ আমাদের সম্পর্কে
+
+
+ আমাদের শো
+
+
+ যোগাযোগ করুন
+
-
-
-
Current Slide: {currentSlide}
+
+ {/* Header */}
+ {
disableOnInteraction: false,
}}
onSlideChange={(swiper) => setCurrentSlide(swiper.realIndex + 1)}
+ onAutoplayTimeLeft={onAutoplayTimeLeft}
>
- {imageUrls.map((url, index) => (
-
- 
+ {imageK.map((imageItem: ImageItem) => (
+
+
-
))}
-
+ {/* Autoplay Progress */}
+
-
+
+ {/* Current Slide Indicator */}
+
);
};
diff --git a/src/contexts/TopRegularProgramSliderData.ts b/src/contexts/TopRegularProgramSliderData.ts
index 2520928..b784f84 100644
--- a/src/contexts/TopRegularProgramSliderData.ts
+++ b/src/contexts/TopRegularProgramSliderData.ts
@@ -1,17 +1,46 @@
-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",
+import img1 from "@/assets/images/top_regular_program/radiochilmari_উন্নয়ন _সংবাদ.jpg"
+import img2 from "@/assets/images/top_regular_program/radiochilmari_কবির_হাট.jpg"
+import img3 from "@/assets/images/top_regular_program/radiochilmari_টোনা_টুনির_গল্প.png"
+import img4 from "@/assets/images/top_regular_program/radiochilmari_প্রতিদিনের_লাইভ_ম্যাগাজিন_পাঁচ_ফোঁড়ন.png"
+import img5 from "@/assets/images/top_regular_program/radiochilmari_বিনোদনমুলক_লাইভ_অনুষ্ঠান_আনন্দ_আড্ডা.png"
+import img6 from "@/assets/images/top_regular_program/radiochilmari_বিনোদনমুলক_লাইভ_অনুষ্ঠান_আনন্দ_আড্ডা.png"
+import img7 from "@/assets/images/top_regular_program/radiochilmari_ভাওয়াইয়ার_অনুষ্ঠান_উত্তরের_সুর.png"
+import img8 from "@/assets/images/top_regular_program/radiochilmari_সুরের_মানিক.png"
- "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",
- "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",
+export const imageK = [
+ {
+ id: 1,
+ image: img1
+ },
+ {
+ id: 2,
+ image: img2
+ },
+ {
+ id: 3,
+ image: img3
+ },
+ {
+ id: 4,
+ image: img4
+ },
+ {
+ id: 5,
+ image: img5
+ },
+ {
+ id: 6,
+ image: img6
+ },
+ {
+ id: 7,
+ image: img7
+ },
+ {
+ id: 8,
+ image: img8
+ },
- "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;
\ No newline at end of file
+ ]
+
+
+ {/* Swiper Slider */}
+ নিয়মিত প্রোগ্রাম সমূহ +
+
+
+
+
+
+ Item {currentSlide}
+
+