@theguild/components
Version:
174 lines (173 loc) • 6.03 kB
JavaScript
"use client";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { isValidElement, useMemo, useState } from "react";
import fuzzy from "fuzzy";
import { Tabs } from "nextra/components";
import { cn } from "../cn";
import { Heading } from "./heading";
import { CloseIcon, SearchIcon } from "./icons";
import { MarketplaceList } from "./marketplace-list";
import { Tag, TagsContainer } from "./tag";
const renderQueryPlaceholder = (placeholder, query) => {
if (!query || isValidElement(placeholder)) {
return placeholder;
}
const subStrings = placeholder.split("{query}");
return /* @__PURE__ */ jsxs(Fragment, { children: [
subStrings[0],
" ",
/* @__PURE__ */ jsxs("strong", { children: [
'"',
query,
'"'
] }),
" ",
subStrings[1]
] });
};
const MarketplaceSearch = ({
title,
tagsFilter,
placeholder,
primaryList,
secondaryList,
queryList,
className,
colorScheme = "neutral"
}) => {
const [query, setQuery] = useState("");
const handleTagClick = (tagName) => {
if (query.includes(`#${tagName}`)) {
setQuery(query.replace(`#${tagName}`, "").trim());
} else {
setQuery((prev) => `${prev} #${tagName}`);
}
};
const items = useMemo(() => {
if (query && queryList) {
const tags = query.split(/\s+/).filter((e) => e.startsWith("#")).map((e) => e.replace("#", ""));
let filteredItems = queryList.items;
if (tags.length > 0) {
filteredItems = queryList.items.filter((item) => tags.every((e) => item.tags?.includes(e)));
}
const matchedResults = fuzzy.filter(
// Removes tags and all special characters from the query string for better fuzzy matching
// query
query.replace(/#\w+/gi, "").replace(/[^\w\s]/gi, "").trim(),
// Mapping the queryList items into a list of strings including the titles
filteredItems.map((e) => e.title)
).map((e) => e.original.toLowerCase());
return queryList.items.filter((e) => matchedResults.includes(e.title.toLowerCase()));
}
}, [query, queryList]);
return /* @__PURE__ */ jsx(
"section",
{
className: cn(
// --bg and --fg are defined in style.css under .MarketplaceSearch
"MarketplaceSearch",
colorScheme,
"bg-[--bg]",
className
),
children: /* @__PURE__ */ jsxs("div", { className: "container max-w-[90rem] py-12", children: [
/* @__PURE__ */ jsx(Heading, { as: "h1", className: "mb-4 text-[32px] text-[--fg]", size: "sm", children: title }),
tagsFilter && /* @__PURE__ */ jsx(TagsContainer, { focusgroup: "horizontal", children: tagsFilter.map((tagName, i) => /* @__PURE__ */ jsx(
Tag,
{
selected: query.includes(`#${tagName}`),
onClick: () => handleTagClick(tagName),
tabIndex: i === 0 ? 0 : -1,
children: tagName
},
tagName
)) }),
/* @__PURE__ */ jsx(
MarketplaceSearchInput,
{
onChange: setQuery,
value: query,
placeholder,
className: "mt-4"
}
),
items && queryList ? /* @__PURE__ */ jsx(
MarketplaceList,
{
title: queryList.title,
items,
placeholder: renderQueryPlaceholder(queryList.placeholder, query),
pagination: queryList.pagination,
colorScheme
}
) : /* @__PURE__ */ jsx(
MarketplaceSearchTabs,
{
tabs: [primaryList, secondaryList],
colorScheme,
className: "mt-8"
}
)
] })
}
);
};
function MarketplaceSearchInput({
onChange,
value,
placeholder,
className
}) {
return /* @__PURE__ */ jsx("div", { className: "border-b border-[--fg-60]", children: /* @__PURE__ */ jsxs("div", { className: cn("hive-focus-within flex items-center rounded px-2", className), children: [
/* @__PURE__ */ jsx(SearchIcon, { className: "text-[--fg-80]" }),
/* @__PURE__ */ jsx(
"input",
{
value,
type: "search",
placeholder,
onChange: (event) => onChange(event.currentTarget.value),
className: "ml-2 w-full border-0 bg-transparent py-2 font-medium text-[--fg] outline-none placeholder:text-[--fg-60] [&::-webkit-search-cancel-button]:hidden"
}
),
/* @__PURE__ */ jsx(
"button",
{
onClick: () => onChange(""),
tabIndex: -1,
className: "flex size-6 items-center justify-center rounded-sm",
children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-5 text-[--fg-80]" })
}
)
] }) });
}
function MarketplaceSearchTabs({
tabs: lists,
colorScheme,
className
}) {
const items = lists.filter(
(list) => list?.title != null
);
return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx(
Tabs,
{
items: items.map((list) => list.title),
className: "grid grid-cols-2 gap-1 rounded-2xl border-none bg-neutral-800 [.green_&]:!bg-green-900 [.light_&]:bg-neutral-100 [.light_&]:text-green-200",
tabClassName: cn(
"rounded-2xl border-none p-3 text-sm font-medium text-neutral-200 hover:bg-neutral-700/50 hover:text-white aria-selected:!cursor-default aria-selected:!bg-[--fg] aria-selected:!text-[--bg] sm:p-4 sm:text-base [.green_&]:!bg-green-900 [.green_&]:!text-green-200 [.green_&]:hover:!bg-green-700/25 [.green_&]:hover:!text-green-100 [.green_&]:aria-selected:!bg-green-300 [.green_&]:aria-selected:!text-green-800 [.light_&]:bg-neutral-100 [.light_&]:text-neutral-800 [.light_&]:hover:bg-neutral-200/80 [.light_&]:hover:text-neutral-900"
),
children: items.map((list, i) => /* @__PURE__ */ jsx(Tabs.Tab, { tabIndex: -1, children: /* @__PURE__ */ jsx(
MarketplaceList,
{
...list,
title: void 0,
colorScheme
}
) }, i))
}
) });
}
export {
MarketplaceSearch
};