Spaces:
Sleeping
Sleeping
File size: 1,742 Bytes
477a7c3 57f5158 4bae792 57f5158 4bae792 477a7c3 4bae792 57f5158 4bae792 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | import { FiPlus, FiSettings, FiBarChart2 } from "react-icons/fi";
import { getSpaceIconComponent } from "../../constants/spaceIcons";
// Built-in system icons (not from space registry)
const systemIcons = {
plus: FiPlus,
settings: FiSettings,
dashboard: FiBarChart2,
};
function SpaceIcon({ icon, name, isActive, hasNotification, onClick, title }) {
// Try space registry first, then system icons
const IconComponent = getSpaceIconComponent(icon) || systemIcons[icon] || FiPlus;
return (
<div
className="w-10 h-10 rounded-lg flex items-center justify-center cursor-pointer transition-all duration-150 relative"
style={{
background: isActive ? "var(--primary)" : "transparent",
color: isActive ? "var(--bg-surface)" : "var(--text-tertiary)",
borderRadius: isActive ? "0.75rem" : "0.5rem",
}}
onClick={onClick}
title={title}
onMouseEnter={(e) => {
if (!isActive) {
e.currentTarget.style.background = "var(--hover-primary)";
e.currentTarget.style.color = "#fff";
e.currentTarget.style.borderRadius = "0.75rem";
}
}}
onMouseLeave={(e) => {
if (!isActive) {
e.currentTarget.style.background = "transparent";
e.currentTarget.style.color = "var(--text-tertiary)";
e.currentTarget.style.borderRadius = "0.5rem";
}
}}
>
<IconComponent size={20} />
{hasNotification && (
<div
className="absolute top-1.5 right-1.5 w-2 h-2 rounded-full border-2"
style={{
background: "var(--online)",
borderColor: "var(--bg-surface)",
}}
/>
)}
</div>
);
}
export default SpaceIcon;
|