@mbpockets/shared-ui 0.1.18

package/dist/SearchPage.mjs

@@ -0,0 +1,695 @@
+"use client";
+import Typography2 from '@mui/material/Typography';
+import FormControl from '@mui/material/FormControl';
+import RadioGroup from '@mui/material/RadioGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Radio from '@mui/material/Radio';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import React from 'react';
+import Box2 from '@mui/material/Box';
+import Autocomplete from '@mui/material/Autocomplete';
+import TextField from '@mui/material/TextField';
+import Popper from '@mui/material/Popper';
+import Divider from '@mui/material/Divider';
+import FormGroup from '@mui/material/FormGroup';
+import Checkbox from '@mui/material/Checkbox';
+import Button from '@mui/material/Button';
+import SearchIcon from '@mui/icons-material/Search';
+import Avatar from '@mui/material/Avatar';
+import { Card, CardContent, Box, Typography, Chip, LinearProgress, useTheme, useMediaQuery } from '@mui/material';
+import CasinoIcon from '@mui/icons-material/Casino';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import EventIcon from '@mui/icons-material/Event';
+import Grid from '@mui/material/Grid';
+import Card2 from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent2 from '@mui/material/CardContent';
+
+// 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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography2, { variant: "h6", gutterBottom: true, children: "Sort By" }),
+    /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(RadioGroup, { defaultValue, onChange: handleSortChange, children: SORT_OPTIONS.map((option) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        value: option.id,
+        control: /* @__PURE__ */ jsx(Radio, {}),
+        label: option.label
+      },
+      option.id
+    )) }) })
+  ] });
+};
+var SortOptions_default = SortOptions;
+var TagsFilter = ({
+  onChange,
+  tags: Tags = []
+}) => {
+  const [mustHaveTags, setMustHaveTags] = React.useState([]);
+  const [mustNotHaveTags, setMustNotHaveTags] = React.useState([]);
+  const [shouldHaveAtLeastOneTags, setShouldHaveAtLeastOneTags] = React.useState([]);
+  Tags = !!Tags ? Tags : [];
+  const [inputValues, setInputValues] = React.useState({
+    mustHave: "",
+    mustNotHave: "",
+    shouldHaveAtLeastOne: ""
+  });
+  const tagOptions = React.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__ */ jsx(Box2, { sx: { display: "flex", flexWrap: "wrap", gap: 1, mb: 2 }, children: tagValues.map((tag) => /* @__PURE__ */ 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__ */ 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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Typography2, { variant: "subtitle1", gutterBottom: true, sx: { mt: 2 }, children: label }),
+      renderSelectedTags(selectedTags, category),
+      /* @__PURE__ */ jsx(
+        Autocomplete,
+        {
+          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__ */ jsx(TextField, { ...params, label: `Select ${label}` })
+        },
+        `${category}-${selectedTags.join("-")}`
+      )
+    ] });
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography2, { variant: "h6", gutterBottom: true, children: "Tags" }),
+    createTagSelector("mustHave", "Must Have Tags"),
+    /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
+    createTagSelector("mustNotHave", "Must Not Have Tags"),
+    /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
+    createTagSelector("shouldHaveAtLeastOne", "Should Contain At Least One Tag")
+  ] });
+};
+var CustomPopper = (props) => {
+  return /* @__PURE__ */ jsx(
+    Popper,
+    {
+      ...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.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__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Typography2, { variant: "h6", gutterBottom: true, children: "Type" }),
+    /* @__PURE__ */ jsx(FormGroup, { children: FILTER_TYPES.map((type) => /* @__PURE__ */ jsx(
+      FormControlLabel,
+      {
+        control: /* @__PURE__ */ jsx(
+          Checkbox,
+          {
+            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__ */ jsxs(Box2, { children: [
+    /* @__PURE__ */ jsx(TypeFilter_default, { onChange: onTypeChange }),
+    /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsx(
+      TagsFilter_default,
+      {
+        tags,
+        onChange: onTagChange
+      }
+    ),
+    /* @__PURE__ */ jsx(Divider, { sx: { my: 2 } }),
+    /* @__PURE__ */ jsx(Box2, { sx: { display: "flex", justifyContent: "center", mt: 2 }, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "contained",
+        color: "primary",
+        size: "large",
+        startIcon: /* @__PURE__ */ jsx(SearchIcon, {}),
+        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__ */ 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__ */ jsx(
+    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__ */ jsxs(CardContent, { sx: { display: "flex", alignItems: "flex-start" }, children: [
+        icon && /* @__PURE__ */ jsx(Box, { sx: { mr: 2, display: "flex", alignItems: "center", pt: 0.5 }, children: icon }),
+        /* @__PURE__ */ jsxs(Box, { sx: { flex: 1 }, children: [
+          /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { mb: 1 }, children: result.title }),
+          children,
+          /* @__PURE__ */ jsx(Typography, { variant: "body1", children: result.description }),
+          result.tags && result.tags.length > 0 && /* @__PURE__ */ jsx(Box, { sx: { mt: 1 }, children: /* @__PURE__ */ jsx(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__ */ jsxs(Fragment, { children: [
+              visible.map((tag) => generateTagsDisplay(tag)),
+              hiddenCount > 0 && /* @__PURE__ */ 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__ */ jsx(
+    Avatar,
+    {
+      src: result.imageUrl,
+      alt: result.title,
+      sx: {
+        width: 40,
+        height: 40,
+        bgcolor: !result.imageUrl ? avatarColor : void 0
+      },
+      children: !result.imageUrl && firstLetter
+    }
+  );
+  return /* @__PURE__ */ 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__ */ jsx(BaseSearchResultCard, { result, tags, onClick, icon: /* @__PURE__ */ jsx(CasinoIcon, { color: "primary" }), children: /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 0.5 }, children: [
+      /* @__PURE__ */ jsxs(Typography, { variant: "body2", color: "text.secondary", children: [
+        "Players: ",
+        numPlayers,
+        " / ",
+        capacity
+      ] }),
+      result.dungeonMaster ? /* @__PURE__ */ jsx(Chip, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsx(Chip, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
+    ] }),
+    /* @__PURE__ */ jsx(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__ */ jsx(BaseSearchResultCard_default, { result, onClick, icon: /* @__PURE__ */ jsx(EventIcon, { color: "primary" }), tags, children: /* @__PURE__ */ jsxs(Box, { sx: { mb: 1 }, children: [
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", mb: 0.5 }, children: [
+      /* @__PURE__ */ jsx(CalendarTodayIcon, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
+      /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "text.secondary", children: formattedDate })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", mb: 1 }, children: [
+      /* @__PURE__ */ jsx(LocationOnIcon, { sx: { mr: 1, fontSize: "small", color: "text.secondary" } }),
+      /* @__PURE__ */ jsx(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__ */ jsx(Box2, { 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__ */ jsx(Box2, { sx: { display: "flex", flexDirection: "column", gap: 2 }, children: results.map((result) => {
+    switch (result.type) {
+      case "player":
+        return /* @__PURE__ */ jsx(
+          PlayerResultCard_default,
+          {
+            result,
+            onClick: onPlayerClick,
+            tags
+          },
+          result.id
+        );
+      case "table":
+        return /* @__PURE__ */ jsx(
+          TableResultCard_default,
+          {
+            result,
+            onClick: onTableClick,
+            tags
+          },
+          result.id
+        );
+      case "event":
+        return /* @__PURE__ */ 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__ */ jsx(Box2, { sx: { maxHeight, overflowY: "auto", pr: 1 }, children: hasResults ? /* @__PURE__ */ jsx(ResultsContainer_default, { results, onResultClick, tags }) : /* @__PURE__ */ jsx(Box2, { 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__ */ 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__ */ 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 = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+  return /* @__PURE__ */ jsxs(Box2, { sx: { padding: 2 }, children: [
+    /* @__PURE__ */ jsx(Card2, { sx: { marginBottom: 2 }, children: /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        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__ */ jsxs(Grid, { container: true, spacing: 2, children: [
+      /* @__PURE__ */ jsx(Grid, { size: { xs: 12, md: 3 }, children: /* @__PURE__ */ jsxs(Card2, { sx: { marginBottom: isMobile ? 2 : 0 }, children: [
+        /* @__PURE__ */ jsx(
+          CardHeader,
+          {
+            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__ */ jsx(CardContent2, { children: /* @__PURE__ */ jsx(
+          FiltersContainer_default,
+          {
+            onTypeChange,
+            onTagChange,
+            onSubmit,
+            tags: validTags
+          }
+        ) })
+      ] }) }),
+      /* @__PURE__ */ jsx(Grid, { size: { xs: 12, md: 9 }, children: /* @__PURE__ */ jsxs(Card2, { children: [
+        /* @__PURE__ */ jsx(
+          CardHeader,
+          {
+            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__ */ jsx(CardContent2, { children: /* @__PURE__ */ 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__ */ jsx(
+    ScrollableResultsList_default,
+    {
+      results: sortedTables,
+      tags,
+      maxHeight,
+      onResultClick: (id, type) => {
+        if (type === "table") handleClick(id);
+      }
+    }
+  );
+};
+var TablesScrollableList_default = TablesScrollableList;
+
+export { BaseSearchResultCard_default as BaseSearchResultCard, EventResultCard_default as EventResultCard, FiltersContainer_default as FiltersContainer, PlayerResultCard_default as PlayerResultCard, PlayersScrollableList_default as PlayersScrollableList, ResultsContainer_default as ResultsContainer, ScrollableResultsList_default as ScrollableResultsList, SearchPageLayout, SearchResultCard_default as SearchResultCard, SortOptions_default as SortOptions, TableResultCard_default as TableResultCard, TablesScrollableList_default as TablesScrollableList, TagsFilter_default as TagsFilter, TypeFilter_default as TypeFilter };
+//# sourceMappingURL=SearchPage.mjs.map
+//# sourceMappingURL=SearchPage.mjs.map