@mbpockets/shared-ui 0.1.18 → 0.1.19

package/dist/ProfilePage/index.mjs

@@ -7,9 +7,41 @@ import CardHeader from '@mui/material/CardHeader';
 import Grid from '@mui/material/Grid';
 import Popper from '@mui/material/Popper';
 import TextField from '@mui/material/TextField';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/shared/TagEditor.tsx
+function Chip({ tag, removeCallback }) {
+  var _a;
+  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
+      style: {
+        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
+        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
+        textShadow: "black 1.5px 1px 1.5px",
+        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
+      },
+      children: [
+        tag.label,
+        removeCallback && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeCallback(tag.id),
+            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
+            style: {
+              textShadow: "black 1px 1px 1px"
+            },
+            children: "X"
+          }
+        )
+      ]
+    },
+    tag.id
+  ) });
+}
 function TagEditor({
   title = "Tags",
   selectedTags,
@@ -36,27 +68,11 @@ function TagEditor({
       }
     ),
     /* @__PURE__ */ jsxs(CardContent, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxs(
-        "span",
+      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsx(
+        Chip,
         {
-          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: () => onToggleTag(tag.id),
-                className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
-                children: "\xD7"
-              }
-            )
-          ]
+          tag,
+          removeCallback: () => onToggleTag(tag.id)
         },
         tag.id
       )) }),

package/dist/ProfilePage/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/shared/TagEditor.tsx","../../src/components/ProfilePage/PlayerTagsEdit.tsx"],"names":["jsx"],"mappings":"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","file":"index.mjs","sourcesContent":["\"use client\";\n\nimport React, { useMemo, useState } from \"react\";\nimport Autocomplete from \"@mui/material/Autocomplete\";\nimport Card from \"@mui/material/Card\";\nimport CardContent from \"@mui/material/CardContent\";\nimport CardHeader from \"@mui/material/CardHeader\";\nimport Grid from \"@mui/material/Grid\";\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\nimport TextField from \"@mui/material/TextField\";\nimport type { Tag } from \"@/types/tag\";\n\nexport interface TagEditorProps {\n  title?: string;\n  selectedTags: Tag[];\n  possibleTags: Tag[];\n  onToggleTag: (id: number) => void;\n}\n\nexport function TagEditor({\n  title = \"Tags\",\n  selectedTags,\n  possibleTags,\n  onToggleTag,\n}: TagEditorProps) {\n  const [inputValue, setInputValue] = useState(\"\");\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\n\n  const options = useMemo(\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\n    [possibleTags]\n  );\n\n  return (\n    <Grid container>\n      <Grid size={{ xs: 12 }}>\n        <Card>\n          <CardHeader\n            title={title}\n            style={{\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\n              color: \"#FFFFFF\",\n              fontSize: \"1.5rem\",\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\n            }}\n          />\n          <CardContent>\n            <div className=\"mt-2 flex flex-wrap gap-2\">\n              {selectedTags.map((tag) => (\n                <span\n                  key={tag.id}\n                  className=\"inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined\"\n                  style={{\n                    background: tag.color || \"#bfbcbb\",\n                    color: \"white\",\n                    textShadow: \"black 0.2em 0.2em 0.4em\",\n                  }}\n                >\n                  {tag.label}\n                  <button\n                    type=\"button\"\n                    onClick={() => onToggleTag(tag.id)}\n                    className=\"ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined\"\n                  >\n                    &times;\n                  </button>\n                </span>\n              ))}\n            </div>\n            <Grid container spacing={3}>\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\n                <Autocomplete\n                  key={selectedIds.join(\"-\")}\n                  options={options}\n                  filterOptions={(availableOptions, state) =>\n                    availableOptions\n                      .filter(\n                        (option) =>\n                          !selectedIds.includes(option.value) &&\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\n                      )\n                      .slice(0, 3)\n                  }\n                  value={null}\n                  inputValue={inputValue}\n                  onInputChange={(event, newInputValue) => {\n                    if (event && event.type === \"change\") {\n                      setInputValue(newInputValue);\n                    }\n                  }}\n                  onChange={(event, newValue) => {\n                    if (newValue) {\n                      onToggleTag(newValue.value);\n                    }\n                    setInputValue(\"\");\n                  }}\n                  slots={{ popper: CustomPopper }}\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\n                />\n              </Grid>\n            </Grid>\n          </CardContent>\n        </Card>\n      </Grid>\n    </Grid>\n  );\n}\n\nconst CustomPopper = (props: PopperProps) => {\n  return (\n    <Popper\n      {...props}\n      modifiers={[\n        {\n          name: \"preventOverflow\",\n          options: { boundary: \"viewport\" },\n        },\n        {\n          name: \"offset\",\n          options: { offset: [0, -10] },\n        },\n      ]}\n      placement=\"top-start\"\n    />\n  );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\nimport { TagEditor } from \"@/components/shared/TagEditor\";\n\nexport default function PlayerTagsEdit(props: {\n  PlayerTags: Tag[];\n  possibleTags: Tag[];\n  updatePlayerTags: (id:number) => void;\n}) {\n  return (\n    <TagEditor\n      title=\"Player Tags\"\n      selectedTags={props.PlayerTags}\n      possibleTags={props.possibleTags}\n      onToggleTag={props.updatePlayerTags}\n    />\n  );\n}\n"]}
+{"version":3,"sources":["../../src/components/shared/Chip.tsx","../../src/components/shared/TagEditor.tsx","../../src/components/ProfilePage/PlayerTagsEdit.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"index.mjs","sourcesContent":["import React from \"react\";\r\nimport {Tag} from \"@/types/tag\";\r\n\r\nexport default function Chip({ tag, removeCallback }: { tag: Tag, removeCallback?: (tagId: number) => void }) {\r\n  const color = tag.color ?? \"#bfbcbb\";\r\n  return (\r\n      <>\r\n      <span\r\n          key={tag.id}\r\n          className=\"inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans\"\r\n          style={{\r\n            borderColor: `color-mix(in srgb, ${color}, black 50%)`,\r\n            background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,\r\n            textShadow: \"black 1.5px 1px 1.5px\",\r\n            filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`\r\n          }}\r\n      >\r\n          {tag.label}\r\n          {removeCallback && (\r\n              <button\r\n                  type=\"button\"\r\n                  onClick={() => removeCallback(tag.id)}\r\n                  className=\"ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full\"\r\n                  style={{\r\n                    textShadow: \"black 1px 1px 1px\"\r\n                  }}\r\n              >\r\n                X\r\n              </button>\r\n          )}\r\n    </span>\r\n    </>\r\n  )\r\n\r\n}","\"use client\";\r\n\r\nimport React, { useMemo, useState } from \"react\";\r\nimport Autocomplete from \"@mui/material/Autocomplete\";\r\nimport Card from \"@mui/material/Card\";\r\nimport CardContent from \"@mui/material/CardContent\";\r\nimport CardHeader from \"@mui/material/CardHeader\";\r\nimport Grid from \"@mui/material/Grid\";\r\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport type { Tag } from \"@/types/tag\";\r\nimport Chip from \"@/components/shared/Chip\";\r\n\r\nexport interface TagEditorProps {\r\n  title?: string;\r\n  selectedTags: Tag[];\r\n  possibleTags: Tag[];\r\n  onToggleTag: (id: number) => void;\r\n}\r\n\r\nexport function TagEditor({\r\n  title = \"Tags\",\r\n  selectedTags,\r\n  possibleTags,\r\n  onToggleTag,\r\n}: TagEditorProps) {\r\n  const [inputValue, setInputValue] = useState(\"\");\r\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\r\n\r\n  const options = useMemo(\r\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\r\n    [possibleTags]\r\n  );\r\n\r\n  return (\r\n    <Grid container>\r\n      <Grid size={{ xs: 12 }}>\r\n        <Card>\r\n          <CardHeader\r\n            title={title}\r\n            style={{\r\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\r\n              color: \"#FFFFFF\",\r\n              fontSize: \"1.5rem\",\r\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\r\n            }}\r\n          />\r\n          <CardContent>\r\n            <div className=\"mt-2 flex flex-wrap gap-2\">\r\n              {selectedTags.map((tag) => (\r\n                <Chip\r\n                  key={tag.id}\r\n                  tag={tag}\r\n                  removeCallback={() => onToggleTag(tag.id)}\r\n                />\r\n              ))}\r\n            </div>\r\n            <Grid container spacing={3}>\r\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\r\n                <Autocomplete\r\n                  key={selectedIds.join(\"-\")}\r\n                  options={options}\r\n                  filterOptions={(availableOptions, state) =>\r\n                    availableOptions\r\n                      .filter(\r\n                        (option) =>\r\n                          !selectedIds.includes(option.value) &&\r\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\r\n                      )\r\n                      .slice(0, 3)\r\n                  }\r\n                  value={null}\r\n                  inputValue={inputValue}\r\n                  onInputChange={(event, newInputValue) => {\r\n                    if (event && event.type === \"change\") {\r\n                      setInputValue(newInputValue);\r\n                    }\r\n                  }}\r\n                  onChange={(event, newValue) => {\r\n                    if (newValue) {\r\n                      onToggleTag(newValue.value);\r\n                    }\r\n                    setInputValue(\"\");\r\n                  }}\r\n                  slots={{ popper: CustomPopper }}\r\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\r\n                />\r\n              </Grid>\r\n            </Grid>\r\n          </CardContent>\r\n        </Card>\r\n      </Grid>\r\n    </Grid>\r\n  );\r\n}\r\n\r\nconst CustomPopper = (props: PopperProps) => {\r\n  return (\r\n    <Popper\r\n      {...props}\r\n      modifiers={[\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: { boundary: \"viewport\" },\r\n        },\r\n        {\r\n          name: \"offset\",\r\n          options: { offset: [0, -10] },\r\n        },\r\n      ]}\r\n      placement=\"top-start\"\r\n    />\r\n  );\r\n};\r\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\nimport { TagEditor } from \"@/components/shared/TagEditor\";\n\nexport default function PlayerTagsEdit(props: {\n  PlayerTags: Tag[];\n  possibleTags: Tag[];\n  updatePlayerTags: (id:number) => void;\n}) {\n  return (\n    <TagEditor\n      title=\"Player Tags\"\n      selectedTags={props.PlayerTags}\n      possibleTags={props.possibleTags}\n      onToggleTag={props.updatePlayerTags}\n    />\n  );\n}\n"]}

package/dist/ProfilePage.cjs

@@ -22,6 +22,38 @@ var Popper__default = /*#__PURE__*/_interopDefault(Popper);
 var TextField__default = /*#__PURE__*/_interopDefault(TextField);
 
 // src/components/shared/TagEditor.tsx
+function Chip({ tag, removeCallback }) {
+  var _a;
+  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
+      style: {
+        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
+        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
+        textShadow: "black 1.5px 1px 1.5px",
+        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
+      },
+      children: [
+        tag.label,
+        removeCallback && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeCallback(tag.id),
+            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
+            style: {
+              textShadow: "black 1px 1px 1px"
+            },
+            children: "X"
+          }
+        )
+      ]
+    },
+    tag.id
+  ) });
+}
 function TagEditor({
   title = "Tags",
   selectedTags,
@@ -48,27 +80,11 @@ function TagEditor({
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsxs(CardContent__default.default, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
-        "span",
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+        Chip,
         {
-          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: () => onToggleTag(tag.id),
-                className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
-                children: "\xD7"
-              }
-            )
-          ]
+          tag,
+          removeCallback: () => onToggleTag(tag.id)
         },
         tag.id
       )) }),

package/dist/ProfilePage.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/shared/TagEditor.tsx","../src/components/ProfilePage/PlayerTagsEdit.tsx"],"names":["useState","useMemo","jsx","Grid","jsxs","Card","CardHeader","CardContent","Autocomplete","TextField","Popper"],"mappings":"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","file":"ProfilePage.cjs","sourcesContent":["\"use client\";\n\nimport React, { useMemo, useState } from \"react\";\nimport Autocomplete from \"@mui/material/Autocomplete\";\nimport Card from \"@mui/material/Card\";\nimport CardContent from \"@mui/material/CardContent\";\nimport CardHeader from \"@mui/material/CardHeader\";\nimport Grid from \"@mui/material/Grid\";\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\nimport TextField from \"@mui/material/TextField\";\nimport type { Tag } from \"@/types/tag\";\n\nexport interface TagEditorProps {\n  title?: string;\n  selectedTags: Tag[];\n  possibleTags: Tag[];\n  onToggleTag: (id: number) => void;\n}\n\nexport function TagEditor({\n  title = \"Tags\",\n  selectedTags,\n  possibleTags,\n  onToggleTag,\n}: TagEditorProps) {\n  const [inputValue, setInputValue] = useState(\"\");\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\n\n  const options = useMemo(\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\n    [possibleTags]\n  );\n\n  return (\n    <Grid container>\n      <Grid size={{ xs: 12 }}>\n        <Card>\n          <CardHeader\n            title={title}\n            style={{\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\n              color: \"#FFFFFF\",\n              fontSize: \"1.5rem\",\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\n            }}\n          />\n          <CardContent>\n            <div className=\"mt-2 flex flex-wrap gap-2\">\n              {selectedTags.map((tag) => (\n                <span\n                  key={tag.id}\n                  className=\"inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined\"\n                  style={{\n                    background: tag.color || \"#bfbcbb\",\n                    color: \"white\",\n                    textShadow: \"black 0.2em 0.2em 0.4em\",\n                  }}\n                >\n                  {tag.label}\n                  <button\n                    type=\"button\"\n                    onClick={() => onToggleTag(tag.id)}\n                    className=\"ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined\"\n                  >\n                    &times;\n                  </button>\n                </span>\n              ))}\n            </div>\n            <Grid container spacing={3}>\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\n                <Autocomplete\n                  key={selectedIds.join(\"-\")}\n                  options={options}\n                  filterOptions={(availableOptions, state) =>\n                    availableOptions\n                      .filter(\n                        (option) =>\n                          !selectedIds.includes(option.value) &&\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\n                      )\n                      .slice(0, 3)\n                  }\n                  value={null}\n                  inputValue={inputValue}\n                  onInputChange={(event, newInputValue) => {\n                    if (event && event.type === \"change\") {\n                      setInputValue(newInputValue);\n                    }\n                  }}\n                  onChange={(event, newValue) => {\n                    if (newValue) {\n                      onToggleTag(newValue.value);\n                    }\n                    setInputValue(\"\");\n                  }}\n                  slots={{ popper: CustomPopper }}\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\n                />\n              </Grid>\n            </Grid>\n          </CardContent>\n        </Card>\n      </Grid>\n    </Grid>\n  );\n}\n\nconst CustomPopper = (props: PopperProps) => {\n  return (\n    <Popper\n      {...props}\n      modifiers={[\n        {\n          name: \"preventOverflow\",\n          options: { boundary: \"viewport\" },\n        },\n        {\n          name: \"offset\",\n          options: { offset: [0, -10] },\n        },\n      ]}\n      placement=\"top-start\"\n    />\n  );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\nimport { TagEditor } from \"@/components/shared/TagEditor\";\n\nexport default function PlayerTagsEdit(props: {\n  PlayerTags: Tag[];\n  possibleTags: Tag[];\n  updatePlayerTags: (id:number) => void;\n}) {\n  return (\n    <TagEditor\n      title=\"Player Tags\"\n      selectedTags={props.PlayerTags}\n      possibleTags={props.possibleTags}\n      onToggleTag={props.updatePlayerTags}\n    />\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/shared/Chip.tsx","../src/components/shared/TagEditor.tsx","../src/components/ProfilePage/PlayerTagsEdit.tsx"],"names":["jsx","Fragment","jsxs","useState","useMemo","Grid","Card","CardHeader","CardContent","Autocomplete","TextField","Popper"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAGe,SAAR,IAAA,CAAsB,EAAE,GAAA,EAAK,cAAA,EAAe,EAA2D;AAH9G,EAAA,IAAA,EAAA;AAIE,EAAA,MAAM,KAAA,GAAA,CAAQ,EAAA,GAAA,GAAA,CAAI,KAAA,KAAJ,IAAA,GAAA,EAAA,GAAa,SAAA;AAC3B,EAAA,uBACIA,cAAA,CAAAC,mBAAA,EAAA,EACA,QAAA,kBAAAC,eAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MAEG,SAAA,EAAU,iHAAA;AAAA,MACV,KAAA,EAAO;AAAA,QACL,WAAA,EAAa,sBAAsB,KAAK,CAAA,YAAA,CAAA;AAAA,QACxC,UAAA,EAAY,CAAA,2CAAA,EAA8C,KAAK,CAAA,oCAAA,EAAuC,KAAK,CAAA,kBAAA,CAAA;AAAA,QAC3G,UAAA,EAAY,uBAAA;AAAA,QACZ,MAAA,EAAQ,gDAAgD,KAAK,CAAA,aAAA;AAAA,OAC/D;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,GAAA,CAAI,KAAA;AAAA,QACJ,cAAA,oBACGF,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACG,IAAA,EAAK,QAAA;AAAA,YACL,OAAA,EAAS,MAAM,cAAA,CAAe,GAAA,CAAI,EAAE,CAAA;AAAA,YACpC,SAAA,EAAU,8GAAA;AAAA,YACV,KAAA,EAAO;AAAA,cACL,UAAA,EAAY;AAAA,aACd;AAAA,YACH,QAAA,EAAA;AAAA;AAAA;AAED;AAAA,KAAA;AAAA,IApBC,GAAA,CAAI;AAAA,GAsBf,EACA,CAAA;AAGJ;ACdO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA,GAAQ,MAAA;AAAA,EACR,YAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAAmB;AACjB,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIG,eAAS,EAAE,CAAA;AAC/C,EAAA,MAAM,WAAA,GAAcC,aAAA,CAAQ,MAAM,YAAA,CAAa,GAAA,CAAI,CAAC,GAAA,KAAQ,GAAA,CAAI,EAAE,CAAA,EAAG,CAAC,YAAY,CAAC,CAAA;AAEnF,EAAA,MAAM,OAAA,GAAUA,aAAA;AAAA,IACd,MAAM,YAAA,CAAa,GAAA,CAAI,CAAC,GAAA,MAAS,EAAE,KAAA,EAAO,GAAA,CAAI,EAAA,EAAI,KAAA,EAAO,GAAA,CAAI,KAAA,EAAM,CAAE,CAAA;AAAA,IACrE,CAAC,YAAY;AAAA,GACf;AAEA,EAAA,uBACEJ,cAAAA,CAACK,qBAAA,EAAA,EAAK,SAAA,EAAS,MACb,QAAA,kBAAAL,cAAAA,CAACK,qBAAA,EAAA,EAAK,IAAA,EAAM,EAAE,EAAA,EAAI,EAAA,EAAG,EACnB,QAAA,kBAAAH,gBAACI,qBAAA,EAAA,EACC,QAAA,EAAA;AAAA,oBAAAN,cAAAA;AAAA,MAACO,2BAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,KAAA,EAAO;AAAA,UACL,UAAA,EAAY,yEAAA;AAAA,UACZ,KAAA,EAAO,SAAA;AAAA,UACP,QAAA,EAAU,QAAA;AAAA,UACV,UAAA,EAAY;AAAA;AACd;AAAA,KACF;AAAA,oBACAL,gBAACM,4BAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAAR,cAAAA,CAAC,SAAI,SAAA,EAAU,2BAAA,EACZ,uBAAa,GAAA,CAAI,CAAC,wBACjBA,cAAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UAEC,GAAA;AAAA,UACA,cAAA,EAAgB,MAAM,WAAA,CAAY,GAAA,CAAI,EAAE;AAAA,SAAA;AAAA,QAFnC,GAAA,CAAI;AAAA,OAIZ,CAAA,EACH,CAAA;AAAA,sBACAA,cAAAA,CAACK,qBAAA,EAAA,EAAK,SAAA,EAAS,IAAA,EAAC,SAAS,CAAA,EACvB,QAAA,kBAAAL,cAAAA,CAACK,qBAAA,EAAA,EAAK,IAAI,EAAE,SAAA,EAAW,GAAG,KAAA,EAAO,MAAA,IAC/B,QAAA,kBAAAL,cAAAA;AAAA,QAACS,6BAAA;AAAA,QAAA;AAAA,UAEC,OAAA;AAAA,UACA,aAAA,EAAe,CAAC,gBAAA,EAAkB,KAAA,KAChC,gBAAA,CACG,MAAA;AAAA,YACC,CAAC,MAAA,KACC,CAAC,WAAA,CAAY,QAAA,CAAS,OAAO,KAAK,CAAA,IAClC,MAAA,CAAO,KAAA,CAAM,aAAY,CAAE,QAAA,CAAS,KAAA,CAAM,UAAA,CAAW,aAAa;AAAA,WACtE,CACC,KAAA,CAAM,CAAA,EAAG,CAAC,CAAA;AAAA,UAEf,KAAA,EAAO,IAAA;AAAA,UACP,UAAA;AAAA,UACA,aAAA,EAAe,CAAC,KAAA,EAAO,aAAA,KAAkB;AACvC,YAAA,IAAI,KAAA,IAAS,KAAA,CAAM,IAAA,KAAS,QAAA,EAAU;AACpC,cAAA,aAAA,CAAc,aAAa,CAAA;AAAA,YAC7B;AAAA,UACF,CAAA;AAAA,UACA,QAAA,EAAU,CAAC,KAAA,EAAO,QAAA,KAAa;AAC7B,YAAA,IAAI,QAAA,EAAU;AACZ,cAAA,WAAA,CAAY,SAAS,KAAK,CAAA;AAAA,YAC5B;AACA,YAAA,aAAA,CAAc,EAAE,CAAA;AAAA,UAClB,CAAA;AAAA,UACA,KAAA,EAAO,EAAE,MAAA,EAAQ,YAAA,EAAa;AAAA,UAC9B,WAAA,EAAa,CAAC,MAAA,qBAAWT,eAACU,0BAAA,EAAA,EAAW,GAAG,MAAA,EAAQ,KAAA,EAAM,aAAA,EAAc;AAAA,SAAA;AAAA,QAzB/D,WAAA,CAAY,KAAK,GAAG;AAAA,SA2B7B,CAAA,EACF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;AAEA,IAAM,YAAA,GAAe,CAAC,KAAA,KAAuB;AAC3C,EAAA,uBACEV,cAAAA;AAAA,IAACW,uBAAA;AAAA,IAAA;AAAA,MACE,GAAG,KAAA;AAAA,MACJ,SAAA,EAAW;AAAA,QACT;AAAA,UACE,IAAA,EAAM,iBAAA;AAAA,UACN,OAAA,EAAS,EAAE,QAAA,EAAU,UAAA;AAAW,SAClC;AAAA,QACA;AAAA,UACE,IAAA,EAAM,QAAA;AAAA,UACN,SAAS,EAAE,MAAA,EAAQ,CAAC,CAAA,EAAG,GAAG,CAAA;AAAE;AAC9B,OACF;AAAA,MACA,SAAA,EAAU;AAAA;AAAA,GACZ;AAEJ,CAAA;AC3Ge,SAAR,eAAgC,KAAA,EAIpC;AACD,EAAA,uBACEX,cAAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,aAAA;AAAA,MACN,cAAc,KAAA,CAAM,UAAA;AAAA,MACpB,cAAc,KAAA,CAAM,YAAA;AAAA,MACpB,aAAa,KAAA,CAAM;AAAA;AAAA,GACrB;AAEJ","file":"ProfilePage.cjs","sourcesContent":["import React from \"react\";\r\nimport {Tag} from \"@/types/tag\";\r\n\r\nexport default function Chip({ tag, removeCallback }: { tag: Tag, removeCallback?: (tagId: number) => void }) {\r\n  const color = tag.color ?? \"#bfbcbb\";\r\n  return (\r\n      <>\r\n      <span\r\n          key={tag.id}\r\n          className=\"inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans\"\r\n          style={{\r\n            borderColor: `color-mix(in srgb, ${color}, black 50%)`,\r\n            background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,\r\n            textShadow: \"black 1.5px 1px 1.5px\",\r\n            filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`\r\n          }}\r\n      >\r\n          {tag.label}\r\n          {removeCallback && (\r\n              <button\r\n                  type=\"button\"\r\n                  onClick={() => removeCallback(tag.id)}\r\n                  className=\"ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full\"\r\n                  style={{\r\n                    textShadow: \"black 1px 1px 1px\"\r\n                  }}\r\n              >\r\n                X\r\n              </button>\r\n          )}\r\n    </span>\r\n    </>\r\n  )\r\n\r\n}","\"use client\";\r\n\r\nimport React, { useMemo, useState } from \"react\";\r\nimport Autocomplete from \"@mui/material/Autocomplete\";\r\nimport Card from \"@mui/material/Card\";\r\nimport CardContent from \"@mui/material/CardContent\";\r\nimport CardHeader from \"@mui/material/CardHeader\";\r\nimport Grid from \"@mui/material/Grid\";\r\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport type { Tag } from \"@/types/tag\";\r\nimport Chip from \"@/components/shared/Chip\";\r\n\r\nexport interface TagEditorProps {\r\n  title?: string;\r\n  selectedTags: Tag[];\r\n  possibleTags: Tag[];\r\n  onToggleTag: (id: number) => void;\r\n}\r\n\r\nexport function TagEditor({\r\n  title = \"Tags\",\r\n  selectedTags,\r\n  possibleTags,\r\n  onToggleTag,\r\n}: TagEditorProps) {\r\n  const [inputValue, setInputValue] = useState(\"\");\r\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\r\n\r\n  const options = useMemo(\r\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\r\n    [possibleTags]\r\n  );\r\n\r\n  return (\r\n    <Grid container>\r\n      <Grid size={{ xs: 12 }}>\r\n        <Card>\r\n          <CardHeader\r\n            title={title}\r\n            style={{\r\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\r\n              color: \"#FFFFFF\",\r\n              fontSize: \"1.5rem\",\r\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\r\n            }}\r\n          />\r\n          <CardContent>\r\n            <div className=\"mt-2 flex flex-wrap gap-2\">\r\n              {selectedTags.map((tag) => (\r\n                <Chip\r\n                  key={tag.id}\r\n                  tag={tag}\r\n                  removeCallback={() => onToggleTag(tag.id)}\r\n                />\r\n              ))}\r\n            </div>\r\n            <Grid container spacing={3}>\r\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\r\n                <Autocomplete\r\n                  key={selectedIds.join(\"-\")}\r\n                  options={options}\r\n                  filterOptions={(availableOptions, state) =>\r\n                    availableOptions\r\n                      .filter(\r\n                        (option) =>\r\n                          !selectedIds.includes(option.value) &&\r\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\r\n                      )\r\n                      .slice(0, 3)\r\n                  }\r\n                  value={null}\r\n                  inputValue={inputValue}\r\n                  onInputChange={(event, newInputValue) => {\r\n                    if (event && event.type === \"change\") {\r\n                      setInputValue(newInputValue);\r\n                    }\r\n                  }}\r\n                  onChange={(event, newValue) => {\r\n                    if (newValue) {\r\n                      onToggleTag(newValue.value);\r\n                    }\r\n                    setInputValue(\"\");\r\n                  }}\r\n                  slots={{ popper: CustomPopper }}\r\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\r\n                />\r\n              </Grid>\r\n            </Grid>\r\n          </CardContent>\r\n        </Card>\r\n      </Grid>\r\n    </Grid>\r\n  );\r\n}\r\n\r\nconst CustomPopper = (props: PopperProps) => {\r\n  return (\r\n    <Popper\r\n      {...props}\r\n      modifiers={[\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: { boundary: \"viewport\" },\r\n        },\r\n        {\r\n          name: \"offset\",\r\n          options: { offset: [0, -10] },\r\n        },\r\n      ]}\r\n      placement=\"top-start\"\r\n    />\r\n  );\r\n};\r\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\nimport { TagEditor } from \"@/components/shared/TagEditor\";\n\nexport default function PlayerTagsEdit(props: {\n  PlayerTags: Tag[];\n  possibleTags: Tag[];\n  updatePlayerTags: (id:number) => void;\n}) {\n  return (\n    <TagEditor\n      title=\"Player Tags\"\n      selectedTags={props.PlayerTags}\n      possibleTags={props.possibleTags}\n      onToggleTag={props.updatePlayerTags}\n    />\n  );\n}\n"]}

package/dist/ProfilePage.mjs

@@ -7,9 +7,41 @@ import CardHeader from '@mui/material/CardHeader';
 import Grid from '@mui/material/Grid';
 import Popper from '@mui/material/Popper';
 import TextField from '@mui/material/TextField';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 // src/components/shared/TagEditor.tsx
+function Chip({ tag, removeCallback }) {
+  var _a;
+  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
+      style: {
+        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
+        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
+        textShadow: "black 1.5px 1px 1.5px",
+        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
+      },
+      children: [
+        tag.label,
+        removeCallback && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeCallback(tag.id),
+            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
+            style: {
+              textShadow: "black 1px 1px 1px"
+            },
+            children: "X"
+          }
+        )
+      ]
+    },
+    tag.id
+  ) });
+}
 function TagEditor({
   title = "Tags",
   selectedTags,
@@ -36,27 +68,11 @@ function TagEditor({
       }
     ),
     /* @__PURE__ */ jsxs(CardContent, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxs(
-        "span",
+      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsx(
+        Chip,
         {
-          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: () => onToggleTag(tag.id),
-                className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
-                children: "\xD7"
-              }
-            )
-          ]
+          tag,
+          removeCallback: () => onToggleTag(tag.id)
         },
         tag.id
       )) }),

package/dist/ProfilePage.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/shared/TagEditor.tsx","../src/components/ProfilePage/PlayerTagsEdit.tsx"],"names":["jsx"],"mappings":"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","file":"ProfilePage.mjs","sourcesContent":["\"use client\";\n\nimport React, { useMemo, useState } from \"react\";\nimport Autocomplete from \"@mui/material/Autocomplete\";\nimport Card from \"@mui/material/Card\";\nimport CardContent from \"@mui/material/CardContent\";\nimport CardHeader from \"@mui/material/CardHeader\";\nimport Grid from \"@mui/material/Grid\";\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\nimport TextField from \"@mui/material/TextField\";\nimport type { Tag } from \"@/types/tag\";\n\nexport interface TagEditorProps {\n  title?: string;\n  selectedTags: Tag[];\n  possibleTags: Tag[];\n  onToggleTag: (id: number) => void;\n}\n\nexport function TagEditor({\n  title = \"Tags\",\n  selectedTags,\n  possibleTags,\n  onToggleTag,\n}: TagEditorProps) {\n  const [inputValue, setInputValue] = useState(\"\");\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\n\n  const options = useMemo(\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\n    [possibleTags]\n  );\n\n  return (\n    <Grid container>\n      <Grid size={{ xs: 12 }}>\n        <Card>\n          <CardHeader\n            title={title}\n            style={{\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\n              color: \"#FFFFFF\",\n              fontSize: \"1.5rem\",\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\n            }}\n          />\n          <CardContent>\n            <div className=\"mt-2 flex flex-wrap gap-2\">\n              {selectedTags.map((tag) => (\n                <span\n                  key={tag.id}\n                  className=\"inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined\"\n                  style={{\n                    background: tag.color || \"#bfbcbb\",\n                    color: \"white\",\n                    textShadow: \"black 0.2em 0.2em 0.4em\",\n                  }}\n                >\n                  {tag.label}\n                  <button\n                    type=\"button\"\n                    onClick={() => onToggleTag(tag.id)}\n                    className=\"ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined\"\n                  >\n                    &times;\n                  </button>\n                </span>\n              ))}\n            </div>\n            <Grid container spacing={3}>\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\n                <Autocomplete\n                  key={selectedIds.join(\"-\")}\n                  options={options}\n                  filterOptions={(availableOptions, state) =>\n                    availableOptions\n                      .filter(\n                        (option) =>\n                          !selectedIds.includes(option.value) &&\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\n                      )\n                      .slice(0, 3)\n                  }\n                  value={null}\n                  inputValue={inputValue}\n                  onInputChange={(event, newInputValue) => {\n                    if (event && event.type === \"change\") {\n                      setInputValue(newInputValue);\n                    }\n                  }}\n                  onChange={(event, newValue) => {\n                    if (newValue) {\n                      onToggleTag(newValue.value);\n                    }\n                    setInputValue(\"\");\n                  }}\n                  slots={{ popper: CustomPopper }}\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\n                />\n              </Grid>\n            </Grid>\n          </CardContent>\n        </Card>\n      </Grid>\n    </Grid>\n  );\n}\n\nconst CustomPopper = (props: PopperProps) => {\n  return (\n    <Popper\n      {...props}\n      modifiers={[\n        {\n          name: \"preventOverflow\",\n          options: { boundary: \"viewport\" },\n        },\n        {\n          name: \"offset\",\n          options: { offset: [0, -10] },\n        },\n      ]}\n      placement=\"top-start\"\n    />\n  );\n};\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\nimport { TagEditor } from \"@/components/shared/TagEditor\";\n\nexport default function PlayerTagsEdit(props: {\n  PlayerTags: Tag[];\n  possibleTags: Tag[];\n  updatePlayerTags: (id:number) => void;\n}) {\n  return (\n    <TagEditor\n      title=\"Player Tags\"\n      selectedTags={props.PlayerTags}\n      possibleTags={props.possibleTags}\n      onToggleTag={props.updatePlayerTags}\n    />\n  );\n}\n"]}
+{"version":3,"sources":["../src/components/shared/Chip.tsx","../src/components/shared/TagEditor.tsx","../src/components/ProfilePage/PlayerTagsEdit.tsx"],"names":["jsx","jsxs"],"mappings":"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","file":"ProfilePage.mjs","sourcesContent":["import React from \"react\";\r\nimport {Tag} from \"@/types/tag\";\r\n\r\nexport default function Chip({ tag, removeCallback }: { tag: Tag, removeCallback?: (tagId: number) => void }) {\r\n  const color = tag.color ?? \"#bfbcbb\";\r\n  return (\r\n      <>\r\n      <span\r\n          key={tag.id}\r\n          className=\"inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans\"\r\n          style={{\r\n            borderColor: `color-mix(in srgb, ${color}, black 50%)`,\r\n            background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,\r\n            textShadow: \"black 1.5px 1px 1.5px\",\r\n            filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`\r\n          }}\r\n      >\r\n          {tag.label}\r\n          {removeCallback && (\r\n              <button\r\n                  type=\"button\"\r\n                  onClick={() => removeCallback(tag.id)}\r\n                  className=\"ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full\"\r\n                  style={{\r\n                    textShadow: \"black 1px 1px 1px\"\r\n                  }}\r\n              >\r\n                X\r\n              </button>\r\n          )}\r\n    </span>\r\n    </>\r\n  )\r\n\r\n}","\"use client\";\r\n\r\nimport React, { useMemo, useState } from \"react\";\r\nimport Autocomplete from \"@mui/material/Autocomplete\";\r\nimport Card from \"@mui/material/Card\";\r\nimport CardContent from \"@mui/material/CardContent\";\r\nimport CardHeader from \"@mui/material/CardHeader\";\r\nimport Grid from \"@mui/material/Grid\";\r\nimport Popper, { PopperProps } from \"@mui/material/Popper\";\r\nimport TextField from \"@mui/material/TextField\";\r\nimport type { Tag } from \"@/types/tag\";\r\nimport Chip from \"@/components/shared/Chip\";\r\n\r\nexport interface TagEditorProps {\r\n  title?: string;\r\n  selectedTags: Tag[];\r\n  possibleTags: Tag[];\r\n  onToggleTag: (id: number) => void;\r\n}\r\n\r\nexport function TagEditor({\r\n  title = \"Tags\",\r\n  selectedTags,\r\n  possibleTags,\r\n  onToggleTag,\r\n}: TagEditorProps) {\r\n  const [inputValue, setInputValue] = useState(\"\");\r\n  const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);\r\n\r\n  const options = useMemo(\r\n    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),\r\n    [possibleTags]\r\n  );\r\n\r\n  return (\r\n    <Grid container>\r\n      <Grid size={{ xs: 12 }}>\r\n        <Card>\r\n          <CardHeader\r\n            title={title}\r\n            style={{\r\n              background: \"linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))\",\r\n              color: \"#FFFFFF\",\r\n              fontSize: \"1.5rem\",\r\n              textShadow: \"0px 3px 6px rgba(0, 0, 0, 0.5)\",\r\n            }}\r\n          />\r\n          <CardContent>\r\n            <div className=\"mt-2 flex flex-wrap gap-2\">\r\n              {selectedTags.map((tag) => (\r\n                <Chip\r\n                  key={tag.id}\r\n                  tag={tag}\r\n                  removeCallback={() => onToggleTag(tag.id)}\r\n                />\r\n              ))}\r\n            </div>\r\n            <Grid container spacing={3}>\r\n              <Grid sx={{ marginTop: 3, width: \"100%\" }}>\r\n                <Autocomplete\r\n                  key={selectedIds.join(\"-\")}\r\n                  options={options}\r\n                  filterOptions={(availableOptions, state) =>\r\n                    availableOptions\r\n                      .filter(\r\n                        (option) =>\r\n                          !selectedIds.includes(option.value) &&\r\n                          option.label.toLowerCase().includes(state.inputValue.toLowerCase())\r\n                      )\r\n                      .slice(0, 3)\r\n                  }\r\n                  value={null}\r\n                  inputValue={inputValue}\r\n                  onInputChange={(event, newInputValue) => {\r\n                    if (event && event.type === \"change\") {\r\n                      setInputValue(newInputValue);\r\n                    }\r\n                  }}\r\n                  onChange={(event, newValue) => {\r\n                    if (newValue) {\r\n                      onToggleTag(newValue.value);\r\n                    }\r\n                    setInputValue(\"\");\r\n                  }}\r\n                  slots={{ popper: CustomPopper }}\r\n                  renderInput={(params) => <TextField {...params} label=\"Select Tags\" />}\r\n                />\r\n              </Grid>\r\n            </Grid>\r\n          </CardContent>\r\n        </Card>\r\n      </Grid>\r\n    </Grid>\r\n  );\r\n}\r\n\r\nconst CustomPopper = (props: PopperProps) => {\r\n  return (\r\n    <Popper\r\n      {...props}\r\n      modifiers={[\r\n        {\r\n          name: \"preventOverflow\",\r\n          options: { boundary: \"viewport\" },\r\n        },\r\n        {\r\n          name: \"offset\",\r\n          options: { offset: [0, -10] },\r\n        },\r\n      ]}\r\n      placement=\"top-start\"\r\n    />\r\n  );\r\n};\r\n","\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\nimport { TagEditor } from \"@/components/shared/TagEditor\";\n\nexport default function PlayerTagsEdit(props: {\n  PlayerTags: Tag[];\n  possibleTags: Tag[];\n  updatePlayerTags: (id:number) => void;\n}) {\n  return (\n    <TagEditor\n      title=\"Player Tags\"\n      selectedTags={props.PlayerTags}\n      possibleTags={props.possibleTags}\n      onToggleTag={props.updatePlayerTags}\n    />\n  );\n}\n"]}

package/dist/SearchPage/Results/index.cjs

@@ -17,23 +17,40 @@ var EventIcon__default = /*#__PURE__*/_interopDefault(EventIcon);
 var Avatar__default = /*#__PURE__*/_interopDefault(Avatar);
 var CasinoIcon__default = /*#__PURE__*/_interopDefault(CasinoIcon);
 
-function generateTagsDisplay(tag) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
+function Chip({ tag, removeCallback }) {
+  var _a;
+  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     "span",
     {
-      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
       style: {
-        marginTop: "6px",
-        marginRight: "6px",
-        marginBottom: "6px",
-        background: tag.color || "#bfbcbb",
-        color: "white",
-        textShadow: "black 0.2em 0.2em 0.4em"
+        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
+        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
+        textShadow: "black 1.5px 1px 1.5px",
+        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
       },
-      children: tag.label
+      children: [
+        tag.label,
+        removeCallback && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeCallback(tag.id),
+            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
+            style: {
+              textShadow: "black 1px 1px 1px"
+            },
+            children: "X"
+          }
+        )
+      ]
     },
     tag.id
-  );
+  ) });
+}
+function generateTagsDisplay(tag) {
+  return /* @__PURE__ */ jsxRuntime.jsx(Chip, { tag }, tag.id);
 }
 var BaseSearchResultCard = ({
   result,

package/dist/SearchPage/Results/index.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/shared/TagComponents.tsx","../../../src/components/SearchPage/Results/BaseSearchResultCard.tsx","../../../src/components/SearchPage/Results/EventResultCard.tsx","../../../src/components/SearchPage/Results/PlayerResultCard.tsx","../../../src/components/SearchPage/Results/SearchResultCard.tsx","../../../src/components/SearchPage/Results/TableResultCard.tsx"],"names":["jsx","Card","jsxs","CardContent","Box","Typography","Fragment","EventIcon","CalendarTodayIcon","LocationOnIcon","Avatar","CasinoIcon","Chip","LinearProgress"],"mappings":"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","file":"index.cjs","sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport type { Tag } from \"@/types/tag\";\n\nexport function generateTagsDisplay(tag: Tag) {\n    return (\n        <span\n            key={tag.id}\n            className=\"inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined\"\n            style={{\n                marginTop:\"6px\",\n                marginRight: \"6px\",\n                marginBottom: \"6px\",\n                background: tag.color || '#bfbcbb',\n                color: \"white\",\n                textShadow: \"black 0.2em 0.2em 0.4em\"\n            }}\n        >\n            {tag.label}\n        </span>\n    )\n}\n\nexport function renderTagsFromIds(ids: number[] | undefined, legalTags: Tag[]) {\n    if (!ids || !legalTags || legalTags.length === 0) { return ( <></>) }\n    const validTags = ids\n        .map((id) => legalTags.find((tag) => tag.id === id))\n        .filter((tag): tag is Tag => Boolean(tag));\n\n    return validTags.map((tag) => generateTagsDisplay(tag));\n}\n","\"use client\"\nimport React from 'react';\nimport { Card, CardContent, Typography, Box } from '@mui/material';\nimport { Tag } from '@/types/tag';\nimport { SearchResultItem } from '@/types/search';\nimport { generateTagsDisplay } from \"@/components/shared/TagComponents\";\n\nexport interface BaseSearchResultCardProps {\n  result: SearchResultItem;\n  onClick?: (id: number) => void;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  tags: Tag[];\n}\n\n/**\n * Base component for displaying search results with common functionality\n */\nexport const BaseSearchResultCard: React.FC<BaseSearchResultCardProps> = ({ \n  result,\n  onClick,\n  children,\n  icon,\n  tags\n}) => {\n  const handleClick = () => {\n    if (onClick) {\n      onClick(result.id);\n    }\n  };\n\n  return (\n    <Card \n      elevation={6}\n      sx={{ \n        width: '100%', \n        cursor: onClick ? 'pointer' : 'default',\n        boxShadow: '0px 8px 24px rgba(0, 0, 0, 0.15)',\n        transition: 'box-shadow 0.3s ease-in-out',\n        '&:hover': {\n          boxShadow: '0px 12px 28px rgba(0, 0, 0, 0.2)'\n        },\n        marginBottom: 2\n      }}\n      onClick={handleClick}\n    >\n      <CardContent sx={{ display: 'flex', alignItems: 'flex-start' }}>\n        {/* Icon on the left */}\n        {icon && (\n          <Box sx={{ mr: 2, display: 'flex', alignItems: 'center', pt: 0.5 }}>\n            {icon}\n          </Box>\n        )}\n        \n        {/* Content on the right */}\n        <Box sx={{ flex: 1 }}>\n          <Typography variant=\"h6\" sx={{ mb: 1 }}>\n            {result.title}\n          </Typography>\n          \n          {/* Specialized content will be inserted here */}\n          {children}\n          \n          <Typography variant=\"body1\">\n            {result.description}\n          </Typography>\n          \n          {result.tags && result.tags.length > 0 && (\n            <Box sx={{ mt: 1 }}>\n              <Box sx={{\n                display: 'block',\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'clip',\n                pl: 0.5 // Add some padding to prevent clipping of the leftmost tag\n              }}>\n                {(() => {\n                  const MAX_VISIBLE = 5; // heuristic: show up to 5 tags on one line\n                  const tagObjs = result.tags\n                    .map((tagId) => tags.find((t) => t.id === tagId))\n                    .filter((t): t is Tag => Boolean(t));\n                  const visible = tagObjs.slice(0, MAX_VISIBLE);\n                  const hiddenCount = Math.max(tagObjs.length - visible.length, 0);\n                  return (\n                    <>\n                      {visible.map((tag) => generateTagsDisplay(tag))}\n                      {hiddenCount > 0 && (\n                        <span\n                          className=\"inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined\"\n                          style={{\n                            marginTop: '6px',\n                            marginRight: '6px',\n                            marginBottom: '6px',\n                            background: '#9e9e9e',\n                            color: 'white',\n                            textShadow: 'black 0.2em 0.2em 0.4em'\n                          }}\n                        >\n                          +{hiddenCount} more\n                        </span>\n                      )}\n                    </>\n                  );\n                })()}\n              </Box>\n            </Box>\n          )}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default BaseSearchResultCard;","\"use client\"\nimport React from 'react';\nimport { Box, Typography } from '@mui/material';\nimport CalendarTodayIcon from '@mui/icons-material/CalendarToday';\nimport LocationOnIcon from '@mui/icons-material/LocationOn';\nimport EventIcon from '@mui/icons-material/Event';\nimport BaseSearchResultCard from './BaseSearchResultCard';\nimport { Tag } from '@/types/tag';\nimport { SearchResultItem } from '@/types/search';\n\ninterface EventResultCardProps {\n  result: SearchResultItem;\n  onClick?: (id: number) => void;\n  tags: Tag[];\n}\n\nconst EventResultCard: React.FC<EventResultCardProps> = ({\n  result,\n  onClick,\n  tags,\n}) => {\n  const formatDate = (dateString: string) => {\n    const options: Intl.DateTimeFormatOptions = {\n      weekday: 'long',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    };\n\n    try {\n      const date = new Date(dateString);\n      return date.toLocaleDateString('en-US', options);\n    } catch {\n      return dateString;\n    }\n  };\n\n  const formattedDate = result.date ? formatDate(result.date) : 'Date TBD';\n  const location = result.location || 'Location TBD';\n\n  return (\n    <BaseSearchResultCard result={result} onClick={onClick} icon={<EventIcon color=\"primary\" />} tags={tags}>\n      <Box sx={{ mb: 1 }}>\n        <Box sx={{ display: 'flex', alignItems: 'center', mb: 0.5 }}>\n          <CalendarTodayIcon sx={{ mr: 1, fontSize: 'small', color: 'text.secondary' }} />\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {formattedDate}\n          </Typography>\n        </Box>\n        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>\n          <LocationOnIcon sx={{ mr: 1, fontSize: 'small', color: 'text.secondary' }} />\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {location}\n          </Typography>\n        </Box>\n      </Box>\n    </BaseSearchResultCard>\n  );\n};\n\nexport default EventResultCard;\n","\"use client\"\nimport React from 'react';\nimport Avatar from '@mui/material/Avatar';\nimport BaseSearchResultCard from './BaseSearchResultCard';\nimport { Tag } from \"@/types/tag\";\nimport { SearchResultItem } from '@/types/search';\n\ninterface PlayerResultCardProps {\n  result: SearchResultItem;\n  onClick?: (id: number) => void;\n  tags: Tag[];\n}\n\n/**\n * Component for displaying player search results\n * Displays player avatars with consistent color hashing/fallbacks\n */\nconst PlayerResultCard: React.FC<PlayerResultCardProps> = ({ \n  result,\n  onClick,\n  tags\n}) => {\n  // Get the first letter of the username for the avatar fallback\n  const firstLetter = result.title.charAt(0).toUpperCase();\n  \n  // Generate a consistent color based on the username\n  const getAvatarColor = (name: string) => {\n    const colors = [\n      '#F44336', '#E91E63', '#9C27B0', '#673AB7', \n      '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', \n      '#009688', '#4CAF50', '#8BC34A', '#CDDC39', \n      '#FFEB3B', '#FFC107', '#FF9800', '#FF5722'\n    ];\n    \n    let hash = 0;\n    for (let i = 0; i < name.length; i++) {\n      hash = name.charCodeAt(i) + ((hash << 5) - hash);\n    }\n    \n    return colors[Math.abs(hash) % colors.length];\n  };\n  \n  const avatarColor = getAvatarColor(result.title);\n  \n  const playerIcon = (\n    <Avatar \n      src={result.imageUrl} \n      alt={result.title}\n      sx={{ \n        width: 40, \n        height: 40, \n        bgcolor: !result.imageUrl ? avatarColor : undefined\n      }}\n    >\n      {!result.imageUrl && firstLetter}\n    </Avatar>\n  );\n\n  return (\n    <BaseSearchResultCard result={result} onClick={onClick} icon={playerIcon} tags={tags}>\n      {/* No additional content needed */}\n    </BaseSearchResultCard>\n  );\n};\n\nexport default PlayerResultCard;","\"use client\";\n\nimport React from 'react';\r\nimport BaseSearchResultCard from './BaseSearchResultCard';\r\nimport { Tag } from '@/types/tag';\r\n\r\ninterface SearchResultCardProps {\r\n  result: any;\r\n  onClick?: (id: number) => void;\r\n  tags: Tag[];\r\n}\r\n\r\n/**\r\n * @deprecated Use specialized card components (PlayerResultCard, TableResultCard, EventResultCard) instead\r\n * This component is kept for backward compatibility\r\n */\r\nconst SearchResultCard: React.FC<SearchResultCardProps> = ({ \r\n  result,\r\n  onClick,\r\n    tags,\r\n}) => {\r\n  return (\r\n    <BaseSearchResultCard result={result} onClick={onClick} tags={tags}>\r\n      {/* No specialized content for the generic card */}\r\n    </BaseSearchResultCard>\r\n  );\r\n};\r\n\r\nexport default SearchResultCard;","\"use client\"\nimport React from 'react';\nimport { BaseSearchResultCard } from './BaseSearchResultCard';\nimport { Box, Typography, LinearProgress, Chip } from '@mui/material';\nimport CasinoIcon from '@mui/icons-material/Casino';\nimport { Tag } from '@/types/tag';\nimport { SearchResultItem } from '@/types/search';\n\ninterface TableResultCardProps {\n  result: SearchResultItem;\n  tags: Tag[];\n  onClick?: (id: number) => void;\n}\n\nexport const TableResultCard: React.FC<TableResultCardProps> = ({ result, tags, onClick }) => {\n  const capacity = result.capacity || 1;\n  const numPlayers = result.numPlayers || 0;\n  const occupancy = (numPlayers / capacity) * 100;\n  \n  return (\n    <BaseSearchResultCard result={result} tags={tags} onClick={onClick} icon={<CasinoIcon color=\"primary\" />}>\n      <Box sx={{ mb: 1 }}>\n        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            Players: {numPlayers} / {capacity}\n          </Typography>\n          {result.dungeonMaster ? (\n            <Chip label=\"DM Present\" size=\"small\" color=\"success\" variant=\"outlined\" />\n          ) : (\n            <Chip label=\"No DM\" size=\"small\" color=\"warning\" variant=\"outlined\" />\n          )}\n        </Box>\n        <LinearProgress variant=\"determinate\" value={occupancy} sx={{ height: 8, borderRadius: 4 }} />\n      </Box>\n    </BaseSearchResultCard>\n  );\n};\n\nexport default TableResultCard;"]}
+{"version":3,"sources":["../../../src/components/shared/Chip.tsx","../../../src/components/shared/TagComponents.tsx","../../../src/components/SearchPage/Results/BaseSearchResultCard.tsx","../../../src/components/SearchPage/Results/EventResultCard.tsx","../../../src/components/SearchPage/Results/PlayerResultCard.tsx","../../../src/components/SearchPage/Results/SearchResultCard.tsx","../../../src/components/SearchPage/Results/TableResultCard.tsx"],"names":["jsx","Fragment","jsxs","Card","CardContent","Box","Typography","EventIcon","CalendarTodayIcon","LocationOnIcon","Avatar","CasinoIcon","Chip","LinearProgress"],"mappings":"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","file":"index.cjs","sourcesContent":["import React from \"react\";\r\nimport {Tag} from \"@/types/tag\";\r\n\r\nexport default function Chip({ tag, removeCallback }: { tag: Tag, removeCallback?: (tagId: number) => void }) {\r\n  const color = tag.color ?? \"#bfbcbb\";\r\n  return (\r\n      <>\r\n      <span\r\n          key={tag.id}\r\n          className=\"inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans\"\r\n          style={{\r\n            borderColor: `color-mix(in srgb, ${color}, black 50%)`,\r\n            background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,\r\n            textShadow: \"black 1.5px 1px 1.5px\",\r\n            filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`\r\n          }}\r\n      >\r\n          {tag.label}\r\n          {removeCallback && (\r\n              <button\r\n                  type=\"button\"\r\n                  onClick={() => removeCallback(tag.id)}\r\n                  className=\"ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full\"\r\n                  style={{\r\n                    textShadow: \"black 1px 1px 1px\"\r\n                  }}\r\n              >\r\n                X\r\n              </button>\r\n          )}\r\n    </span>\r\n    </>\r\n  )\r\n\r\n}","\"use client\";\r\n\r\nimport React from \"react\";\r\nimport type { Tag } from \"@/types/tag\";\r\nimport Chip from \"@/components/shared/Chip\";\r\n\r\nexport function generateTagsDisplay(tag: Tag) {\r\n    return (\r\n        <Chip tag={tag} key={tag.id} />\r\n    )\r\n}\r\n\r\nexport function renderTagsFromIds(ids: number[] | undefined, legalTags: Tag[]) {\r\n    if (!ids || !legalTags || legalTags.length === 0) { return ( <></>) }\r\n    const validTags = ids\r\n        .map((id) => legalTags.find((tag) => tag.id === id))\r\n        .filter((tag): tag is Tag => Boolean(tag));\r\n\r\n    return validTags.map((tag) => generateTagsDisplay(tag));\r\n}\r\n","\"use client\"\nimport React from 'react';\nimport { Card, CardContent, Typography, Box } from '@mui/material';\nimport { Tag } from '@/types/tag';\nimport { SearchResultItem } from '@/types/search';\nimport { generateTagsDisplay } from \"@/components/shared/TagComponents\";\n\nexport interface BaseSearchResultCardProps {\n  result: SearchResultItem;\n  onClick?: (id: number) => void;\n  icon?: React.ReactNode;\n  children?: React.ReactNode;\n  tags: Tag[];\n}\n\n/**\n * Base component for displaying search results with common functionality\n */\nexport const BaseSearchResultCard: React.FC<BaseSearchResultCardProps> = ({ \n  result,\n  onClick,\n  children,\n  icon,\n  tags\n}) => {\n  const handleClick = () => {\n    if (onClick) {\n      onClick(result.id);\n    }\n  };\n\n  return (\n    <Card \n      elevation={6}\n      sx={{ \n        width: '100%', \n        cursor: onClick ? 'pointer' : 'default',\n        boxShadow: '0px 8px 24px rgba(0, 0, 0, 0.15)',\n        transition: 'box-shadow 0.3s ease-in-out',\n        '&:hover': {\n          boxShadow: '0px 12px 28px rgba(0, 0, 0, 0.2)'\n        },\n        marginBottom: 2\n      }}\n      onClick={handleClick}\n    >\n      <CardContent sx={{ display: 'flex', alignItems: 'flex-start' }}>\n        {/* Icon on the left */}\n        {icon && (\n          <Box sx={{ mr: 2, display: 'flex', alignItems: 'center', pt: 0.5 }}>\n            {icon}\n          </Box>\n        )}\n        \n        {/* Content on the right */}\n        <Box sx={{ flex: 1 }}>\n          <Typography variant=\"h6\" sx={{ mb: 1 }}>\n            {result.title}\n          </Typography>\n          \n          {/* Specialized content will be inserted here */}\n          {children}\n          \n          <Typography variant=\"body1\">\n            {result.description}\n          </Typography>\n          \n          {result.tags && result.tags.length > 0 && (\n            <Box sx={{ mt: 1 }}>\n              <Box sx={{\n                display: 'block',\n                whiteSpace: 'nowrap',\n                overflow: 'hidden',\n                textOverflow: 'clip',\n                pl: 0.5 // Add some padding to prevent clipping of the leftmost tag\n              }}>\n                {(() => {\n                  const MAX_VISIBLE = 5; // heuristic: show up to 5 tags on one line\n                  const tagObjs = result.tags\n                    .map((tagId) => tags.find((t) => t.id === tagId))\n                    .filter((t): t is Tag => Boolean(t));\n                  const visible = tagObjs.slice(0, MAX_VISIBLE);\n                  const hiddenCount = Math.max(tagObjs.length - visible.length, 0);\n                  return (\n                    <>\n                      {visible.map((tag) => generateTagsDisplay(tag))}\n                      {hiddenCount > 0 && (\n                        <span\n                          className=\"inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined\"\n                          style={{\n                            marginTop: '6px',\n                            marginRight: '6px',\n                            marginBottom: '6px',\n                            background: '#9e9e9e',\n                            color: 'white',\n                            textShadow: 'black 0.2em 0.2em 0.4em'\n                          }}\n                        >\n                          +{hiddenCount} more\n                        </span>\n                      )}\n                    </>\n                  );\n                })()}\n              </Box>\n            </Box>\n          )}\n        </Box>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport default BaseSearchResultCard;","\"use client\"\nimport React from 'react';\nimport { Box, Typography } from '@mui/material';\nimport CalendarTodayIcon from '@mui/icons-material/CalendarToday';\nimport LocationOnIcon from '@mui/icons-material/LocationOn';\nimport EventIcon from '@mui/icons-material/Event';\nimport BaseSearchResultCard from './BaseSearchResultCard';\nimport { Tag } from '@/types/tag';\nimport { SearchResultItem } from '@/types/search';\n\ninterface EventResultCardProps {\n  result: SearchResultItem;\n  onClick?: (id: number) => void;\n  tags: Tag[];\n}\n\nconst EventResultCard: React.FC<EventResultCardProps> = ({\n  result,\n  onClick,\n  tags,\n}) => {\n  const formatDate = (dateString: string) => {\n    const options: Intl.DateTimeFormatOptions = {\n      weekday: 'long',\n      year: 'numeric',\n      month: 'long',\n      day: 'numeric',\n    };\n\n    try {\n      const date = new Date(dateString);\n      return date.toLocaleDateString('en-US', options);\n    } catch {\n      return dateString;\n    }\n  };\n\n  const formattedDate = result.date ? formatDate(result.date) : 'Date TBD';\n  const location = result.location || 'Location TBD';\n\n  return (\n    <BaseSearchResultCard result={result} onClick={onClick} icon={<EventIcon color=\"primary\" />} tags={tags}>\n      <Box sx={{ mb: 1 }}>\n        <Box sx={{ display: 'flex', alignItems: 'center', mb: 0.5 }}>\n          <CalendarTodayIcon sx={{ mr: 1, fontSize: 'small', color: 'text.secondary' }} />\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {formattedDate}\n          </Typography>\n        </Box>\n        <Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>\n          <LocationOnIcon sx={{ mr: 1, fontSize: 'small', color: 'text.secondary' }} />\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {location}\n          </Typography>\n        </Box>\n      </Box>\n    </BaseSearchResultCard>\n  );\n};\n\nexport default EventResultCard;\n","\"use client\"\nimport React from 'react';\nimport Avatar from '@mui/material/Avatar';\nimport BaseSearchResultCard from './BaseSearchResultCard';\nimport { Tag } from \"@/types/tag\";\nimport { SearchResultItem } from '@/types/search';\n\ninterface PlayerResultCardProps {\n  result: SearchResultItem;\n  onClick?: (id: number) => void;\n  tags: Tag[];\n}\n\n/**\n * Component for displaying player search results\n * Displays player avatars with consistent color hashing/fallbacks\n */\nconst PlayerResultCard: React.FC<PlayerResultCardProps> = ({ \n  result,\n  onClick,\n  tags\n}) => {\n  // Get the first letter of the username for the avatar fallback\n  const firstLetter = result.title.charAt(0).toUpperCase();\n  \n  // Generate a consistent color based on the username\n  const getAvatarColor = (name: string) => {\n    const colors = [\n      '#F44336', '#E91E63', '#9C27B0', '#673AB7', \n      '#3F51B5', '#2196F3', '#03A9F4', '#00BCD4', \n      '#009688', '#4CAF50', '#8BC34A', '#CDDC39', \n      '#FFEB3B', '#FFC107', '#FF9800', '#FF5722'\n    ];\n    \n    let hash = 0;\n    for (let i = 0; i < name.length; i++) {\n      hash = name.charCodeAt(i) + ((hash << 5) - hash);\n    }\n    \n    return colors[Math.abs(hash) % colors.length];\n  };\n  \n  const avatarColor = getAvatarColor(result.title);\n  \n  const playerIcon = (\n    <Avatar \n      src={result.imageUrl} \n      alt={result.title}\n      sx={{ \n        width: 40, \n        height: 40, \n        bgcolor: !result.imageUrl ? avatarColor : undefined\n      }}\n    >\n      {!result.imageUrl && firstLetter}\n    </Avatar>\n  );\n\n  return (\n    <BaseSearchResultCard result={result} onClick={onClick} icon={playerIcon} tags={tags}>\n      {/* No additional content needed */}\n    </BaseSearchResultCard>\n  );\n};\n\nexport default PlayerResultCard;","\"use client\";\n\nimport React from 'react';\r\nimport BaseSearchResultCard from './BaseSearchResultCard';\r\nimport { Tag } from '@/types/tag';\r\n\r\ninterface SearchResultCardProps {\r\n  result: any;\r\n  onClick?: (id: number) => void;\r\n  tags: Tag[];\r\n}\r\n\r\n/**\r\n * @deprecated Use specialized card components (PlayerResultCard, TableResultCard, EventResultCard) instead\r\n * This component is kept for backward compatibility\r\n */\r\nconst SearchResultCard: React.FC<SearchResultCardProps> = ({ \r\n  result,\r\n  onClick,\r\n    tags,\r\n}) => {\r\n  return (\r\n    <BaseSearchResultCard result={result} onClick={onClick} tags={tags}>\r\n      {/* No specialized content for the generic card */}\r\n    </BaseSearchResultCard>\r\n  );\r\n};\r\n\r\nexport default SearchResultCard;","\"use client\"\nimport React from 'react';\nimport { BaseSearchResultCard } from './BaseSearchResultCard';\nimport { Box, Typography, LinearProgress, Chip } from '@mui/material';\nimport CasinoIcon from '@mui/icons-material/Casino';\nimport { Tag } from '@/types/tag';\nimport { SearchResultItem } from '@/types/search';\n\ninterface TableResultCardProps {\n  result: SearchResultItem;\n  tags: Tag[];\n  onClick?: (id: number) => void;\n}\n\nexport const TableResultCard: React.FC<TableResultCardProps> = ({ result, tags, onClick }) => {\n  const capacity = result.capacity || 1;\n  const numPlayers = result.numPlayers || 0;\n  const occupancy = (numPlayers / capacity) * 100;\n  \n  return (\n    <BaseSearchResultCard result={result} tags={tags} onClick={onClick} icon={<CasinoIcon color=\"primary\" />}>\n      <Box sx={{ mb: 1 }}>\n        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            Players: {numPlayers} / {capacity}\n          </Typography>\n          {result.dungeonMaster ? (\n            <Chip label=\"DM Present\" size=\"small\" color=\"success\" variant=\"outlined\" />\n          ) : (\n            <Chip label=\"No DM\" size=\"small\" color=\"warning\" variant=\"outlined\" />\n          )}\n        </Box>\n        <LinearProgress variant=\"determinate\" value={occupancy} sx={{ height: 8, borderRadius: 4 }} />\n      </Box>\n    </BaseSearchResultCard>\n  );\n};\n\nexport default TableResultCard;"]}

package/dist/SearchPage/Results/index.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { Card, CardContent, Box, Typography, Chip, LinearProgress } from '@mui/material';
+import { Card, CardContent, Box, Typography, Chip as Chip$1, LinearProgress } from '@mui/material';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
 import LocationOnIcon from '@mui/icons-material/LocationOn';
@@ -7,23 +7,40 @@ import EventIcon from '@mui/icons-material/Event';
 import Avatar from '@mui/material/Avatar';
 import CasinoIcon from '@mui/icons-material/Casino';
 
-function generateTagsDisplay(tag) {
-  return /* @__PURE__ */ jsx(
+function Chip({ tag, removeCallback }) {
+  var _a;
+  const color = (_a = tag.color) != null ? _a : "#bfbcbb";
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
     "span",
     {
-      className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
+      className: "inline-block text-sm px-3 py-1 rounded-full border-2 font-outlined text-white m-0.5 font-stretch-105% font-sans",
       style: {
-        marginTop: "6px",
-        marginRight: "6px",
-        marginBottom: "6px",
-        background: tag.color || "#bfbcbb",
-        color: "white",
-        textShadow: "black 0.2em 0.2em 0.4em"
+        borderColor: `color-mix(in srgb, ${color}, black 50%)`,
+        background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
+        textShadow: "black 1.5px 1px 1.5px",
+        filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
       },
-      children: tag.label
+      children: [
+        tag.label,
+        removeCallback && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => removeCallback(tag.id),
+            className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
+            style: {
+              textShadow: "black 1px 1px 1px"
+            },
+            children: "X"
+          }
+        )
+      ]
     },
     tag.id
-  );
+  ) });
+}
+function generateTagsDisplay(tag) {
+  return /* @__PURE__ */ jsx(Chip, { tag }, tag.id);
 }
 var BaseSearchResultCard = ({
   result,
@@ -200,7 +217,7 @@ var TableResultCard = ({ result, tags, onClick }) => {
         " / ",
         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" })
+      result.dungeonMaster ? /* @__PURE__ */ jsx(Chip$1, { label: "DM Present", size: "small", color: "success", variant: "outlined" }) : /* @__PURE__ */ jsx(Chip$1, { label: "No DM", size: "small", color: "warning", variant: "outlined" })
     ] }),
     /* @__PURE__ */ jsx(LinearProgress, { variant: "determinate", value: occupancy, sx: { height: 8, borderRadius: 4 } })
   ] }) });