@asgerami/zemenay-blog/dist/components/FilterSidebar.js

Plug-and-play blog system for Next.js - Get a fully functional blog running in minutes with zero configuration

"use strict";
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FilterSidebar = FilterSidebar;
exports.CompactFilterBar = CompactFilterBar;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
function FilterSidebar({ categories, tags, selectedCategory, selectedTags, onCategoryClick, onTagClick, onClearFilters, className = "", }) {
    var _a;
    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
    const hasActiveFilters = selectedCategory || selectedTags.length > 0;
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { className: "filter-toggle-mobile", onClick: () => setIsOpen(!isOpen), children: [(0, jsx_runtime_1.jsx)("span", { className: "filter-icon", children: "\uD83D\uDD0D" }), (0, jsx_runtime_1.jsx)("span", { children: "Filters" }), hasActiveFilters && ((0, jsx_runtime_1.jsx)("span", { className: "filter-count", children: (selectedCategory ? 1 : 0) + selectedTags.length }))] }), (0, jsx_runtime_1.jsx)("aside", { className: `filter-sidebar ${isOpen ? "open" : ""} ${className}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "filter-sidebar-content", children: [(0, jsx_runtime_1.jsxs)("div", { className: "filter-header", children: [(0, jsx_runtime_1.jsx)("h3", { children: "Filter Posts" }), (0, jsx_runtime_1.jsx)("button", { className: "filter-close", onClick: () => setIsOpen(false), children: "\u2715" })] }), hasActiveFilters && ((0, jsx_runtime_1.jsxs)("div", { className: "active-filters-summary", children: [(0, jsx_runtime_1.jsxs)("div", { className: "active-filters-header", children: [(0, jsx_runtime_1.jsxs)("span", { className: "active-count", children: [(selectedCategory ? 1 : 0) + selectedTags.length, " active filter", (selectedCategory ? 1 : 0) + selectedTags.length !== 1
                                                    ? "s"
                                                    : ""] }), (0, jsx_runtime_1.jsx)("button", { onClick: onClearFilters, className: "clear-all-btn", children: "Clear all" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "active-filters-list", children: [selectedCategory && ((0, jsx_runtime_1.jsxs)("span", { className: "active-filter", children: ["\uD83D\uDCC1", " ", (_a = categories.find((c) => c.slug === selectedCategory)) === null || _a === void 0 ? void 0 : _a.name, (0, jsx_runtime_1.jsx)("button", { onClick: () => onCategoryClick(categories.find((c) => c.slug === selectedCategory)), children: "\u2715" })] })), selectedTags.map((tagSlug) => {
                                            const tag = tags.find((t) => t.slug === tagSlug);
                                            return tag ? ((0, jsx_runtime_1.jsxs)("span", { className: "active-filter", children: ["\uD83C\uDFF7\uFE0F ", tag.name, (0, jsx_runtime_1.jsx)("button", { onClick: () => onTagClick(tag), children: "\u2715" })] }, tagSlug)) : null;
                                        })] })] })), categories.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "filter-section", children: [(0, jsx_runtime_1.jsxs)("h4", { className: "filter-section-title", children: [(0, jsx_runtime_1.jsx)("span", { className: "section-icon", children: "\uD83D\uDCC1" }), "Categories"] }), (0, jsx_runtime_1.jsx)("div", { className: "filter-items", children: categories.map((category) => ((0, jsx_runtime_1.jsxs)("div", { className: `filter-item ${selectedCategory === category.slug ? "selected" : ""}`, onClick: () => onCategoryClick(category), children: [(0, jsx_runtime_1.jsx)("span", { className: "filter-item-name", children: category.name }), category.description && ((0, jsx_runtime_1.jsx)("span", { className: "filter-item-desc", children: category.description })), selectedCategory === category.slug && ((0, jsx_runtime_1.jsx)("span", { className: "selected-indicator", children: "\u2713" }))] }, category.id))) })] })), tags.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "filter-section", children: [(0, jsx_runtime_1.jsxs)("h4", { className: "filter-section-title", children: [(0, jsx_runtime_1.jsx)("span", { className: "section-icon", children: "\uD83C\uDFF7\uFE0F" }), "Tags"] }), (0, jsx_runtime_1.jsx)("div", { className: "filter-items", children: tags.map((tag) => ((0, jsx_runtime_1.jsxs)("div", { className: `filter-item ${selectedTags.includes(tag.slug) ? "selected" : ""}`, onClick: () => onTagClick(tag), children: [(0, jsx_runtime_1.jsx)("span", { className: "filter-item-name", children: tag.name }), selectedTags.includes(tag.slug) && ((0, jsx_runtime_1.jsx)("span", { className: "selected-indicator", children: "\u2713" }))] }, tag.id))) })] })), categories.length === 0 && tags.length === 0 && ((0, jsx_runtime_1.jsx)("div", { className: "no-filters", children: (0, jsx_runtime_1.jsx)("p", { children: "No filters available" }) }))] }) }), isOpen && ((0, jsx_runtime_1.jsx)("div", { className: "filter-overlay", onClick: () => setIsOpen(false) }))] }));
}
function CompactFilterBar({ categories, tags, selectedCategory, selectedTags, onCategoryClick, onTagClick, onClearFilters, className = "", }) {
    const hasActiveFilters = selectedCategory || selectedTags.length > 0;
    return ((0, jsx_runtime_1.jsxs)("div", { className: `compact-filter-bar ${className}`, children: [categories.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "quick-filters", children: [(0, jsx_runtime_1.jsx)("span", { className: "quick-filter-label", children: "\uD83D\uDCC1" }), (0, jsx_runtime_1.jsxs)("div", { className: "quick-filter-items", children: [categories.slice(0, 4).map((category) => ((0, jsx_runtime_1.jsx)("button", { className: `quick-filter-btn ${selectedCategory === category.slug ? "active" : ""}`, onClick: () => onCategoryClick(category), style: { borderColor: category.color }, children: category.name }, category.id))), categories.length > 4 && ((0, jsx_runtime_1.jsxs)("span", { className: "more-indicator", children: ["+", categories.length - 4, " more"] }))] })] })), tags.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "quick-filters", children: [(0, jsx_runtime_1.jsx)("span", { className: "quick-filter-label", children: "\uD83C\uDFF7\uFE0F" }), (0, jsx_runtime_1.jsxs)("div", { className: "quick-filter-items", children: [tags.slice(0, 6).map((tag) => ((0, jsx_runtime_1.jsx)("button", { className: `quick-filter-btn ${selectedTags.includes(tag.slug) ? "active" : ""}`, onClick: () => onTagClick(tag), style: { borderColor: tag.color }, children: tag.name }, tag.id))), tags.length > 6 && ((0, jsx_runtime_1.jsxs)("span", { className: "more-indicator", children: ["+", tags.length - 6, " more"] }))] })] })), hasActiveFilters && ((0, jsx_runtime_1.jsxs)("button", { onClick: onClearFilters, className: "clear-filters-compact", children: ["Clear filters (", (selectedCategory ? 1 : 0) + selectedTags.length, ")"] }))] }));
}