116 lines
3.5 KiB
JavaScript
116 lines
3.5 KiB
JavaScript
import React, { useState } from "react";
|
|
import CreateIcon from "../../icons/create";
|
|
import styles from "./styles.module.css";
|
|
import useIsMobile from "@/app/hooks/useIsMobile";
|
|
|
|
const HeaderDropdown = ({
|
|
setOpen,
|
|
sampleData,
|
|
selectedOrg,
|
|
setSelectedOrg,
|
|
}) => {
|
|
const isMobile = useIsMobile();
|
|
|
|
const handleOrgSelect = (index) => {
|
|
setSelectedOrg(index);
|
|
setOpen(false);
|
|
};
|
|
|
|
return (
|
|
<div className={styles.dropdown}>
|
|
{/* Organization Header and Search */}
|
|
<div className={styles.orgSearchContainer}>
|
|
{/* Header */}
|
|
<div className={styles.createBtnContainer}>
|
|
<p>Organization</p>
|
|
<div className={styles.createBtn}>
|
|
<p>Create</p>
|
|
{isMobile ? <CreateIcon width="24" height="24" /> : <CreateIcon />}
|
|
</div>
|
|
</div>
|
|
{/* Search */}
|
|
<div className={styles.srchInputContainer}>
|
|
<div className={styles.srchInputGroup}>
|
|
<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}>
|
|
{sampleData.map((org, index) => {
|
|
return (
|
|
<div
|
|
className={styles.orgList}
|
|
key={index}
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleOrgSelect(index);
|
|
}}
|
|
>
|
|
<div
|
|
className={`${styles.iconTxt} ${index === selectedOrg ? 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>
|
|
);
|
|
};
|
|
|
|
export default HeaderDropdown;
|