Laux/Frontend-Internal-Developer-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add feature

Browse Source
This commit is contained in:
Laux Dev
2026-03-02 16:46:18 +08:00
parent fade69f596
commit 00cb803e96
5 changed files with 304 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
frontend/src/app/components/topHeader/TopHeader.jsx
View File

@@ -12,9 +12,11 @@ import CloneIcon from "../icons/clone";
import RobotIcon from "../icons/robot";
import KeyIcon from "../icons/key";
import ManageEnvIcon from "../icons/manageEnv";
import Alert from "../alerts/Alert";
const TopHeader = (props) => {
const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
const [triggerAlert, setTriggerAlert] = useState(false);
const pathName = usePathname();
const router = useRouter();
const params = useParams();
@@ -22,100 +24,109 @@ const TopHeader = (props) => {
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} />
<>
{triggerAlert && <Alert setTriggerAlert={setTriggerAlert} />}
<div className={styles.container}>
<div className={styles.title}>
{((pathName.includes("/view") && props.state === "view") ||
params.usersId ||
params.rolesId) && (
<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>
<div className={styles.cancelButton} onClick={() => router.back()}>
<p>{props.cancelButtonText}</p>
)}
{!props.state && (
<div className={styles.button} onClick={handleNavigateToAdd}>
<AddIcon />
<p>{props.buttonText}</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>
)}
{props.state === "add" ? (
<>
<div
className={styles.button}
onClick={() => setTriggerAlert(!triggerAlert)}
>
<CheckIcon width={20} height={20} />
<p>{props.buttonText}</p>
</div>
)}
</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>
</div>
</>
);
};