all_in_one/frondend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

updated

Browse Source
This commit is contained in:
Philip Cheung
2024-10-08 19:08:37 +08:00
parent b844c2a509
commit 98c1a28dfb
29 changed files with 156 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
components/Aboutus/AboutusContent.tsx
View File

@@ -75,7 +75,7 @@ const AboutusContent = ({ aboutus }: { aboutus: AboutusProps[] }) => {
/>
</div>
<div className="relative flex flex-col lg:mt-0 mt-8">
<p className="lg:text-4xl text-3xl">
<p className="lg:text-4xl text-2xl">
{item.title}
</p>
{/* <p className="text-base overflow-hidden mt-8">

2
components/Aboutus/Banner.tsx
View File

@@ -7,7 +7,7 @@ const Banner = () => {
<div className='flex-col flex lg:ml-48 ml-4 z-10'>
<p className='text-black lg:text-5xl text-3xl font-bold text-center'>
<p className='text-black lg:text-5xl text-2xl font-bold text-center'>
{"關於我們"}
</p>
<img src={"/images/line.png"} className='lg:w-[35vh] h-auto object-cover mt-2' />

6
components/ContactForm.tsx
View File

@@ -17,7 +17,7 @@ const ContactForm = ({ startLoading, stopLoading }: Props) => {
register,
handleSubmit,
reset,
formState: {},
formState: { },
} = useForm<MessageProps>()
const onSubmit: SubmitHandler<MessageProps> = async (data) => {
try {
@@ -25,7 +25,7 @@ const ContactForm = ({ startLoading, stopLoading }: Props) => {
const result = await postMessage(data);
if (result.success) {
toast.success('已收到您的訊息，我們會盡快回覆您！');
reset(); // Reset form fields
reset(); // Reset form fields
// Reset form or perform any other actions on success
} else {
toast.error('Failed to send message. Please try again.');
@@ -55,7 +55,7 @@ const ContactForm = ({ startLoading, stopLoading }: Props) => {
<div className="grid lg:grid-cols-10 ">
<form onSubmit={handleSubmit(onSubmit)} className="flex rounded-tl-3xl rounded-bl-3xl h-auto lg:col-span-6 items-center justify-center">
<form onSubmit={handleSubmit(onSubmit)} className="flex rounded-tl-3xl rounded-bl-3xl h-[62vh] max-sm:h-auto lg:col-span-6 items-center justify-center">
<div className="space-y-3 w-full mx-11 h-auto">
<div className="grid md:grid-cols-2 space-y-3">

2
components/Course/Accordion.tsx
View File

@@ -39,7 +39,7 @@ const Accordion = async ({ courseData }: { courseData: CoursesProps }) => {
<Collapse title='課程資訊' children={courseData.information} />
<Collapse title='課程內容' children={courseData.contant} info={true} info_images={courseData.info_images} />
<Collapse title='備註' children={courseData.remark} />
<p className='text-5xl text-center mt-48'>
<p className='lg:text-5xl text-2xl font-bold text-center mt-48'>
{"課程時間表"}
</p>
{

2
components/Course/Banner.tsx
View File

@@ -6,7 +6,7 @@ const Banner = ({ courseData }: { courseData: CoursesProps }) => {
<div className='relative flex w-full h-[40vh] lg:h-[70vh] bg-gradient-to-r from-[#FDB2B8] to-[#FEB3BA] items-center'>
<div className='flex-col flex lg:ml-48 ml-4 z-10'>
<p className='text-black lg:text-5xl text-3xl font-bold text-center'>
<p className='text-black lg:text-5xl text-2xl font-bold text-center'>
{courseData?.title}
</p>
<img src={"/images/line.png"} className='lg:w-[35vh] w-[20vh] h-auto object-cover mt-2' />

4
components/Course/Collapse.tsx
View File

@@ -89,7 +89,7 @@ const Collapse: React.FC<CollapseProps> = ({ title, children, className, info, i
className={`flex justify-between items-center w-full p-6 text-left ${isOpen ? "rounded-t-lg bg-mainColor" : "rounded-lg bg-[#F2D6D5] "}`}
onClick={() => setIsOpen(!isOpen)}
>
<span className={`text-xl font-bold ml-3 ${isOpen ? "text-white " : " text-black"}`}>{title}</span>
<span className={`lg:text-xl text-lg font-bold ml-3 ${isOpen ? "text-white " : " text-black"}`}>{title}</span>
{isOpen ? (
<VscChromeMinimize className='text-white mr-3' />
) : (
@@ -153,7 +153,7 @@ const Collapse: React.FC<CollapseProps> = ({ title, children, className, info, i
:
(<div></div>)}
<div
className='px-12 py-14 [&_*]:!text-[1.5rem] [&_*]:!text-gray-600 [&_*]:!bg-transparent'
className='px-12 py-14 lg:[&_*]:!text-[1.5rem] [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!bg-transparent'
dangerouslySetInnerHTML={{ __html: children || '' }}
/>

2
components/Course/CourseImagesSilder.tsx
View File

@@ -125,7 +125,7 @@ const CourseImagesSilder = ({ courseData }: { courseData: CoursesProps }) => {
{courseData.images.map((image, index) => {
return (
<div key={index} className="px-4">
<div key={index} className="relative h-[38vw] transition-all justify-items-center mb-16">
<div key={index} className="relative h-[45vw] transition-all justify-items-center mb-16">
<img
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${image.image}`}
alt={`Course Image ${index + 1}`}

4
components/Course/LongDesc.tsx
View File

@@ -4,11 +4,11 @@ const LongDesc = ({ courseData }: { courseData: CoursesProps }) => {
return (
<div className='w-full h-auto lg:mt-64 mt-20'>
<div className='flex flex-col items-center justify-center mx-[5vw] lg:mx-[20vw]'>
<p className='text-5xl text-center'>
<p className='lg:text-5xl text-xl text-center'>
{courseData.title}
</p>
<div
className='mt-10 [&_*]:!text-[1.5rem] [&_*]:!text-gray-600 [&_*]:!text-center [&_*]:!bg-transparent'
className='mt-10 lg:[&_*]:!text-[1.5rem] [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!text-center [&_*]:!bg-transparent'
dangerouslySetInnerHTML={{ __html: courseData.long_description }}
/>
</div>

2
components/Course/ScheduleCollapse.tsx
View File

@@ -51,7 +51,7 @@ const ScheduleCollapse: React.FC<CollapseProps> = ({ title, rerganizedSchedule }
<div className='px-12 py-14'>
{rerganizedSchedule.schedules.map((schedule, index) => (
<div key={index} className='mb-4'>
<h3 className='text-xl font-bold'>
<h3 className='text-base font-bold'>
{ moment.utc(schedule.date).format("MM月DD日")}
</h3>
<p className='text-gray-600'>{schedule.title}</p>

21
components/CoursesSilder.tsx
View File

@@ -5,6 +5,7 @@ import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import './slick.css'
import Link from "next/link";
//npm i --save-dev @types/react-slick
@@ -62,12 +63,13 @@ const CoursesSilder = ({ courses }: { courses: CoursesProps[] }) => {
{course.sort_description}
</p>
<div>
<button
className={`mt-16 middle none center rounded-full bg-[#D60050] h-12 w-28 text-base text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40`}
<Link
className={`mt-16 flex items-center justify-center rounded-full bg-[#D60050] px-6 py-3 text-base text-white shadow-md shadow-pink-500/20 transition-all hover:shadow-lg hover:shadow-pink-500/40`}
data-ripple-light="true"
href={`/courses/${course.id}`}
>
{"了解更多"}
</button>
</Link>
</div>
</div>
</div>
@@ -86,12 +88,13 @@ const CoursesSilder = ({ courses }: { courses: CoursesProps[] }) => {
<p className="text-base line-clamp-3 overflow-hidden text-center mb-8">
{course.sort_description}
</p>
<button
className="rounded-full bg-white h-12 w-28 text-sm text-black shadow-md shadow-gray-400/20 transition-all hover:shadow-lg hover:shadow-gray-500/40"
data-ripple-light="true"
>
{"了解更多"}
</button>
<Link
href={`/courses/${course.id}`}
className="flex items-center justify-center rounded-full bg-white h-12 w-28 text-sm text-black shadow-md shadow-gray-400/20 transition-all hover:shadow-lg hover:shadow-gray-500/40"
data-ripple-light="true"
>
{"了解更多"}
</Link>
</div>
</div>
</div>

24
components/RouteLoader.tsx Normal file
View File

@@ -0,0 +1,24 @@
"use client"
import React, { useState, useEffect } from 'react'
import { usePathname, useSearchParams } from 'next/navigation'
import Loading from './Loading'
// const Loader = () => (
// <div className="fixed top-0 left-0 w-screen h-screen z-[99999999999999] flex items-center justify-center bg-black/40">
// <div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-white"></div>
// </div>
// );
export default function RouteLoader() {
const pathname = usePathname()
const searchParams = useSearchParams()
const [loading, setLoading] = useState<boolean>(false)
useEffect(() => {
setLoading(true)
const timer = setTimeout(() => setLoading(false), 300) // Adjust timeout as needed
return () => clearTimeout(timer)
}, [pathname, searchParams])
return loading ? <Loading /> : null
}