mediahub-fe/components/landing-page/header-management.tsx

96 lines
2.9 KiB
TypeScript

"use client";
import React, { useEffect, useState } from "react";
import { Link } from "@/i18n/routing";
import { Icon } from "@iconify/react/dist/iconify.js";
import { getInfoProfile, getListPorvinces, getUsersTeams } from "@/service/landing/landing";
import { useParams } from "next/navigation";
const HeaderManagement = () => {
const [profile, setProfile] = useState<any>();
const [province, setProvince] = useState([]);
const [, setUser] = useState();
const [selectedTab, setSelectedTab] = useState("video");
const params = useParams();
// const currentRoute = router.pathname;
// const profilePicture = Cookies.get("profile_picture");
useEffect(() => {
async function initState() {
const response = await getInfoProfile();
setProfile(response?.data?.data);
}
async function getProvinces() {
const response = await getListPorvinces();
// console.log(response?.data.data);
setProvince(response?.data?.data);
}
// async function getDisticts() {
// const response = await getListDistricts();
// console.log(response?.data.data);
// setDistrict(response?.data.data);
// }
initState();
getProvinces(); // getDisticts();
}, []);
useEffect(() => {
async function initState() {
if (profile != undefined) {
const response = await getUsersTeams(profile?.instituteId);
// console.log(response?.data?.data);
setUser(response?.data?.data);
}
}
initState();
}, [profile]);
function addDefaultProfile(ev: any) {
ev.target.src = "/assets/avatar-profile.png";
}
const [hasMounted, setHasMounted] = useState(false);
// Hooks
useEffect(() => {
setHasMounted(true);
}, []);
// Render
if (!hasMounted) return null;
return (
<div>
{/* Header */}
<div className="bg-[#504e52] p-12">
<div className="flex justify-between mx-10">
<div className="flex items-center gap-2 ">
<img src="/assets/avatar-profile.png" alt="avatar" className="w-14 h-14" />
<div className="flex flex-col mx-2">
<p className="text-white text-sm font-semibold">{profile?.fullname}</p>
<p className="text-white text-sm font-light">{profile?.username}</p>
<p className="text-white text-sm font-light">
Aktif Sejak&nbsp;
{`${new Date(profile?.createdAt).getDate()}/${new Date(profile?.createdAt).getMonth() + 1}/${new Date(profile?.createdAt).getFullYear()} ${new Date(profile?.createdAt).getHours()}:${new Date(
profile?.createdAt
).getMinutes()}`}
</p>
</div>
</div>
<Link href="/profile" className="flex items-center text-white gap-2">
<Icon icon="tdesign:setting-1-filled" />
Pengaturan
</Link>
</div>
</div>
</div>
);
};
export default HeaderManagement;