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

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

"use strict";
"use client";
var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SearchBar = SearchBar;
exports.SearchWithFilters = SearchWithFilters;
const jsx_runtime_1 = require("react/jsx-runtime");
const FilterControls_1 = require("./FilterControls");
function SearchBar({ searchQuery, onSearchChange, loading = false, totalResults = 0, hasSearched = false, placeholder = "Search posts...", className = "", }) {
    const handleClear = () => {
        onSearchChange("");
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: `search-bar ${className}`, children: [(0, jsx_runtime_1.jsxs)("div", { className: "search-input-container", children: [(0, jsx_runtime_1.jsx)("div", { className: "search-icon", children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "search-spinner" })) : ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "11", cy: "11", r: "8" }), (0, jsx_runtime_1.jsx)("path", { d: "m21 21-4.35-4.35" })] })) }), (0, jsx_runtime_1.jsx)("input", { type: "text", value: searchQuery, onChange: (e) => onSearchChange(e.target.value), placeholder: placeholder, className: "search-input" }), searchQuery && ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: handleClear, className: "search-clear", title: "Clear search", children: (0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [(0, jsx_runtime_1.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), (0, jsx_runtime_1.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) }))] }), hasSearched && ((0, jsx_runtime_1.jsx)("div", { className: "search-results-info", children: totalResults === 0 ? ((0, jsx_runtime_1.jsxs)("span", { className: "no-results", children: ["No posts found for \"", searchQuery, "\""] })) : ((0, jsx_runtime_1.jsxs)("span", { className: "results-count", children: [totalResults, " ", totalResults === 1 ? "post" : "posts", " found", searchQuery && ` for "${searchQuery}"`] })) }))] }));
}
function SearchWithFilters(_a) {
    var { categories = [], tags = [], selectedCategory = "", selectedTags = [], onCategoryClick, onTagClick, onClearFilters } = _a, searchProps = __rest(_a, ["categories", "tags", "selectedCategory", "selectedTags", "onCategoryClick", "onTagClick", "onClearFilters"]);
    return ((0, jsx_runtime_1.jsxs)("div", { className: "search-with-filters", children: [(0, jsx_runtime_1.jsx)(SearchBar, Object.assign({}, searchProps)), (categories.length > 0 || tags.length > 0) &&
                onCategoryClick &&
                onTagClick &&
                onClearFilters && ((0, jsx_runtime_1.jsx)(FilterControls_1.FilterControls, { categories: categories, tags: tags, selectedCategory: selectedCategory, selectedTags: selectedTags, onCategoryClick: onCategoryClick, onTagClick: onTagClick, onClearFilters: onClearFilters }))] }));
}