111 lines
3.8 KiB
TypeScript
111 lines
3.8 KiB
TypeScript
import { useState } from "react";
|
||
import IconWrapper from "../../icons/IconWrapper/IconWrapper";
|
||
import CrossIcon from "../../icons/CrossIcon/CrossIcon";
|
||
import EmployeesList from "../EmployeesList/EmployeesList";
|
||
import ICompanyEmployee from "../../types/companyEmployee";
|
||
import ICompanyInfoItem from "../../types/companyInfoItem";
|
||
import CompanyInfoList from "../CompanyInfoList/CompanyInfoList";
|
||
import ProjectList from "../ProjectList/ProjectList";
|
||
import IProjectItem from "../../types/projectItem";
|
||
|
||
const companyEmployeeItems: ICompanyEmployee[] = [
|
||
{
|
||
name: "Анастасия Кошкина",
|
||
status: "online",
|
||
image: "Employee.png",
|
||
id: "1",
|
||
},
|
||
{
|
||
name: "Анастасия Кошкина",
|
||
status: "offline",
|
||
image: "Employee.png",
|
||
id: "2",
|
||
},
|
||
{
|
||
name: "Анастасия Кошкина",
|
||
status: "at demonstration",
|
||
image: "Employee.png",
|
||
id: "3",
|
||
},
|
||
];
|
||
|
||
const projectItems: IProjectItem[] = [
|
||
{
|
||
title: "ЖК «Акватория»",
|
||
image: "building1.png",
|
||
id: "1",
|
||
subscriptionSessionCount: 3,
|
||
subscriptionUntil: "2023-11-07T07:54:58.392+00:00",
|
||
applicationVersion: "1.23",
|
||
},
|
||
{
|
||
title: "ЖК «Новатор»",
|
||
image: "building2.png",
|
||
id: "2",
|
||
subscriptionSessionCount: 3,
|
||
subscriptionUntil: "2023-11-07T07:54:58.392+00:00",
|
||
applicationVersion: "1.23",
|
||
},
|
||
];
|
||
|
||
const companyInfoItems: ICompanyInfoItem[] = [
|
||
{ label: "Сайт", title: "gsbk.ru", id: "1" },
|
||
{ label: "Телефон", title: "+7 (3452) 540-662", id: "2" },
|
||
{ label: "Email", title: "office@gsbk.ru", id: "3" },
|
||
{ label: "Адрес", title: "г. Тюмень, ул.Первомайская 39", id: "4" },
|
||
];
|
||
|
||
const CompanyInfo = () => {
|
||
const [tab, setTab] = useState<"Сотрудники" | "Проекты">("Сотрудники");
|
||
|
||
const handleOnTabClick = (currentTab: "Сотрудники" | "Проекты") => {
|
||
return () => {
|
||
setTab(currentTab);
|
||
};
|
||
};
|
||
|
||
return (
|
||
<div className="bg-white w-[716px] h-[520px] m-auto rounded-[8px]">
|
||
<div className="p-4 flex justify-between border-b border-b-[#DAE0E5]">
|
||
<div className="font-semibold text-sm">Компания «ГК “СБК”»</div>
|
||
<IconWrapper className="w-[11.3px] h-[11.3px] cursor-pointer text-[#77828C] self-center">
|
||
<CrossIcon />
|
||
</IconWrapper>
|
||
</div>
|
||
<div className="flex h-[467px] ">
|
||
<div className="flex w-[420px] h-[100%] border-r border-r-[#DAE0E5] p-[24px] gap-6 ">
|
||
<div className="w-[88px] h-[88px] bg-[#D9D9D9] rounded-full"></div>
|
||
<div className="w-[260px] flex flex-col gap-4">
|
||
<CompanyInfoList companyInfoItems={companyInfoItems} />
|
||
<button className="text-left outline-none text-[#49A1F5] text-[12px]">
|
||
Сообщить о проблеме
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col w-full">
|
||
<div className="border-b border-b-[#DAE0E5] flex px-4 gap-6 font-semibold text-[14px] h-fit">
|
||
<button
|
||
className={`${tab !== "Сотрудники" ? "text-[#77828C]" : ""} py-4`}
|
||
onClick={handleOnTabClick("Сотрудники")}
|
||
>
|
||
Сотрудники
|
||
</button>
|
||
<button
|
||
className={`${tab !== "Проекты" ? "text-[#77828C]" : ""} `}
|
||
onClick={handleOnTabClick("Проекты")}
|
||
>
|
||
Проекты
|
||
</button>
|
||
</div>
|
||
{tab === "Сотрудники" && (
|
||
<EmployeesList employees={companyEmployeeItems} />
|
||
)}
|
||
{tab === "Проекты" && <ProjectList projectItems={projectItems} />}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default CompanyInfo;
|