@mbpockets/shared-ui 0.1.18 → 0.1.20

package/dist/EventPage/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 import { createContext, useState, useEffect, useContext } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Box, Grid, TextField, Tooltip, IconButton, Button, CircularProgress, Dialog, DialogTitle, DialogContent, DialogActions, Card, CardContent, Typography, FormControl, InputLabel, Select, MenuItem, Chip, LinearProgress } from '@mui/material';
+import { Box, Grid, TextField, Tooltip, IconButton, Button, CircularProgress, Dialog, DialogTitle, DialogContent, DialogActions, Card, CardContent, Typography, FormControl, InputLabel, Select, MenuItem, Chip as Chip$1, LinearProgress } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import EditIcon from '@mui/icons-material/Edit';
 import AddIcon from '@mui/icons-material/Add';
@@ -72,23 +72,40 @@ function useEventEdit() {
   }
   return context;
 }
-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);
 }
 function EventBannerEdit({
   initialValue,
@@ -1032,7 +1049,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 } })
   ] }) });