42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
'use client';
|
|
import { FC } from "react";
|
|
|
|
interface FirstLayerDropdownProps {
|
|
isActive: boolean;
|
|
isExpanded: boolean;
|
|
innerText: string;
|
|
onClick: () => void;
|
|
}
|
|
|
|
const FirstLayerDropdown: FC<FirstLayerDropdownProps> = ({ isActive, isExpanded, innerText, onClick }) => {
|
|
// Base styles
|
|
const baseClassName = "py-3 px-4 text-sm rounded-xl cursor-pointer transition-colors duration-200 flex justify-between items-center w-full";
|
|
|
|
// Determine the appropriate class based on active and expanded states
|
|
let className = baseClassName;
|
|
if (isActive) {
|
|
className += " bg-emerald-700 text-white font-medium";
|
|
} else if (isExpanded) {
|
|
className += " bg-emerald-600 text-white";
|
|
} else {
|
|
className += " bg-emerald-800 text-white hover:bg-emerald-700";
|
|
}
|
|
|
|
return (
|
|
<div onClick={onClick} className={className}>
|
|
<span>{innerText}</span>
|
|
{isExpanded ? (
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
|
|
</svg>
|
|
) : (
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
|
|
</svg>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FirstLayerDropdown;
|