123 lines
3.6 KiB
JavaScript
123 lines
3.6 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
import styles from "./styles.module.css";
|
|
import { usePathname, useRouter, useParams } from "next/navigation";
|
|
import BackIcon from "../icons/back";
|
|
import SearchIcon from "../icons/search";
|
|
import EnviromentIcon from "../icons/env";
|
|
import AddIcon from "../icons/add";
|
|
import CheckIcon from "../icons/check";
|
|
import MenuIcon from "../icons/menu";
|
|
import CloneIcon from "../icons/clone";
|
|
import RobotIcon from "../icons/robot";
|
|
import KeyIcon from "../icons/key";
|
|
import ManageEnvIcon from "../icons/manageEnv";
|
|
|
|
const TopHeader = (props) => {
|
|
const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
|
|
const pathName = usePathname();
|
|
const router = useRouter();
|
|
const params = useParams();
|
|
const handleNavigateToAdd = () => {
|
|
router.push(`${pathName}/add`);
|
|
};
|
|
return (
|
|
<div className={styles.container}>
|
|
<div className={styles.title}>
|
|
{((pathName.includes("/view") && props.state === "view") ||
|
|
params.usersId ||
|
|
params.roleId) && (
|
|
<div onClick={() => router.back()}>
|
|
<BackIcon />
|
|
</div>
|
|
)}
|
|
<p>{props.topbarTitle}</p>
|
|
</div>
|
|
<div className={styles.actionBar}>
|
|
{(pathName === "/projects/view" || !props.state) && (
|
|
<div className={styles.searchBarContainer}>
|
|
<SearchIcon />
|
|
</div>
|
|
)}
|
|
{pathName === "/credentials" ? (
|
|
<div className={styles.mngEnvKeyButton}>
|
|
<EnviromentIcon />
|
|
<p>Manage Env. Key</p>
|
|
</div>
|
|
) : (
|
|
""
|
|
)}
|
|
{pathName === "/projects/view" && (
|
|
<div
|
|
className={styles.button}
|
|
onClick={() => props.trigger(!props.triggerState)}
|
|
>
|
|
<AddIcon />
|
|
<p>{props.buttonText}</p>
|
|
</div>
|
|
)}
|
|
{!props.state && (
|
|
<div className={styles.button} onClick={handleNavigateToAdd}>
|
|
<AddIcon />
|
|
<p>{props.buttonText}</p>
|
|
</div>
|
|
)}
|
|
{props.state === "add" ? (
|
|
<>
|
|
<div className={styles.button}>
|
|
<CheckIcon width={20} height={20} />
|
|
<p>{props.buttonText}</p>
|
|
</div>
|
|
<div className={styles.cancelButton} onClick={() => router.back()}>
|
|
<p>{props.cancelButtonText}</p>
|
|
</div>
|
|
</>
|
|
) : (
|
|
""
|
|
)}
|
|
{/* Projects 3 dots menu */}
|
|
{pathName === "/projects/view" && (
|
|
<div
|
|
className={styles.menu}
|
|
onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
|
|
>
|
|
<div className={styles.dotMenu}>
|
|
<MenuIcon />
|
|
</div>
|
|
{triggerDropDownMenu && (
|
|
<div className={styles.dropDown}>
|
|
<div>
|
|
<div>
|
|
<CloneIcon />
|
|
<p>Clone Project</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<RobotIcon />
|
|
<p>Robots</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<KeyIcon />
|
|
<p>Init Key</p>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div>
|
|
<ManageEnvIcon />
|
|
<p>Manage Env. Key</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TopHeader;
|