diff --git a/app/electronicorgan/page.tsx b/app/electronicorgan/page.tsx new file mode 100644 index 0000000..fbbcc14 --- /dev/null +++ b/app/electronicorgan/page.tsx @@ -0,0 +1,41 @@ +import React from 'react' +import ResponsiveNav from "@/components/Navbar/ResponsiveNav"; +import { fetchCourses, fetchSettings, fetchOrgan } from "@/utils"; +import {OrganProps } from "@/types"; +import Home from '@/components/Organ/Home'; + +async function getCourses() { + const courses = await fetchCourses(); + return courses; +} + +async function getOrgan() { + const organ: OrganProps[] = await fetchOrgan(); + return organ; +} + +async function getSettings() { + const settings = await fetchSettings(); + return settings; +} + +export const metadata = { + title: "All In One", + description: "**", +} + +export default async function Page() { + const courses = await getCourses(); + const settings = await getSettings(); + const organ = await getOrgan(); + //const course = await getCourse(params.slug); + + return ( +
+ + + + +
+ ) +} \ No newline at end of file diff --git a/components/Navbar/MobileNav.tsx b/components/Navbar/MobileNav.tsx index 0affa7a..eb6c5eb 100644 --- a/components/Navbar/MobileNav.tsx +++ b/components/Navbar/MobileNav.tsx @@ -65,9 +65,16 @@ const MobileNav = ({ showNav, courses }: Props) => { )} +
+ +

+ 電子管風琴 +

+ +
- +

關於我們

diff --git a/components/Navbar/Nav.tsx b/components/Navbar/Nav.tsx index a692fdd..3e38add 100644 --- a/components/Navbar/Nav.tsx +++ b/components/Navbar/Nav.tsx @@ -65,7 +65,12 @@ const Nav = ({ openNav, courses, showNav, settings }: Props) => {
)} - + +

+ {"電子管風琴"} +

+ +

{"關於我們"}

diff --git a/components/Organ/AboutusContent.tsx b/components/Organ/AboutusContent.tsx new file mode 100644 index 0000000..b387d79 --- /dev/null +++ b/components/Organ/AboutusContent.tsx @@ -0,0 +1,102 @@ +import React from 'react' +import { OrganProps } from '@/types' +const AboutusContent = ({ organ }: { organ: OrganProps[] }) => { + return ( +
+ { + organ.map((item, index) => { + const isEven = index % 2 === 0; + return ( +
+
+ {isEven ? ( +
+
+ Course Image +
+
+
+

+ {item.title} +

+ {/*

+ {item.description} +

*/} +
+ +
+
+
+ ) : ( +
+
+
+

+ {item.title} +

+ {/*

+ {item.description} +

*/} +
+ +
+
+
+ Course Image +
+
+ + )} + +
+
+
+ Course Image +
+
+

+ {item.title} +

+ {/*

+ {item.description} +

*/} +
+ +
+ +
+
+ ) + }) + } + + +
+ ) +} + +export default AboutusContent diff --git a/components/Organ/Banner.tsx b/components/Organ/Banner.tsx new file mode 100644 index 0000000..5aa8433 --- /dev/null +++ b/components/Organ/Banner.tsx @@ -0,0 +1,28 @@ +import React from 'react' + +const Banner = () => { + + return ( +
+ + +
+

+ {"電子管風琴"} +

+ +
+ {/*
*/} +
+ piano1 +
+
+ +
+ ) +} +export default Banner diff --git a/components/Organ/Home.tsx b/components/Organ/Home.tsx new file mode 100644 index 0000000..0016468 --- /dev/null +++ b/components/Organ/Home.tsx @@ -0,0 +1,47 @@ +"use client"; + +import { useState, useEffect, Suspense } from "react"; +import Loading from '../Loading' +import Footer from '../Footer' +import ContactForm from "../ContactForm"; +import AboutusContent from "./AboutusContent"; +import Banner from "./Banner"; +import Map from "./Map"; +import { SettingsProps, OrganProps } from "@/types"; + +const Home = ({ settings, organ }: { settings: SettingsProps, organ: OrganProps[] }) => { + const [loading, setLoading] = useState(true); + // const [courses, setCourses] = useState([]); + + useEffect(() => { + const loadCourses = async () => { + setLoading(true); + await new Promise(resolve => setTimeout(resolve, 300)); // 0.5 second delay + setLoading(false); + }; loadCourses(); + }, []); + + const startLoading = () => setLoading(true); + const stopLoading = () => setLoading(false); + + return ( +
+ {loading ? ( +
+ Loading...
}> + + +
+ ) : ( +
+ + + {/* */} + +
+
+ )} +
+ ) +} +export default Home \ No newline at end of file diff --git a/components/Organ/Map.tsx b/components/Organ/Map.tsx new file mode 100644 index 0000000..01e4e11 --- /dev/null +++ b/components/Organ/Map.tsx @@ -0,0 +1,97 @@ +"use client" +import React,{useEffect} from 'react' +import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api'; +import Loading from '../Loading' +import Link from 'next/link' +import { SettingsProps } from '@/types'; +import { HiLocationMarker } from "react-icons/hi"; +import { MdEmail } from "react-icons/md"; +import { FaPhone } from "react-icons/fa6"; +import mailgo from "mailgo"; +const containerStyle = { + width: '100%', + height: '100%' +}; +const Map = ({ settings }: { settings: SettingsProps }) => { + const center = { + lat: settings.latitude, + lng: settings.longitude, + }; + + useEffect(() => { + mailgo(); + }, []); + + return ( +
+
+ }> + + + + +
+
+
+
+
+ +
+ +
+

+ {"地址"} +

+ +
+ +
+
+
+ +
+
+

+ {"電郵"} +

+ +

+ {settings.email} +

+ +
+ +
+
+ +
+ +
+
+

+ {"電話"} +

+ +

+ {settings.phone} +

+ +
+ +
+
+
+
+ ) +} + +export default Map diff --git a/types/index.ts b/types/index.ts index 0a574b5..1a1700d 100644 --- a/types/index.ts +++ b/types/index.ts @@ -25,6 +25,14 @@ export interface AboutusProps { index: number; } +export interface OrganProps { + id: string; + title: string; + description: string + image: string; + index: number; +} + export interface MessageProps { name: string, phone: string, diff --git a/utils/index.ts b/utils/index.ts index f540be1..bd86b3b 100644 --- a/utils/index.ts +++ b/utils/index.ts @@ -1,5 +1,5 @@ -import { CoursesProps, CoursesArrayProps, SettingsProps, MessageProps, AboutusProps } from "@/types"; +import { CoursesProps, CoursesArrayProps, SettingsProps, MessageProps, AboutusProps, OrganProps } from "@/types"; @@ -37,6 +37,28 @@ export async function postMessage(data: MessageProps) { } } +export async function fetchOrgan() { + const headers: HeadersInit = { + accept: "application/json" + }; + const url = `${process.env.NEXT_PUBLIC_API_URL}organ/`; + + try { + const response = await fetch(url, { headers }); + + const result = await response.json(); + + // Sort the result by index + const sortedResult: OrganProps[] = result.data.sort((a: any, b: any) => a.index - b.index); + + return sortedResult; + } + catch (error) { + console.error('Fetch error:', error); + throw error; + } +} + export async function fetchAboutus() { const headers: HeadersInit = { accept: "application/json"