@asgerami/zemenay-blog
Version:
Plug-and-play blog system for Next.js - Get a fully functional blog running in minutes with zero configuration
58 lines (57 loc) • 7.98 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterControls = FilterControls;
exports.ActiveFiltersBar = ActiveFiltersBar;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
function FilterControls({ categories, tags, selectedCategory, selectedTags, onCategoryClick, onTagClick, onClearFilters, className = "", }) {
const [showCategoryDropdown, setShowCategoryDropdown] = (0, react_1.useState)(false);
const [showTagDropdown, setShowTagDropdown] = (0, react_1.useState)(false);
const categoryRef = (0, react_1.useRef)(null);
const tagRef = (0, react_1.useRef)(null);
const hasActiveFilters = selectedCategory || selectedTags.length > 0;
const activeFiltersCount = (selectedCategory ? 1 : 0) + selectedTags.length;
// Close dropdowns when clicking outside
(0, react_1.useEffect)(() => {
function handleClickOutside(event) {
if (categoryRef.current &&
!categoryRef.current.contains(event.target)) {
setShowCategoryDropdown(false);
}
if (tagRef.current && !tagRef.current.contains(event.target)) {
setShowTagDropdown(false);
}
}
document.addEventListener("mousedown", handleClickOutside);
return () => document.removeEventListener("mousedown", handleClickOutside);
}, []);
return ((0, jsx_runtime_1.jsxs)("div", { className: `filter-controls ${className}`, children: [categories.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "filter-dropdown", ref: categoryRef, children: [(0, jsx_runtime_1.jsxs)("button", { className: `filter-btn ${selectedCategory ? "active" : ""}`, onClick: () => setShowCategoryDropdown(!showCategoryDropdown), title: "Filter by category", children: [(0, jsx_runtime_1.jsx)("span", { className: "filter-icon", children: "\uD83D\uDCC1" }), (0, jsx_runtime_1.jsx)("span", { className: "filter-label", children: "Category" }), selectedCategory && (0, jsx_runtime_1.jsx)("span", { className: "filter-count", children: "1" }), (0, jsx_runtime_1.jsx)("span", { className: "dropdown-arrow", children: "\u25BC" })] }), showCategoryDropdown && ((0, jsx_runtime_1.jsxs)("div", { className: "filter-dropdown-menu", children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-dropdown-header", children: [(0, jsx_runtime_1.jsx)("span", { children: "Categories" }), selectedCategory && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
const category = categories.find((c) => c.slug === selectedCategory);
if (category)
onCategoryClick(category);
}, className: "clear-section-btn", children: "Clear" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "filter-options", children: categories.map((category) => ((0, jsx_runtime_1.jsxs)("button", { className: `filter-option ${selectedCategory === category.slug ? "selected" : ""}`, onClick: () => {
onCategoryClick(category);
setShowCategoryDropdown(false);
}, children: [(0, jsx_runtime_1.jsx)("span", { className: "option-name", children: category.name }), category.description && ((0, jsx_runtime_1.jsx)("span", { className: "option-desc", children: category.description })), selectedCategory === category.slug && ((0, jsx_runtime_1.jsx)("span", { className: "selected-check", children: "\u2713" }))] }, category.id))) })] }))] })), tags.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "filter-dropdown", ref: tagRef, children: [(0, jsx_runtime_1.jsxs)("button", { className: `filter-btn ${selectedTags.length > 0 ? "active" : ""}`, onClick: () => setShowTagDropdown(!showTagDropdown), title: "Filter by tags", children: [(0, jsx_runtime_1.jsx)("span", { className: "filter-icon", children: "\uD83C\uDFF7\uFE0F" }), (0, jsx_runtime_1.jsx)("span", { className: "filter-label", children: "Tags" }), selectedTags.length > 0 && ((0, jsx_runtime_1.jsx)("span", { className: "filter-count", children: selectedTags.length })), (0, jsx_runtime_1.jsx)("span", { className: "dropdown-arrow", children: "\u25BC" })] }), showTagDropdown && ((0, jsx_runtime_1.jsxs)("div", { className: "filter-dropdown-menu", children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-dropdown-header", children: [(0, jsx_runtime_1.jsx)("span", { children: "Tags" }), selectedTags.length > 0 && ((0, jsx_runtime_1.jsx)("button", { onClick: () => {
selectedTags.forEach((tagSlug) => {
const tag = tags.find((t) => t.slug === tagSlug);
if (tag)
onTagClick(tag);
});
}, className: "clear-section-btn", children: "Clear" }))] }), (0, jsx_runtime_1.jsx)("div", { className: "filter-options", children: tags.map((tag) => ((0, jsx_runtime_1.jsxs)("button", { className: `filter-option ${selectedTags.includes(tag.slug) ? "selected" : ""}`, onClick: () => onTagClick(tag), children: [(0, jsx_runtime_1.jsx)("span", { className: "option-name", children: tag.name }), selectedTags.includes(tag.slug) && ((0, jsx_runtime_1.jsx)("span", { className: "selected-check", children: "\u2713" }))] }, tag.id))) })] }))] })), hasActiveFilters && ((0, jsx_runtime_1.jsxs)("button", { className: "clear-all-filters-btn", onClick: onClearFilters, title: `Clear ${activeFiltersCount} filter${activeFiltersCount !== 1 ? "s" : ""}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "clear-icon", children: "\u2715" }), (0, jsx_runtime_1.jsxs)("span", { className: "clear-label", children: ["Clear (", activeFiltersCount, ")"] })] }))] }));
}
function ActiveFiltersBar({ categories, tags, selectedCategory, selectedTags, onCategoryClick, onTagClick, onClearFilters, className = "", }) {
var _a;
const hasActiveFilters = selectedCategory || selectedTags.length > 0;
if (!hasActiveFilters)
return null;
return ((0, jsx_runtime_1.jsxs)("div", { className: `active-filters-bar ${className}`, children: [(0, jsx_runtime_1.jsx)("span", { className: "active-filters-label", children: "Active filters:" }), (0, jsx_runtime_1.jsxs)("div", { className: "active-filter-chips", children: [selectedCategory && ((0, jsx_runtime_1.jsxs)("span", { className: "filter-chip category-chip", children: [(0, jsx_runtime_1.jsx)("span", { className: "chip-icon", children: "\uD83D\uDCC1" }), (0, jsx_runtime_1.jsx)("span", { className: "chip-text", children: (_a = categories.find((c) => c.slug === selectedCategory)) === null || _a === void 0 ? void 0 : _a.name }), (0, jsx_runtime_1.jsx)("button", { className: "chip-remove", onClick: () => {
const category = categories.find((c) => c.slug === selectedCategory);
if (category)
onCategoryClick(category);
}, children: "\u2715" })] })), selectedTags.map((tagSlug) => {
const tag = tags.find((t) => t.slug === tagSlug);
return tag ? ((0, jsx_runtime_1.jsxs)("span", { className: "filter-chip tag-chip", children: [(0, jsx_runtime_1.jsx)("span", { className: "chip-icon", children: "\uD83C\uDFF7\uFE0F" }), (0, jsx_runtime_1.jsx)("span", { className: "chip-text", children: tag.name }), (0, jsx_runtime_1.jsx)("button", { className: "chip-remove", onClick: () => onTagClick(tag), children: "\u2715" })] }, tagSlug)) : null;
})] }), (0, jsx_runtime_1.jsx)("button", { className: "clear-all-chips", onClick: onClearFilters, children: "Clear all" })] }));
}