@mbpockets/shared-ui 0.1.18 → 0.1.20

package/dist/ProfilePage/index.mjs

@@ -1,72 +1,454 @@
 "use client";
-import { useState, useMemo } from 'react';
+import { Card, CardContent, Typography, CardMedia, CardHeader, TextField, useTheme, useMediaQuery, NoSsr, Box, Grid } from '@mui/material';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo } from 'react';
 import Autocomplete from '@mui/material/Autocomplete';
-import Card from '@mui/material/Card';
-import CardContent from '@mui/material/CardContent';
-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';
 
-// src/components/shared/TagEditor.tsx
-function TagEditor({
-  title = "Tags",
-  selectedTags,
-  possibleTags,
+// src/components/PlayerPage/PlayerDetailsCard.tsx
+var PlayerDetailsCard = ({
+  preferredPronouns,
+  age,
+  yearsPlaying,
+  discordUsername,
+  preferredGames
+}) => {
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      sx: {
+        margin: "1rem",
+        background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+        // Primary Blue Gradient
+        boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+        // Deep shadow based on the color
+        borderRadius: "12px",
+        // Rounded corners
+        color: "#FFFFFF",
+        // White as the base text color for contrast
+        position: "relative",
+        overflow: "hidden"
+        // Ensures clean edges
+      },
+      className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "absolute inset-0 bg-gradient-to-t from-white/10 to-transparent opacity-60",
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsxs(CardContent, { className: "relative p-6", children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "h5",
+              className: "font-bold uppercase text-center tracking-wide mb-4",
+              sx: {
+                color: "#FFFFFF",
+                // Bright white for high contrast
+                textShadow: "0px 4px 8px rgba(0, 0, 0, 0.5)",
+                // Stronger shadow for bold presence
+                fontSize: "1.5rem"
+                // Slightly larger title size
+              },
+              children: "Player Details"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
+            preferredPronouns && /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-extrabold text-cyan-300", children: "Preferred Pronouns:" }),
+                  " ",
+                  preferredPronouns
+                ]
+              }
+            ),
+            age !== null && /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-extrabold text-cyan-300", children: "Age:" }),
+                  " ",
+                  age
+                ]
+              }
+            ),
+            yearsPlaying !== null && /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-extrabold text-cyan-300", children: "Years Playing:" }),
+                  " ",
+                  yearsPlaying
+                ]
+              }
+            ),
+            discordUsername && /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-extrabold text-cyan-300", children: "Discord Username:" }),
+                  " ",
+                  discordUsername
+                ]
+              }
+            ),
+            preferredGames && /* @__PURE__ */ jsxs(
+              Typography,
+              {
+                variant: "body2",
+                className: "text-sm font-medium",
+                sx: {
+                  color: "#FFFFFF",
+                  textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
+                  fontWeight: "bold"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-extrabold text-cyan-300", children: "Preferred Games:" }),
+                  " ",
+                  Array.isArray(preferredGames) ? preferredGames.join(", ") : preferredGames
+                ]
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "mt-6 text-center", children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "caption",
+              className: "text-xs italic",
+              sx: {
+                color: "#BBDEFB",
+                // Subtle light blue for footer text
+                textShadow: "0px 1px 3px rgba(0, 0, 0, 0.2)"
+              },
+              children: "All information is player-submitted."
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+};
+var PlayerDetailsCard_default = PlayerDetailsCard;
+
+// src/data/values.tsx
+var ProfilePictureSettings = {
+  aspectRatio: 4 / 5};
+var PlayerDisplayCard = ({ profilePicture, username, bio, preferredPronouns }) => {
+  const defaultImg = "/man-walking-silhouette-clipart.jpg";
+  const [imageSrc, setImageSrc] = useState(defaultImg);
+  const { aspectRatio } = ProfilePictureSettings;
+  useEffect(() => {
+    async function validateImage() {
+      const newImage = profilePicture || defaultImg;
+      if (!profilePicture) {
+        setImageSrc(defaultImg);
+        return;
+      }
+      const img = new Image();
+      img.src = newImage;
+      img.onload = () => {
+        setImageSrc(newImage);
+      };
+      img.onerror = () => {
+        setImageSrc(defaultImg);
+      };
+    }
+    validateImage();
+  }, [profilePicture]);
+  return /* @__PURE__ */ jsxs(
+    Card,
+    {
+      sx: {
+        margin: "1rem",
+        background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+        // Vibrant blue gradient
+        boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+        // Blue shadow to add depth
+        borderRadius: "12px",
+        // Smooth rounded corners
+        color: "#FFFFFF",
+        // White text for high contrast
+        overflow: "hidden"
+        // Clean edges
+      },
+      className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
+      children: [
+        /* @__PURE__ */ jsx(
+          CardMedia,
+          {
+            component: "img",
+            image: imageSrc,
+            alt: `${username}'s Profile Picture`,
+            sx: {
+              aspectRatio,
+              height: "auto",
+              // Updates to maintain aspect ratio and fill space nicely
+              width: "100%",
+              objectFit: "cover"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs(CardContent, { className: "relative p-6", children: [
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "h5",
+              component: "div",
+              className: "font-bold text-lg uppercase text-center tracking-wide mb-2",
+              sx: {
+                color: "#FFFFFF",
+                // Pure white for username
+                fontSize: "1.5rem",
+                textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
+                // Strong shadow for visibility
+              },
+              children: username
+            }
+          ),
+          preferredPronouns && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              className: "text-sm font-medium",
+              sx: {
+                color: "#E3F2FD",
+                textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
+                // Subtle shadow for readability
+                fontWeight: "bold",
+                // Emphasize key details
+                marginBottom: "1rem"
+              },
+              children: preferredPronouns
+            }
+          ),
+          bio && /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              className: "text-sm font-light",
+              sx: {
+                color: "#E3F2FD",
+                // Softer muted tone for secondary text
+                textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
+                // Subtle shadow for readability
+                fontStyle: "italic"
+                // Distinguish bio visually
+              },
+              children: bio
+            }
+          )
+        ] })
+      ]
+    }
+  );
+};
+var PlayerDisplayCard_default = PlayerDisplayCard;
+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
+  ) });
+}
+var PlayerTagsCard = ({ tags = [] }) => {
+  return /* @__PURE__ */ jsxs(Card, { sx: {
+    margin: "1rem",
+    borderRadius: "12px",
+    boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+    overflow: "hidden"
+  }, className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl", children: [
+    /* @__PURE__ */ jsx(
+      CardHeader,
+      {
+        title: "Player Tags",
+        sx: {
+          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)",
+          "& .MuiCardHeader-title": {
+            fontWeight: "bold",
+            fontSize: "1.5rem",
+            textAlign: "center",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          }
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(CardContent, { className: "p-6", children: /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsx(Chip, { tag }, tag.id)) }) })
+  ] });
+};
+var PlayerTagsCard_default = PlayerTagsCard;
+var PlayerPromptCard = ({ title, description }) => /* @__PURE__ */ jsx(
+  Card,
+  {
+    sx: {
+      margin: "1rem",
+      background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
+      // Gradient color scheme
+      boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+      // Card shadow
+      borderRadius: "12px",
+      // Rounded corners
+      color: "#FFFFFF",
+      // Text contrast with the background
+      overflow: "hidden"
+      // Keeps consistent and clean card shape
+    },
+    className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
+    children: /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
+      title && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "h5",
+          className: "font-bold text-lg uppercase text-center tracking-wide mb-4",
+          sx: {
+            color: "#FFFFFF",
+            // Bright white for high visibility
+            textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
+            // Strong text shadow for contrast
+            fontSize: "1.5rem"
+          },
+          children: title
+        }
+      ),
+      description && /* @__PURE__ */ jsx(
+        Typography,
+        {
+          variant: "body2",
+          className: "text-sm font-medium text-center",
+          sx: {
+            color: "#E3F2FD",
+            // Softer light blue for description
+            textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
+            // Subtle shadow
+            lineHeight: 1.6,
+            marginTop: "1rem"
+          },
+          children: description
+        }
+      )
+    ] })
+  }
+);
+var PlayerPromptCard_default = PlayerPromptCard;
+var PlayerTagsEdit = ({
+  selectedTags = [],
+  possibleTags = [],
   onToggleTag
-}) {
+}) => {
   const [inputValue, setInputValue] = useState("");
   const selectedIds = useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
   const options = useMemo(
-    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),
+    () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label, alternate_title: tag.alternate_title })),
     [possibleTags]
   );
-  return /* @__PURE__ */ jsx(Grid, { container: true, children: /* @__PURE__ */ jsx(Grid, { size: { xs: 12 }, children: /* @__PURE__ */ jsxs(Card, { children: [
+  return /* @__PURE__ */ jsxs(Card, { sx: {
+    margin: "1rem",
+    borderRadius: "12px",
+    boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
+    overflow: "hidden"
+  }, children: [
     /* @__PURE__ */ jsx(
       CardHeader,
       {
-        title,
-        style: {
+        title: "Player Tags",
+        sx: {
           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)"
+          textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
+          "& .MuiCardHeader-title": {
+            fontWeight: "bold",
+            fontSize: "1.5rem",
+            textAlign: "center",
+            textTransform: "uppercase",
+            letterSpacing: "0.05em"
+          }
         }
       }
     ),
-    /* @__PURE__ */ jsxs(CardContent, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxs(
-        "span",
+    /* @__PURE__ */ jsxs(CardContent, { className: "p-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 mb-4", 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
       )) }),
-      /* @__PURE__ */ jsx(Grid, { container: true, spacing: 3, children: /* @__PURE__ */ jsx(Grid, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(
         Autocomplete,
         {
           options,
-          filterOptions: (availableOptions, state) => availableOptions.filter(
-            (option) => !selectedIds.includes(option.value) && option.label.toLowerCase().includes(state.inputValue.toLowerCase())
-          ).slice(0, 3),
+          filterOptions: (availableOptions, state) => {
+            const query = state.inputValue.toLowerCase();
+            return availableOptions.filter(
+              (option) => {
+                var _a;
+                return !selectedIds.includes(option.value) && (option.label.toLowerCase().includes(query) || ((_a = option.alternate_title) == null ? void 0 : _a.some((title) => title.toLowerCase().includes(query))));
+              }
+            ).slice(0, 5);
+          },
           value: null,
           inputValue,
           onInputChange: (event, newInputValue) => {
@@ -81,13 +463,20 @@ function TagEditor({
             setInputValue("");
           },
           slots: { popper: CustomPopper },
-          renderInput: (params) => /* @__PURE__ */ jsx(TextField, { ...params, label: "Select Tags" })
+          renderInput: (params) => /* @__PURE__ */ jsx(
+            TextField,
+            {
+              ...params,
+              label: "Select Tags",
+              variant: "outlined"
+            }
+          )
         },
         selectedIds.join("-")
-      ) }) })
+      )
     ] })
-  ] }) }) });
-}
+  ] });
+};
 var CustomPopper = (props) => {
   return /* @__PURE__ */ jsx(
     Popper,
@@ -96,29 +485,86 @@ var CustomPopper = (props) => {
       modifiers: [
         {
           name: "preventOverflow",
-          options: { boundary: "viewport" }
+          options: {
+            boundary: "viewport"
+          }
         },
         {
           name: "offset",
-          options: { offset: [0, -10] }
+          options: {
+            offset: [0, -10]
+          }
         }
       ],
       placement: "top-start"
     }
   );
 };
-function PlayerTagsEdit(props) {
-  return /* @__PURE__ */ jsx(
-    TagEditor,
+var PlayerTagsEdit_default = PlayerTagsEdit;
+function PlayerPageLayout({
+  playerData,
+  tags = [],
+  blurbs = [],
+  isOwner = false,
+  possibleTags = [],
+  onToggleTag = () => {
+  }
+}) {
+  const theme = useTheme();
+  const isSmallScreen = useMediaQuery(theme.breakpoints.down("lg"));
+  const tagsElement = isOwner ? /* @__PURE__ */ jsx(
+    PlayerTagsEdit_default,
     {
-      title: "Player Tags",
-      selectedTags: props.PlayerTags,
-      possibleTags: props.possibleTags,
-      onToggleTag: props.updatePlayerTags
+      selectedTags: tags,
+      possibleTags,
+      onToggleTag
     }
-  );
+  ) : /* @__PURE__ */ jsx(PlayerTagsCard_default, { tags });
+  return /* @__PURE__ */ jsx(NoSsr, { children: /* @__PURE__ */ jsx(Box, { sx: { padding: "2rem", marginRight: "auto", marginLeft: "auto" }, justifyContent: "center", children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, justifyContent: "center", sx: { marginRight: "auto", marginLeft: "auto" }, children: [
+    !isSmallScreen && /* @__PURE__ */ jsxs(Grid, { size: { xs: 12, lg: 3 }, children: [
+      /* @__PURE__ */ jsx(
+        PlayerDetailsCard_default,
+        {
+          preferredPronouns: playerData.preferredPronouns,
+          age: playerData.age,
+          yearsPlaying: playerData.yearsPlaying,
+          discordUsername: playerData.discordUsername,
+          preferredGames: playerData.preferredGames
+        }
+      ),
+      tagsElement
+    ] }),
+    /* @__PURE__ */ jsx(Grid, { size: { xs: 12, lg: 6 }, children: /* @__PURE__ */ jsxs(Grid, { container: true, spacing: 3, children: [
+      /* @__PURE__ */ jsx(Grid, { size: { xs: 12, lg: 8 }, children: /* @__PURE__ */ jsx(
+        PlayerDisplayCard_default,
+        {
+          profilePicture: playerData.profilePicture,
+          username: playerData.username,
+          bio: playerData.bio,
+          preferredPronouns: playerData.preferredPronouns
+        }
+      ) }),
+      isSmallScreen && /* @__PURE__ */ jsx(Grid, { size: { xs: 12, lg: 3 }, children: /* @__PURE__ */ jsx(
+        PlayerDetailsCard_default,
+        {
+          preferredPronouns: playerData.preferredPronouns,
+          age: playerData.age,
+          yearsPlaying: playerData.yearsPlaying,
+          discordUsername: playerData.discordUsername,
+          preferredGames: playerData.preferredGames
+        }
+      ) }),
+      blurbs.map((blurb, index) => /* @__PURE__ */ jsx(Grid, { size: { xs: 12, lg: 8 }, children: /* @__PURE__ */ jsx(
+        PlayerPromptCard_default,
+        {
+          title: blurb.title,
+          description: blurb.description
+        }
+      ) }, index))
+    ] }) })
+  ] }) }) });
 }
 
-export { PlayerTagsEdit };
+export { PlayerDetailsCard_default as PlayerDetailsCard, PlayerDisplayCard_default as PlayerDisplayCard, PlayerPageLayout, PlayerPromptCard_default as PlayerPromptCard, PlayerTagsCard_default as PlayerTagsCard, PlayerTagsEdit_default as PlayerTagsEdit };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map