@mbpockets/shared-ui 0.1.18

package/dist/SearchPage.cjs

@@ -0,0 +1,737 @@
+"use client";
+'use strict';
+
+var Typography2 = require('@mui/material/Typography');
+var FormControl = require('@mui/material/FormControl');
+var RadioGroup = require('@mui/material/RadioGroup');
+var FormControlLabel = require('@mui/material/FormControlLabel');
+var Radio = require('@mui/material/Radio');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Box2 = require('@mui/material/Box');
+var Autocomplete = require('@mui/material/Autocomplete');
+var TextField = require('@mui/material/TextField');
+var Popper = require('@mui/material/Popper');
+var Divider = require('@mui/material/Divider');
+var FormGroup = require('@mui/material/FormGroup');
+var Checkbox = require('@mui/material/Checkbox');
+var Button = require('@mui/material/Button');
+var SearchIcon = require('@mui/icons-material/Search');
+var Avatar = require('@mui/material/Avatar');
+var material = require('@mui/material');
+var CasinoIcon = require('@mui/icons-material/Casino');
+var CalendarTodayIcon = require('@mui/icons-material/CalendarToday');
+var LocationOnIcon = require('@mui/icons-material/LocationOn');
+var EventIcon = require('@mui/icons-material/Event');
+var Grid = require('@mui/material/Grid');
+var Card2 = require('@mui/material/Card');
+var CardHeader = require('@mui/material/CardHeader');
+var CardContent2 = require('@mui/material/CardContent');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Typography2__default = /*#__PURE__*/_interopDefault(Typography2);
+var FormControl__default = /*#__PURE__*/_interopDefault(FormControl);
+var RadioGroup__default = /*#__PURE__*/_interopDefault(RadioGroup);
+var FormControlLabel__default = /*#__PURE__*/_interopDefault(FormControlLabel);
+var Radio__default = /*#__PURE__*/_interopDefault(Radio);
+var React__default = /*#__PURE__*/_interopDefault(React);
+var Box2__default = /*#__PURE__*/_interopDefault(Box2);
+var Autocomplete__default = /*#__PURE__*/_interopDefault(Autocomplete);
+var TextField__default = /*#__PURE__*/_interopDefault(TextField);
+var Popper__default = /*#__PURE__*/_interopDefault(Popper);
+var Divider__default = /*#__PURE__*/_interopDefault(Divider);
+var FormGroup__default = /*#__PURE__*/_interopDefault(FormGroup);
+var Checkbox__default = /*#__PURE__*/_interopDefault(Checkbox);
+var Button__default = /*#__PURE__*/_interopDefault(Button);
+var SearchIcon__default = /*#__PURE__*/_interopDefault(SearchIcon);
+var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
+var CasinoIcon__default = /*#__PURE__*/_interopDefault(CasinoIcon);
+var CalendarTodayIcon__default = /*#__PURE__*/_interopDefault(CalendarTodayIcon);
+var LocationOnIcon__default = /*#__PURE__*/_interopDefault(LocationOnIcon);
+var EventIcon__default = /*#__PURE__*/_interopDefault(EventIcon);
+var Grid__default = /*#__PURE__*/_interopDefault(Grid);
+var Card2__default = /*#__PURE__*/_interopDefault(Card2);
+var CardHeader__default = /*#__PURE__*/_interopDefault(CardHeader);
+var CardContent2__default = /*#__PURE__*/_interopDefault(CardContent2);
+
+// src/components/SearchPage/Filters/SortOptions.tsx
+var SORT_OPTIONS = [
+  { id: "relevance", label: "Relevance" },
+  { id: "newest", label: "Newest" },
+  { id: "popular", label: "Most Popular" }
+];
+var SortOptions = ({
+  defaultValue = "relevance",
+  onChange
+}) => {
+  const handleSortChange = (event) => {
+    onChange == null ? void 0 : onChange(event.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography2__default.default, { variant: "h6", gutterBottom: true, children: "Sort By" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormControl__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(RadioGroup__default.default, { defaultValue, onChange: handleSortChange, children: SORT_OPTIONS.map((option) => /* @__PURE__ */ jsxRuntime.jsx(
+      FormControlLabel__default.default,
+      {
+        value: option.id,
+        control: /* @__PURE__ */ jsxRuntime.jsx(Radio__default.default, {}),
+        label: option.label
+      },
+      option.id
+    )) }) })
+  ] });
+};
+var SortOptions_default = SortOptions;
+var TagsFilter = ({
+  onChange,
+  tags: Tags = []
+}) => {
+  const [mustHaveTags, setMustHaveTags] = React__default.default.useState([]);
+  const [mustNotHaveTags, setMustNotHaveTags] = React__default.default.useState([]);
+  const [shouldHaveAtLeastOneTags, setShouldHaveAtLeastOneTags] = React__default.default.useState([]);
+  Tags = !!Tags ? Tags : [];
+  const [inputValues, setInputValues] = React__default.default.useState({
+    mustHave: "",
+    mustNotHave: "",
+    shouldHaveAtLeastOne: ""
+  });
+  const tagOptions = React__default.default.useMemo(() => {
+    console.log("available tags: " + JSON.stringify(Tags));
+    console.log(!Tags);
+    if (!Tags || Tags.length == 0 || !Tags.map) return [];
+    return Tags.map((tag) => ({
+      value: tag.id,
+      label: tag.label
+    }));
+  }, [Tags]);
+  const handleTagChange = (tagId, category) => {
+    let newTags = [];
+    switch (category) {
+      case "mustHave":
+        newTags = mustHaveTags.includes(tagId) ? mustHaveTags.filter((id) => id !== tagId) : [...mustHaveTags, tagId];
+        setMustHaveTags(newTags);
+        break;
+      case "mustNotHave":
+        newTags = mustNotHaveTags.includes(tagId) ? mustNotHaveTags.filter((id) => id !== tagId) : [...mustNotHaveTags, tagId];
+        setMustNotHaveTags(newTags);
+        break;
+      case "shouldHaveAtLeastOne":
+        newTags = shouldHaveAtLeastOneTags.includes(tagId) ? shouldHaveAtLeastOneTags.filter((id) => id !== tagId) : [...shouldHaveAtLeastOneTags, tagId];
+        setShouldHaveAtLeastOneTags(newTags);
+        break;
+    }
+    if (onChange) {
+      onChange({
+        mustHave: category === "mustHave" ? newTags : mustHaveTags,
+        mustNotHave: category === "mustNotHave" ? newTags : mustNotHaveTags,
+        shouldHaveAtLeastOne: category === "shouldHaveAtLeastOne" ? newTags : shouldHaveAtLeastOneTags
+      });
+    }
+  };
+  const renderSelectedTags = (selectedTags, category) => {
+    const tagValues = [];
+    if (!Tags || Tags.length == 0 || !Tags.map) return null;
+    Tags.forEach((tag) => {
+      if (selectedTags.includes(tag.id)) {
+        tagValues.push(tag);
+      }
+    });
+    if (tagValues.length === 0) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: tagValues.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+        style: {
+          background: tag.color || "#bfbcbb",
+          color: "white",
+          textShadow: "black 0.2em 0.2em 0.4em"
+        },
+        children: [
+          tag.label,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleTagChange(tag.id, category),
+              className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
+              children: "\xD7"
+            }
+          )
+        ]
+      },
+      tag.id
+    )) });
+  };
+  const createTagSelector = (category, label) => {
+    const selectedTags = category === "mustHave" ? mustHaveTags : category === "mustNotHave" ? mustNotHaveTags : shouldHaveAtLeastOneTags;
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography2__default.default, { variant: "subtitle1", gutterBottom: true, sx: { mt: 2 }, children: label }),
+      renderSelectedTags(selectedTags, category),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Autocomplete__default.default,
+        {
+          options: tagOptions,
+          filterOptions: (options, state) => {
+            const tagsToExclude = /* @__PURE__ */ new Set();
+            selectedTags.forEach((id) => tagsToExclude.add(id));
+            if (category !== "mustHave") {
+              mustHaveTags.forEach((id) => tagsToExclude.add(id));
+            }
+            if (category !== "mustNotHave") {
+              mustNotHaveTags.forEach((id) => tagsToExclude.add(id));
+            }
+            if (category !== "shouldHaveAtLeastOne") {
+              shouldHaveAtLeastOneTags.forEach((id) => tagsToExclude.add(id));
+            }
+            return options.filter(
+              (option) => (
+                // Exclude options already selected in any category
+                !tagsToExclude.has(option.value) && // Filter based on user input
+                option.label.toLowerCase().includes(state.inputValue.toLowerCase())
+              )
+            ).slice(0, 3);
+          },
+          value: null,
+          inputValue: inputValues[category],
+          onInputChange: (event, newInputValue) => {
+            if (event && event.type === "change") {
+              setInputValues({
+                ...inputValues,
+                [category]: newInputValue
+              });
+            }
+          },
+          onChange: (event, newValue) => {
+            if (newValue) {
+              handleTagChange(newValue.value, category);
+            }
+            setInputValues({
+              ...inputValues,
+              [category]: ""
+            });
+          },
+          slots: { popper: CustomPopper },
+          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField__default.default, { ...params, label: `Select ${label}` })
+        },
+        `${category}-${selectedTags.join("-")}`
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography2__default.default, { variant: "h6", gutterBottom: true, children: "Tags" }),
+    createTagSelector("mustHave", "Must Have Tags"),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, { sx: { my: 2 } }),
+    createTagSelector("mustNotHave", "Must Not Have Tags"),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, { sx: { my: 2 } }),
+    createTagSelector("shouldHaveAtLeastOne", "Should Contain At Least One Tag")
+  ] });
+};
+var CustomPopper = (props) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popper__default.default,
+    {
+      ...props,
+      modifiers: [
+        {
+          name: "preventOverflow",
+          options: {
+            boundary: "viewport"
+            // Prevent the Popper from going outside the viewport
+          }
+        },
+        {
+          name: "offset",
+          options: {
+            offset: [0, -10]
+            // Set negative vertical offset (adjust value as needed)
+          }
+        }
+      ],
+      placement: "top-start"
+    }
+  );
+};
+var TagsFilter_default = TagsFilter;
+var FILTER_TYPES = [
+  { id: "player", label: "Players" },
+  { id: "event", label: "Events", disabled: true },
+  { id: "table", label: "Tables", disabled: true }
+];
+var TypeFilter = ({ onChange }) => {
+  const [selectedTypes, setSelectedTypes] = React__default.default.useState([]);
+  const handleTypeChange = (typeId) => {
+    const newSelectedTypes = selectedTypes.includes(typeId) ? selectedTypes.filter((id) => id !== typeId) : [...selectedTypes, typeId];
+    setSelectedTypes(newSelectedTypes);
+    onChange == null ? void 0 : onChange(newSelectedTypes);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Typography2__default.default, { variant: "h6", gutterBottom: true, children: "Type" }),
+    /* @__PURE__ */ jsxRuntime.jsx(FormGroup__default.default, { children: FILTER_TYPES.map((type) => /* @__PURE__ */ jsxRuntime.jsx(
+      FormControlLabel__default.default,
+      {
+        control: /* @__PURE__ */ jsxRuntime.jsx(
+          Checkbox__default.default,
+          {
+            checked: selectedTypes.includes(type.id),
+            onChange: () => handleTypeChange(type.id),
+            disabled: type.disabled
+          }
+        ),
+        label: type.label
+      },
+      type.id
+    )) })
+  ] });
+};
+var TypeFilter_default = TypeFilter;
+var FiltersContainer = ({
+  onTypeChange,
+  onTagChange,
+  onSubmit,
+  tags
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TypeFilter_default, { onChange: onTypeChange }),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TagsFilter_default,
+      {
+        tags,
+        onChange: onTagChange
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Divider__default.default, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", justifyContent: "center", mt: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button__default.default,
+      {
+        variant: "contained",
+        color: "primary",
+        size: "large",
+        startIcon: /* @__PURE__ */ jsxRuntime.jsx(SearchIcon__default.default, {}),
+        onClick: onSubmit,
+        sx: {
+          width: "100%",
+          py: 1.5,
+          borderRadius: 2,
+          boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.1)",
+          background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+          "&:hover": {
+            background: "linear-gradient(135deg, rgba(25, 118, 210, 0.9), rgba(25, 118, 210, 1))",
+            boxShadow: "0px 6px 15px rgba(0, 0, 0, 0.2)"
+          }
+        },
+        children: "Search"
+      }
+    ) })
+  ] });
+};
+var FiltersContainer_default = FiltersContainer;
+function generateTagsDisplay(tag) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      style: {
+        marginTop: "6px",
+        marginRight: "6px",
+        marginBottom: "6px",
+        background: tag.color || "#bfbcbb",
+        color: "white",
+        textShadow: "black 0.2em 0.2em 0.4em"
+      },
+      children: tag.label
+    },
+    tag.id
+  );
+}
+var BaseSearchResultCard = ({
+  result,
+  onClick,
+  children,
+  icon,
+  tags
+}) => {
+  const handleClick = () => {
+    if (onClick) {
+      onClick(result.id);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Card,
+    {
+      elevation: 6,
+      sx: {
+        width: "100%",
+        cursor: onClick ? "pointer" : "default",
+        boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.15)",
+        transition: "box-shadow 0.3s ease-in-out",
+        "&:hover": {
+          boxShadow: "0px 12px 28px rgba(0, 0, 0, 0.2)"
+        },
+        marginBottom: 2
+      },
+      onClick: handleClick,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { sx: { display: "flex", alignItems: "flex-start" }, children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mr: 2, display: "flex", alignItems: "center", pt: 0.5 }, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", sx: { mb: 1 }, children: result.title }),
+          children,
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body1", children: result.description }),
+          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: {
+            display: "block",
+            whiteSpace: "nowrap",
+            overflow: "hidden",
+            textOverflow: "clip",
+            pl: 0.5
+            // Add some padding to prevent clipping of the leftmost tag
+          }, children: (() => {
+            const MAX_VISIBLE = 5;
+            const tagObjs = result.tags.map((tagId) => tags.find((t) => t.id === tagId)).filter((t) => Boolean(t));
+            const visible = tagObjs.slice(0, MAX_VISIBLE);
+            const hiddenCount = Math.max(tagObjs.length - visible.length, 0);
+            return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              visible.map((tag) => generateTagsDisplay(tag)),
+              hiddenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+                  style: {
+                    marginTop: "6px",
+                    marginRight: "6px",
+                    marginBottom: "6px",
+                    background: "#9e9e9e",
+                    color: "white",
+                    textShadow: "black 0.2em 0.2em 0.4em"
+                  },
+                  children: [
+                    "+",
+                    hiddenCount,
+                    " more"
+                  ]
+                }
+              )
+            ] });
+          })() }) })
+        ] })
+      ] })
+    }
+  );
+};
+var BaseSearchResultCard_default = BaseSearchResultCard;
+var PlayerResultCard = ({
+  result,
+  onClick,
+  tags
+}) => {
+  const firstLetter = result.title.charAt(0).toUpperCase();
+  const getAvatarColor = (name) => {
+    const colors = [
+      "#F44336",
+      "#E91E63",
+      "#9C27B0",
+      "#673AB7",
+      "#3F51B5",
+      "#2196F3",
+      "#03A9F4",
+      "#00BCD4",
+      "#009688",
+      "#4CAF50",
+      "#8BC34A",
+      "#CDDC39",
+      "#FFEB3B",
+      "#FFC107",
+      "#FF9800",
+      "#FF5722"
+    ];
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+      hash = name.charCodeAt(i) + ((hash << 5) - hash);
+    }
+    return colors[Math.abs(hash) % colors.length];
+  };
+  const avatarColor = getAvatarColor(result.title);
+  const playerIcon = /* @__PURE__ */ jsxRuntime.jsx(
+    Avatar__default.default,
+    {
+      src: result.imageUrl,
+      alt: result.title,
+      sx: {
+        width: 40,
+        height: 40,
+        bgcolor: !result.imageUrl ? avatarColor : void 0
+      },
+      children: !result.imageUrl && firstLetter
+    }
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: playerIcon, tags });
+};
+var PlayerResultCard_default = PlayerResultCard;
+var TableResultCard = ({ result, tags, onClick }) => {
+  const capacity = result.capacity || 1;
+  const numPlayers = result.numPlayers || 0;
+  const occupancy = numPlayers / capacity * 100;
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard, { result, tags, onClick, icon: /* @__PURE__ */ jsxRuntime.jsx(CasinoIcon__default.default, { color: "primary" }), children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 0.5 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(material.Typography, { variant: "body2", color: "text.secondary", children: [
+        "Players: ",
+        numPlayers,
+        " / ",
+        capacity
+      ] }),
+      result.dungeonMaster ? /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.LinearProgress, { variant: "determinate", value: occupancy, sx: { height: 8, borderRadius: 4 } })
+  ] }) });
+};
+var TableResultCard_default = TableResultCard;
+var EventResultCard = ({
+  result,
+  onClick,
+  tags
+}) => {
+  const formatDate = (dateString) => {
+    const options = {
+      weekday: "long",
+      year: "numeric",
+      month: "long",
+      day: "numeric"
+    };
+    try {
+      const date = new Date(dateString);
+      return date.toLocaleDateString("en-US", options);
+    } catch {
+      return dateString;
+    }
+  };
+  const formattedDate = result.date ? formatDate(result.date) : "Date TBD";
+  const location = result.location || "Location TBD";
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, icon: /* @__PURE__ */ jsxRuntime.jsx(EventIcon__default.default, { color: "primary" }), tags, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", mb: 0.5 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(CalendarTodayIcon__default.default, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: formattedDate })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(LocationOnIcon__default.default, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
+      /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", color: "text.secondary", children: location })
+    ] })
+  ] }) });
+};
+var EventResultCard_default = EventResultCard;
+var ResultsContainer = ({
+  results,
+  onResultClick,
+  tags
+}) => {
+  if (results.length === 0 || !results.map) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { textAlign: "center", py: 4 }, children: "No results found. Try adjusting your filters." });
+  }
+  const onPlayerClick = (id) => {
+    onResultClick == null ? void 0 : onResultClick(id, "player");
+  };
+  const onTableClick = (id) => {
+    onResultClick == null ? void 0 : onResultClick(id, "table");
+  };
+  const onEventClick = (id) => {
+    onResultClick == null ? void 0 : onResultClick(id, "event");
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: results.map((result) => {
+    switch (result.type) {
+      case "player":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          PlayerResultCard_default,
+          {
+            result,
+            onClick: onPlayerClick,
+            tags
+          },
+          result.id
+        );
+      case "table":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          TableResultCard_default,
+          {
+            result,
+            onClick: onTableClick,
+            tags
+          },
+          result.id
+        );
+      case "event":
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          EventResultCard_default,
+          {
+            result,
+            onClick: onEventClick,
+            tags
+          },
+          result.id
+        );
+      default:
+        console.error(`Unknown result type: ${result.type}`);
+        return null;
+    }
+  }) });
+};
+var ResultsContainer_default = ResultsContainer;
+var ScrollableResultsList = ({
+  results,
+  tags,
+  maxHeight = 400,
+  onResultClick,
+  emptyText
+}) => {
+  const hasResults = Array.isArray(results) && results.length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { maxHeight, overflowY: "auto", pr: 1 }, children: hasResults ? /* @__PURE__ */ jsxRuntime.jsx(ResultsContainer_default, { results, onResultClick, tags }) : /* @__PURE__ */ jsxRuntime.jsx(Box2__default.default, { sx: { textAlign: "center", py: 2 }, children: emptyText || "No results to display." }) });
+};
+var ScrollableResultsList_default = ScrollableResultsList;
+var PlayersScrollableList = ({
+  results,
+  tags,
+  maxHeight,
+  onResultClick
+}) => {
+  const players = (results || []).filter((r) => (r == null ? void 0 : r.type) === "player");
+  const handleClick = (id) => onResultClick == null ? void 0 : onResultClick(id);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollableResultsList_default,
+    {
+      results: players,
+      tags,
+      maxHeight,
+      onResultClick: (id, type) => {
+        if (type === "player") handleClick(id);
+      }
+    }
+  );
+};
+var PlayersScrollableList_default = PlayersScrollableList;
+var SearchResultCard = ({
+  result,
+  onClick,
+  tags
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(BaseSearchResultCard_default, { result, onClick, tags });
+};
+var SearchResultCard_default = SearchResultCard;
+function SearchPageLayout({
+  results,
+  title = "Search Results",
+  onTypeChange,
+  onTagChange,
+  onSubmit,
+  onResultClick,
+  validTags,
+  allTags
+}) {
+  "use client";
+  const theme = material.useTheme();
+  const isMobile = material.useMediaQuery(theme.breakpoints.down("md"));
+  return /* @__PURE__ */ jsxRuntime.jsxs(Box2__default.default, { sx: { padding: 2 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Card2__default.default, { sx: { marginBottom: 2 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+      CardHeader__default.default,
+      {
+        title,
+        style: {
+          background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+          color: "#FFFFFF",
+          fontSize: "1.5rem",
+          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(Grid__default.default, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { size: { xs: 12, md: 3 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card2__default.default, { sx: { marginBottom: isMobile ? 2 : 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CardHeader__default.default,
+          {
+            title: "Filters",
+            style: {
+              background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+              color: "#FFFFFF",
+              fontSize: "1.5rem",
+              textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(CardContent2__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          FiltersContainer_default,
+          {
+            onTypeChange,
+            onTagChange,
+            onSubmit,
+            tags: validTags
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { size: { xs: 12, md: 9 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card2__default.default, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          CardHeader__default.default,
+          {
+            title: "Results",
+            style: {
+              background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+              color: "#FFFFFF",
+              fontSize: "1.5rem",
+              textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(CardContent2__default.default, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          ResultsContainer_default,
+          {
+            results,
+            onResultClick,
+            tags: allTags
+          }
+        ) })
+      ] }) })
+    ] })
+  ] });
+}
+var TablesScrollableList = ({
+  results,
+  tags,
+  maxHeight,
+  onResultClick,
+  sortBy = "availability"
+}) => {
+  const tables = (results || []).filter((r) => (r == null ? void 0 : r.type) === "table");
+  const getAvailableSlots = (r) => {
+    const capacity = typeof r.capacity === "number" ? r.capacity : 0;
+    const playersCount = typeof r.numPlayers === "number" ? r.numPlayers : 0;
+    return Math.max(capacity - playersCount, 0);
+  };
+  const sortedTables = sortBy === "availability" ? [...tables].sort((a, b) => getAvailableSlots(b) - getAvailableSlots(a)) : tables;
+  const handleClick = (id) => onResultClick == null ? void 0 : onResultClick(id);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScrollableResultsList_default,
+    {
+      results: sortedTables,
+      tags,
+      maxHeight,
+      onResultClick: (id, type) => {
+        if (type === "table") handleClick(id);
+      }
+    }
+  );
+};
+var TablesScrollableList_default = TablesScrollableList;
+
+exports.BaseSearchResultCard = BaseSearchResultCard_default;
+exports.EventResultCard = EventResultCard_default;
+exports.FiltersContainer = FiltersContainer_default;
+exports.PlayerResultCard = PlayerResultCard_default;
+exports.PlayersScrollableList = PlayersScrollableList_default;
+exports.ResultsContainer = ResultsContainer_default;
+exports.ScrollableResultsList = ScrollableResultsList_default;
+exports.SearchPageLayout = SearchPageLayout;
+exports.SearchResultCard = SearchResultCard_default;
+exports.SortOptions = SortOptions_default;
+exports.TableResultCard = TableResultCard_default;
+exports.TablesScrollableList = TablesScrollableList_default;
+exports.TagsFilter = TagsFilter_default;
+exports.TypeFilter = TypeFilter_default;
+//# sourceMappingURL=SearchPage.cjs.map
+//# sourceMappingURL=SearchPage.cjs.map