51 lines
1.5 KiB
TypeScript
51 lines
1.5 KiB
TypeScript
'use client'
|
|
import { FC, useState } from "react";
|
|
import Link from "next/link";
|
|
import LoadingContent from "@/components/mutual/loader/component";
|
|
|
|
interface ThirdLayerDropdownProps {
|
|
isActive: boolean,
|
|
innerText: string,
|
|
url: string,
|
|
}
|
|
|
|
const ThirdLayerDropdown: FC<ThirdLayerDropdownProps> = ({ isActive, innerText, url }) => {
|
|
const [isLoading, setIsLoading] = useState<boolean>(false);
|
|
|
|
// Base styles
|
|
const baseClassName = "py-2 my-1 px-3 text-sm rounded-lg bg-black transition-colors duration-200 flex items-center w-full";
|
|
|
|
// Determine the appropriate class based on active state
|
|
let className = baseClassName;
|
|
if (isActive) {
|
|
className += " bg-emerald-500 text-white font-medium";
|
|
} else {
|
|
className += " bg-emerald-600 text-white hover:bg-emerald-500";
|
|
}
|
|
|
|
if (isActive) {
|
|
return (
|
|
<div className={`${className} cursor-not-allowed`}>
|
|
<span className="ml-2">{innerText}</span>
|
|
</div>
|
|
);
|
|
} else if (isLoading) {
|
|
return (
|
|
<div className={className}>
|
|
<LoadingContent height="h-5" size="w-5 h-5" plane="" />
|
|
<span className="ml-2">{innerText}</span>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<Link href={url} onClick={() => setIsLoading(true)} className="block">
|
|
<div className={className}>
|
|
<span className="ml-2">{innerText}</span>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default ThirdLayerDropdown;
|