119 lines
5.5 KiB
TypeScript
119 lines
5.5 KiB
TypeScript
"use client"
|
|
import React, { useState } from 'react'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { FiChevronDown } from "react-icons/fi";
|
|
import { FaFacebookF, FaYoutube } from "react-icons/fa";
|
|
import { RiInstagramFill } from "react-icons/ri";
|
|
import { IoMenu, IoClose } from "react-icons/io5";
|
|
import { CoursesProps, SettingsProps } from '@/types'
|
|
//define props type
|
|
type Props = {
|
|
openNav: () => void
|
|
showNav: boolean
|
|
courses: CoursesProps[]
|
|
settings: SettingsProps
|
|
}
|
|
const Nav = ({ openNav, courses, showNav, settings }: Props) => {
|
|
|
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
|
|
|
|
return (
|
|
<div className={`bg-[#F6E5E9] max-sm:bg-[#FFF9F9] h-14 z-[10] w-full transition-all duration-200 `}>
|
|
<div className="flex items-center justify-between w-[80%] sm:w-[80%] x1:w-[80%] mx-auto">
|
|
<div className='flex items-center space-x-10'>
|
|
<Link href={"/"}>
|
|
<Image
|
|
|
|
src="/images/logo.png"
|
|
alt='logo'
|
|
width={170}
|
|
height={170}
|
|
className="m1-[-1.5rem] sm:m1-0 mr-4"
|
|
/>
|
|
</Link>
|
|
<div className="flex items-center space-x-15">
|
|
<div className='hidden lg:flex items-center space-x-8'>
|
|
<Link key={"01"} href={"/"} >
|
|
<p className="nav__link">
|
|
{"主頁"}
|
|
</p>
|
|
</Link>
|
|
<div key={"02"} className="relative">
|
|
<button
|
|
className="nav__link flex items-center"
|
|
onClick={() => setDropdownOpen(!dropdownOpen)}
|
|
>
|
|
{"課程"}
|
|
<FiChevronDown className='text-gray-400' />
|
|
</button>
|
|
{dropdownOpen && (
|
|
<div className="absolute left-0 top-full mt-1 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 z-50">
|
|
<div className="py-1" role="menu" aria-orientation="vertical" aria-labelledby="options-menu">
|
|
{courses.map((course) => (
|
|
<a
|
|
key={course.id}
|
|
href={`/courses/${course.id}`}
|
|
className={`block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-mainColor`}
|
|
role="menuitem"
|
|
>
|
|
{course.title}
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Link key={"03"} href="/aboutus" >
|
|
<p className="nav__link">
|
|
{"關於我們"}
|
|
</p>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/*button*/}
|
|
<div className="flex items-center space-x-5 ">
|
|
<div className="flex items-center space-x-2 max-sm:hidden">
|
|
<div className="bg-[#DCCECF] rounded-full h-8 w-8 flex items-center justify-center hover:bg-mainColor"
|
|
onClick={() => window.open(settings.facebook)} >
|
|
<FaFacebookF
|
|
className="w-4 h-4 cursor-pointer text-[#F6E5E9]"
|
|
/>
|
|
</div>
|
|
<div className="bg-[#DCCECF] rounded-full h-8 w-8 flex items-center justify-center hover:bg-mainColor"
|
|
onClick={() => window.open(settings.instagram)} >
|
|
<RiInstagramFill
|
|
className="w-4 h-4 cursor-pointer text-[#F6E5E9]"
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-[#DCCECF] rounded-full h-8 w-8 flex items-center justify-center hover:bg-mainColor"
|
|
onClick={() => window.open(settings.youtube)} >
|
|
<FaYoutube
|
|
className="w-4 h-4 cursor-pointer text-[#F6E5E9]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
{/*burger*/}
|
|
{showNav ? (
|
|
<IoClose
|
|
onClick={openNav}
|
|
className="w-8 h-8 cursor-pointer text-mainColor lg:hidden ml-2"
|
|
/>
|
|
) : (
|
|
<IoMenu
|
|
id='menubutton'
|
|
onClick={openNav}
|
|
className="w-8 h-8 cursor-pointer text-mainColor lg:hidden ml-2"
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
export default Nav
|