fix : change background image

18K-Radio · Nov 24, 2024 · 721dc0d · 721dc0d
1 parent e7be24e
commit 721dc0d
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 37 deletions.
diff --git a/next.config.ts b/next.config.ts
@@ -2,8 +2,8 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
-  basePath: "/18k-radio.github.io",
-  output: "export",
+  // basePath: "/18k-radio.github.io",
+  // output: "export",
   reactStrictMode: true,
   images: {
     remotePatterns: [

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -1,9 +1,3 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
-
-@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
-
-*{
-    font-family: 'Kanit', sans-serif;
-}
+@tailwind utilities;
diff --git a/src/app/history/loading.tsx b/src/app/history/loading.tsx
@@ -0,0 +1,4 @@
+export default function Loading() {
+    // Or a custom loading skeleton component
+    return <p>Loading...</p>
+}
diff --git a/src/app/history/page.tsx b/src/app/history/page.tsx
@@ -9,11 +9,13 @@ export default function History() {
     const [data, setData] = useState<Data18kRadio>();
     const [loading, setLoading] = useState<boolean>(true);
     const [dataLogo, setDataLogo] = useState<string>();
+    const [currentBackground, setCurrentBackground] = useState<string>("");
 
     const GetData = async () => {
         const response = await fetchData();
         setData(response);
         setDataLogo(response.images[0].logo);
+        setCurrentBackground(response.images[0].cover || '');
         setLoading(false);
     }
 
@@ -22,6 +24,7 @@ export default function History() {
         console.log(target.textContent);
         if (!data) return;
         setDataLogo(data.images.filter((image: ImageData) => image.year === target.textContent)[0].logo);
+        setCurrentBackground(data.images.filter((image: ImageData) => image.year === target.textContent)[0].cover || '');
     }
 
     useEffect(() => {
@@ -33,35 +36,67 @@ export default function History() {
     }
     return (
 
-        <div className="flex items-center justify-center">
-            <div className='flex flex-col items-center justify-center gap-4 mt-10 sm:mt-2 max-w-screen-md'>
-                <h1 className="text-4xl text-center tracking-wide p-2 font-bold">History</h1>
+        <div
+            className="relative h-screen w-full flex items-center justify-center bg-cover bg-center"
+            style={{
+                backgroundImage: `url('${currentBackground}')`,
+            }}>
+            {/* พื้นหลังแบบเบลอ */}
+            <div className="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
+
+            {/* คอนเทนต์หลัก */}
+            <div className="relative flex flex-col items-center justify-center gap-4 mt-10 sm:mt-2 max-w-screen-md">
+                <h1 className="text-4xl text-center tracking-wide p-2 font-bold text-white">History</h1>
                 <div className="card shadow-md w-1/6 rounded-full">
-                    {!loading ? <Image
-                        src={dataLogo || ''}
-                        alt="Logo"  // Ensure alt text is provided for accessibility
-                        className="w-full rounded-full"
-                        width={500}   // Adjust the width to your preference
-                        height={500}  // Adjust the height to your preference
-                    /> : <span className="loading loading-ball loading-md"></span>}
+                    {!loading ? (
+                        <Image
+                            src={dataLogo || ''}
+                            alt="Logo"
+                            className="w-full rounded-full"
+                            width={500}
+                            height={500}
+                        />
+                    ) : (
+                        <span className="loading loading-ball loading-md"></span>
+                    )}
                 </div>
                 <div>
+                    {/* Carousel */}
                     <div className="carousel w-full">
-                        {!loading && data.images?.map((image: ImageData, index: number) => (
-                            image.cover && <div key={index} id={`image-${index + 1}`} className="carousel-item w-full">
-                                <Image src={image.cover || ''} alt='Cover' loading={"lazy"} width={500} height={100}
-                                     className="w-full rounded-xl" />
-                            </div>
-                        ))}
+                        {!loading &&
+                            data.images?.map((image: ImageData, index: number) => (
+                                image.cover && (
+                                    <div key={index} id={`image-${index + 1}`} className="carousel-item w-full">
+                                        <Image
+                                            src={image.cover || ''}
+                                            alt="Cover"
+                                            loading="lazy"
+                                            width={500}
+                                            height={100}
+                                            className="w-full rounded-xl"
+                                        />
+                                    </div>
+                                )
+                            ))}
                     </div>
-                    <div className="flex w-full justify-center gap-2 py-2">
-                        {!loading && data.images?.map((image: ImageData, index: number) => (
-                            image.cover && <a key={index} href={`#image-${index + 1}`} className="btn btn-xs" onClick={handleSwitch}>{image.year}</a>
-                        ))}
+                    <div className="flex w-full justify-center gap-2 py-5">
+                        {!loading &&
+                            data.images?.map((image: ImageData, index: number) => (
+                                image.cover && (
+                                    <a
+                                        key={index}
+                                        href={`#image-${index + 1}`}
+                                        className="btn btn-neutral btn-xs md:btn-sm"
+                                        onClick={handleSwitch}
+                                    >
+                                        {image.year}
+                                    </a>
+                                )
+                            ))}
                     </div>
                 </div>
-
             </div>
         </div>
+
     )
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,24 +1,26 @@
 import type { Metadata } from "next";
 import "./globals.css";
 import Navbar from "./components/Navbar";
-import Head from "next/head";
+import { Kanit } from 'next/font/google'
 
 export const metadata: Metadata = {
   title: "18K",
-  description: "About 18K Radio",
+  description: "About 18K Radio and its history.",
+  icons: {
+    icon: "/images/apple-touch-icon.png",
+  }
 };
 
+const kanit = Kanit({ subsets: ['latin'], weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'] })
+
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
   return (
     <html lang="en" suppressHydrationWarning={true}>
-      <Head>
-        <link href="images/apple-touch-icon.png" rel="icon" type="image/png" />
-      </Head>
-      <body>
+      <body className={kanit.className}>
         <Navbar />
         {children}
       </body>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -36,7 +36,7 @@ const Page = () => {
                 <div className='flex flex-col justify-center items-center'>
                     <figure className=' w-full sm:w-2/3'>
                         <h1 className="text-3xl text-left tracking-wide p-2 font-bold">ประวัติ</h1>
-                        <p className="p-2">{!loading ? data.lang?.th?.story : <span className="loading loading-ball loading-md"></span>}</p>
+                        <p className="p-4 bg-base-200 rounded-xl">{!loading ? data.lang?.th?.story : <span className="loading loading-ball loading-md"></span>}</p>
                     </figure>
                 </div>
             </div>

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -15,4 +15,7 @@ export default {
     },
   },
   plugins: [require('daisyui')],
+  daisyui: {
+    themes: ["light"],
+  }
 } satisfies Config;