111 lines
3.7 KiB
TypeScript
111 lines
3.7 KiB
TypeScript
import { useAuth } from "../../contexts/authContext";
|
|
import Image from "next/image";
|
|
import {
|
|
FaMicrophoneAlt,
|
|
FaHeadphonesAlt,
|
|
FaTh,
|
|
FaBell,
|
|
FaSearch,
|
|
FaBuilding,
|
|
FaCalendarDay,
|
|
FaClock,
|
|
} from "react-icons/fa";
|
|
import { useTeamDashboardContext } from "../../contexts/teamDashboardContext";
|
|
import router from "next/router";
|
|
import Moment from "react-moment";
|
|
|
|
export default function Header() {
|
|
const { logOut } = useAuth();
|
|
const { team } = useTeamDashboardContext();
|
|
|
|
async function handleSignOut() {
|
|
console.log("clicked log out button");
|
|
|
|
try {
|
|
await logOut();
|
|
|
|
router.push("/teams");
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
|
|
var today = new Date();
|
|
|
|
return (
|
|
<section className="flex-1 flex flex-row items-center justify-between py-5">
|
|
{/* welcome message */}
|
|
<span className="flex flex-col items-baseline">
|
|
<span className="font-bold text-xl text-white">
|
|
👋Hey Arjun, Good Afternoon!
|
|
</span>
|
|
|
|
{/* Date and time */}
|
|
<span className="flex flex-row space-x-2">
|
|
<span className="text-teal-700 bg-teal-200 p-1 rounded-md text-xs font-bold mt-2 flex flex-row items-center space-x-1">
|
|
<FaBuilding />
|
|
<span>{team.name}</span>
|
|
</span>
|
|
|
|
<span className="text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2 flex flex-row items-center space-x-1">
|
|
<FaCalendarDay />
|
|
<Moment date={today} format="ddd, MMM DD" />
|
|
</span>
|
|
|
|
<span className="text-sky-700 bg-sky-200 p-1 rounded-md text-xs font-bold mt-2 flex flex-row items-center space-x-1">
|
|
<FaClock />
|
|
<Moment format="h:m a" />
|
|
</span>
|
|
</span>
|
|
</span>
|
|
|
|
{/* header control section */}
|
|
<span className="flex flex-row items-center space-x-5">
|
|
<button
|
|
onClick={handleSignOut}
|
|
className="mt-10 text-sm text-orange-500 font-semibold py-1 px-4 bg-orange-200 rounded"
|
|
>
|
|
👋 Logout
|
|
</button>
|
|
{/* search bar */}
|
|
<div className="pt-2 flex flex-row relative items-center">
|
|
<button type="submit" className="absolute left-0 top-0 mt-5 ml-5">
|
|
<FaSearch className="text-white" />
|
|
</button>
|
|
|
|
<input
|
|
className=" bg-white bg-opacity-40 h-10 px-5 pl-10 pr-16 rounded-lg text-white text-sm focus:outline-none"
|
|
type="search"
|
|
name="search"
|
|
placeholder="Search"
|
|
/>
|
|
|
|
<button
|
|
className="absolute right-1 rounded-lg py-1 px-2 ml-1
|
|
shadow-md text-center text-white text-sm font-bold"
|
|
>
|
|
CTRL + K
|
|
</button>
|
|
</div>
|
|
|
|
<FaBell className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
|
|
<FaHeadphonesAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
|
|
<FaMicrophoneAlt className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
|
|
<FaTh className="text-lg text-gray-400 hover:text-white ease-in-out duration-300 hover:scale-110 hover:cursor-pointer" />
|
|
|
|
{/* avatar */}
|
|
<span className="relative flex">
|
|
<span className="bg-gray-200 bg-opacity-30 rounded-full shadow-md absolute w-full h-full"></span>
|
|
<span className="absolute top-0 right-0 w-3 h-3 bg-green-400 rounded-full"></span>
|
|
<Image
|
|
src="/avatars/svg/Artboards_Diversity_Avatars_by_Netguru-22.svg"
|
|
alt="profile"
|
|
width={50}
|
|
height={50}
|
|
/>
|
|
</span>
|
|
</span>
|
|
</section>
|
|
);
|
|
}
|