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

added navbar

Browse Source
This commit is contained in:
sigmaBoei
2026-02-23 21:22:53 +08:00
parent 0c634b8294
commit 9797432b7d
2 changed files with 115 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/app/components/header/Header.jsx
View File

@@ -1,17 +1,47 @@
import React from "react"; import React from "react";
import styles from "styles.module.css"; import styles from "./styles.module.css";
const Header = () => { const Header = () => {
return ( return (
// Main Container // Main Container
<div> <nav className={styles.headerContainer}>
{/* Logo and Org */} {/* Logo and Org */}
<div> <div className={styles.logoContainer}>
<h1>Logo</h1> {/* Icon */}
<div className={styles.logo}></div>
{/* Organization and Dropdown */}
<div className={styles.orgName}>
{/* Header */}
<div>
<p>Organization</p>
</div>
{/* Dropdown */}
<div className={styles.dropdown}>
<p>Project Moonshot Inc.</p>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="12"
height="12"
viewBox="0 0 12 12"
fill="none"
>
<path
d="M1.03906 3.51953L6.00031 8.48083L10.9616 3.51953"
stroke="#969AF9"
strokeLinecap="round"
strokeLinejoin="round"
/>
</svg>
</div>
</div>
</div>
</div> </div>
{/* Search */} {/* Search */}
<div>Search</div> <div>
</div> <input type="text" name="search" id="" placeholder="Search" />
</div>
</nav>
); );
}; };

79
frontend/src/app/components/header/styles.module.css
View File

@@ -0,0 +1,79 @@
.headerContainer {
background-color: #ff0000;
display: flex;
height: 84px;
padding: 12px 24px;
justify-content: space-between;
align-items: center;
align-self: stretch;
border-bottom: 1px solid #2c2d3d;
border-bottom: 1px solid color(display-p3 0.1725 0.1765 0.2353);
}
.logoContainer {
background-color: orange;
display: flex;
padding: 6px;
align-items: center;
gap: 16px;
border-radius: 4px;
}
.logo {
width: 38px;
height: 38px;
aspect-ratio: 1/1;
border-radius: 100px;
background:
url(/images/logo.png) lightgray 50% / cover no-repeat,
#232537;
background:
url(/images/logo.png) lightgray 50% / cover no-repeat,
color(display-p3 0.1392 0.1443 0.2106);
}
.orgName {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.orgName p {
color: #eeeffd;
color: color(display-p3 0.9333 0.9373 0.9882);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.dropdown {
display: inline-flex;
align-items: center;
gap: 16px;
}
.dropdown > p {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.dropdown > div {
display: flex;
padding: 8px;
justify-content: center;
align-items: center;
gap: 10px;
}
.dropdown > div > button > svg {
width: 9.922px;
height: 4.961px;
stroke: #959aff;
stroke-width: 1px;
stroke: color(display-p3 0.5892 0.6031 0.9766);
}