98 lines
3.2 KiB
TypeScript
98 lines
3.2 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";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const HeaderManagement = () => {
|
|
const [profile, setProfile] = useState<any>();
|
|
const [province, setProvince] = useState([]);
|
|
const [, setUser] = useState();
|
|
const [selectedTab, setSelectedTab] = useState("video");
|
|
const params = useParams();
|
|
const t = useTranslations("LandingPage");
|
|
|
|
// 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-[#cccccc] p-5 lg:p-8">
|
|
<div className="flex flex-col lg:flex-row justify-center lg:justify-between mx-6 lg:mx-10">
|
|
<div className="flex items-center gap-2 ">
|
|
<img src="/assets/gg-profile.png" alt="avatar" className="w-14 h-14" />
|
|
<div className="flex flex-col mx-2">
|
|
<p className="text-black text-sm font-semibold">{profile?.fullname}</p>
|
|
<p className="text-black text-sm font-light">{profile?.username}</p>
|
|
<p className="text-black text-sm font-light">
|
|
{t("activeSince", { defaultValue: "Active Since" })}
|
|
{`${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 justify-center items-center text-black gap-2 mt-3 lg:mt-0">
|
|
<p className="text-sm lg:text-base">{t("fullProfile", { defaultValue: "Full Profile" })}</p>
|
|
<Icon icon="ri:arrow-right-s-line" className="h-5 w-5" />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HeaderManagement;
|