@droppii-org/chat-sdk
Version:
Droppii React Chat SDK
91 lines (90 loc) • 5.23 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from "react";
import { Icon } from "../icon";
const messageCategories = [
{
icon: "chat-square-b",
label: "Đang mở",
count: 43,
color: "text-gray-600",
subCategories: [
{
icon: "user-del-o",
label: "Chưa phân công",
count: 1,
color: "text-orange-500",
},
{
icon: "warning-square-o",
label: "Chậm xử lý",
count: 1,
color: "text-red-500",
},
{
icon: "time-circle-o",
label: "Chờ xử lý",
count: 0,
color: "text-orange-400",
},
{
icon: "arrow-reply-o",
label: "Chưa trả lời",
count: 1,
color: "text-purple-500",
},
{
icon: "play-b",
label: "Đang xử lý",
count: 38,
color: "text-gray-600",
},
{
icon: "pause-b",
label: "Tạm chờ",
count: 2,
color: "text-gray-600",
},
],
},
{
icon: "check-b",
label: "Đã đóng",
count: 0,
color: "text-green-600",
},
];
const AssignedSessionFilter = ({ onFilterChange, className = "", }) => {
const [expandedCategories, setExpandedCategories] = useState(new Set([0]));
const [selectedFilter, setSelectedFilter] = useState("");
const toggleCategory = (index) => {
const newExpanded = new Set(expandedCategories);
if (newExpanded.has(index)) {
newExpanded.delete(index);
}
else {
newExpanded.add(index);
}
setExpandedCategories(newExpanded);
};
const handleFilterSelect = (categoryId, subCategoryId) => {
const filterId = subCategoryId || categoryId;
setSelectedFilter(filterId);
onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(categoryId, subCategoryId);
};
return (_jsxs("div", { className: `w-64 bg-white border-r border-gray-200 flex flex-col ${className}`, children: [_jsx("div", { className: "p-4 border-b border-gray-200", children: _jsx("h2", { className: "text-lg font-semibold text-gray-800", children: "TIN NH\u1EAEN C\u1EE6A T\u00D4I" }) }), _jsx("div", { className: "flex-1 overflow-y-auto", children: _jsx("ul", { className: "py-2", children: messageCategories.map((category, index) => (_jsxs("li", { children: [_jsxs("button", { onClick: () => {
if (category.subCategories) {
toggleCategory(index);
}
else {
handleFilterSelect(category.label);
}
}, className: `w-full flex items-center justify-between px-4 py-3 hover:bg-gray-50 transition-colors group ${selectedFilter === category.label && !category.subCategories
? "bg-blue-50 border-r-2 border-blue-500"
: ""}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [category.subCategories && (_jsx(Icon, { icon: expandedCategories.has(index)
? "chevron-down-b"
: "chevron-right-b", size: 14, className: "text-gray-400" })), _jsx(Icon, { icon: category.icon, size: 20, className: category.color })] }), _jsx("span", { className: "font-medium text-gray-800 text-left", children: category.label })] }), _jsx("span", { className: "text-sm font-medium text-gray-500 min-w-0", children: category.count })] }), category.subCategories && expandedCategories.has(index) && (_jsx("ul", { className: "ml-4 border-l border-gray-200", children: category.subCategories.map((subCategory, subIndex) => (_jsx("li", { children: _jsxs("button", { onClick: () => handleFilterSelect(category.label, subCategory.label), className: `w-full flex items-center justify-between px-4 py-2 hover:bg-gray-50 transition-colors group ${selectedFilter === subCategory.label
? "bg-blue-50 border-r-2 border-blue-500"
: ""}`, children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "flex-shrink-0 ml-4", children: _jsx(Icon, { icon: subCategory.icon, size: 18, className: subCategory.color }) }), _jsx("span", { className: "text-sm font-medium text-gray-700 text-left", children: subCategory.label })] }), _jsx("span", { className: "text-xs font-medium text-gray-500 min-w-0", children: subCategory.count })] }) }, subIndex))) }))] }, index))) }) })] }));
};
export default AssignedSessionFilter;