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

done dropdown sheesh

Browse Source
This commit is contained in:
sigmaBoei
2026-02-24 16:28:19 +08:00
parent e9c266fe8f
commit 63375ee272
2 changed files with 279 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,7 +5,19 @@ import styles from "./styles.module.css";
import { useState } from "react"; import { useState } from "react";
const Header = () => { const Header = () => {
const orgList = [
{ name: "Project Moonshot Inc." },
{ name: "Organization X" },
{ name: "Organization Y" },
{ name: "Organization Z" },
];
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [orgId, setorgId] = useState(null);
const activeHandler = (index) => {
setorgId(index);
};
return ( return (
// Main Container // Main Container
<div className={styles.mainContainer}> <div className={styles.mainContainer}>
@@ -16,18 +28,139 @@ const Header = () => {
<div className={styles.logo}></div> <div className={styles.logo}></div>
<div className={styles.orgName}> <div className={styles.orgName}>
<p>Organization</p> <p>Organization</p>
<div <div className={styles.dropdownContainer}>
className={styles.dropdownContainer}
onClick={() => setOpen(!open)}
>
{/* Dropdown */} {/* Dropdown */}
{open && ( {open && (
<div className={styles.dropdown}> <div className={styles.dropdown}>
<div>ahdas</div> {/* Organization Header and Search */}
<div className={styles.ohsContainer}>
{/* Header */}
<div className={styles.createBtnContainer}>
<p>Organization</p>
<div className={styles.createBtn}>
<p>Create</p>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
viewBox="0 0 16 16"
fill="none"
>
<g clipPath="url(#clip0_548_2226)">
<path
d="M8.00034 14.8718C11.7954 14.8718 14.8718 11.7954 14.8718 8.00034C14.8718 4.20535 11.7954 1.12891 8.00034 1.12891C4.20535 1.12891 1.12891 4.20535 1.12891 8.00034C1.12891 11.7954 4.20535 14.8718 8.00034 14.8718Z"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M8 4.8291V11.172"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4.82812 8H11.171"
stroke="#8287FF"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_548_2226">
<rect width="16" height="16" fill="white" />
</clipPath>
</defs>
</svg>
</div>
</div>
{/* Search */}
<div className={styles.searchBtnContainer}>
<div className={styles.searchInputGroup}>
<svg
xmlns="http://www.w3.org/2000/svg"
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
>
<g clipPath="url(#clip0_23_1333)">
<path
d="M7.79548 14.424C11.4568 14.424 14.4249 11.4559 14.4249 7.7945C14.4249 4.13315 11.4568 1.16504 7.79548 1.16504C4.13412 1.16504 1.16602 4.13315 1.16602 7.7945C1.16602 11.4559 4.13412 14.424 7.79548 14.424Z"
stroke="#858699"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M16.8359 16.835L12.6172 12.6162"
stroke="#858699"
strokeWidth="1.5"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
<defs>
<clipPath id="clip0_23_1333">
<rect width="18" height="18" fill="white" />
</clipPath>
</defs>
</svg>
<input
className={styles.placeholderTxt}
type="text"
name="search"
id=""
placeholder="Search"
/>
</div>
</div>
</div>
{/* Select Options */}
<div className={styles.optionsContainer}>
{orgList.map((org, index) => {
return (
<div
className={styles.orgList}
key={index}
onClick={() => activeHandler(index)}
>
<div
className={`${styles.iconTxt} ${index === orgId ? styles.active : ""}`}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
>
<path
d="M7.87565 14.8747L3.20898 10.208L4.10482 9.31217L7.87565 13.083L15.8757 5.08301L16.7715 5.97884L7.87565 14.8747Z"
fill="#8287FF"
style={{
fill: "#8287FF",
fillOpacity: 1,
}}
/>
</svg>
<p>{org.name}</p>
</div>
</div>
);
})}
</div>
</div> </div>
)} )}
{/* Button */} {/* Button */}
<div className={styles.dropdownBtn}> <div
className={styles.dropdownBtn}
onClick={() => setOpen(!open)}
>
<p>Project Moonshot Inc.</p> <p>Project Moonshot Inc.</p>
<div> <div>
<svg <svg

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

@@ -99,8 +99,148 @@
box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25); box-shadow: 0 2px 15px 0 color(display-p3 0 0 0 / 0.25);
position: absolute; position: absolute;
top: 100%; top: 100%;
margin-top: 8px;
left: 0; left: 0;
} }
.ohsContainer {
display: flex;
width: 318px;
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.createBtnContainer {
display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
.createBtnContainer > p {
color: #a3a7c6;
color: color(display-p3 0.6425 0.6544 0.7649);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.createBtn {
display: flex;
justify-content: center;
align-items: center;
gap: 6px;
}
.createBtn > p {
color: #8187ff;
color: color(display-p3 0.5098 0.5294 1);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
.createBtn:hover > p {
color: #9ba0ff;
color: color(display-p3 0.6127 0.6282 1);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
.createBtn:hover > svg path {
stroke: #9ba0ff;
stroke-width: 1.5px;
stroke: color(display-p3 0.6127 0.6282 1);
}
.searchBtnContainer {
display: flex;
align-items: center;
gap: 10px;
align-self: stretch;
}
.searchInputGroup {
display: flex;
padding: 8px 12px;
align-items: center;
gap: 9px;
flex: 1 0 0;
border-radius: 4px;
background: #282c3c;
background: color(display-p3 0.1593 0.1702 0.2316);
}
.placeholderTxt {
flex: 1;
background: transparent;
border: none;
outline: none;
font-family: Inter;
font-size: 16px;
}
.placeholderTxt::placeholder {
color: #85869b;
color: color(display-p3 0.5216 0.5255 0.6);
font-family: Inter;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 0.08px;
}
.optionsContainer {
display: flex;
width: 318px;
flex-direction: column;
align-items: flex-start;
}
.orgList:hover {
border-radius: 4px;
background: #3c4159;
background: color(display-p3 0.2398 0.2548 0.3399);
}
.orgList {
display: flex;
padding: 6px;
align-items: center;
gap: 10px;
align-self: stretch;
border-radius: 4px;
}
.iconTxt {
display: flex;
align-items: center;
gap: 12px;
}
.iconTxt > svg {
opacity: 0;
}
.active > svg {
opacity: 1;
}
.iconTxt > p {
color: #d2d3e1;
color: color(display-p3 0.8235 0.8275 0.8784);
font-family: Inter;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
}
/* Later */
.profileContainer { .profileContainer {
display: flex; display: flex;
height: 44px; height: 44px;