Spaces:
Running
Running
File size: 2,762 Bytes
91939c2 4bae792 91939c2 4bae792 91939c2 4bae792 91939c2 4bae792 91939c2 4bae792 91939c2 4bae792 91939c2 4bae792 91939c2 4bae792 91939c2 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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | import { useState } from "react";
import { useSelector } from "react-redux";
import { FiPlusSquare, FiUserPlus, FiUsers } from "react-icons/fi";
function CreateSpaceGuide({ onTabChange }) {
const { isDark } = useSelector((state) => state.theme);
const [activeTab, setActiveTab] = useState("space");
const menuItems = [
{
icon: FiPlusSquare,
title: "Tạo Space",
desc: "Tạo không gian mới",
tab: "space",
},
{
icon: FiUserPlus,
title: "Tạo Agent",
desc: "Tạo agent mới",
tab: "agent",
},
{
icon: FiUsers,
title: "Quản lý Agent",
desc: "Xem và quản lý các agent",
tab: "manageAgent",
},
];
const handleClick = (tab) => {
setActiveTab(tab);
if (onTabChange) {
onTabChange(tab);
}
};
return (
<div
className="w-60 min-w-60 flex flex-col h-screen border-r"
style={{
background: "var(--bg-surface-secondary)",
borderColor: "var(--border-primary)",
}}
>
<div
className="p-4 border-b"
style={{ borderColor: "var(--border-primary)" }}
>
<div
className="text-base font-semibold"
style={{ color: "var(--text-primary)" }}
>
Tạo mới
</div>
</div>
<div className="flex-1 overflow-y-auto p-3 space-y-2">
{menuItems.map((item) => {
const IconComponent = item.icon;
const isActive = activeTab === item.tab;
return (
<div
key={item.title}
className="p-3 rounded-lg cursor-pointer flex items-start gap-3"
style={{
background: isActive
? "var(--primary-active)"
: "transparent",
color: isActive ? "var(--primary)" : "var(--text-primary)",
}}
onMouseEnter={(e) => {
if (!isActive)
e.currentTarget.style.background = "var(--hover-primary)";
}}
onMouseLeave={(e) => {
if (!isActive)
e.currentTarget.style.background = "transparent";
}}
onClick={() => handleClick(item.tab)}
>
<IconComponent size={18} className="mt-0.5 flex-shrink-0" />
<div>
<div className="text-sm font-medium">{item.title}</div>
<div
className="text-xs mt-1"
style={{ color: "var(--text-secondary)" }}
>
{item.desc}
</div>
</div>
</div>
);
})}
</div>
</div>
);
}
export default CreateSpaceGuide;
|