@mbpockets/shared-ui 0.1.18 → 0.1.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (91) hide show
  1. package/dist/EventPage/editMode/index.cjs +28 -11
  2. package/dist/EventPage/editMode/index.cjs.map +1 -1
  3. package/dist/EventPage/editMode/index.mjs +29 -12
  4. package/dist/EventPage/editMode/index.mjs.map +1 -1
  5. package/dist/EventPage/editMode.cjs +28 -11
  6. package/dist/EventPage/editMode.cjs.map +1 -1
  7. package/dist/EventPage/editMode.mjs +29 -12
  8. package/dist/EventPage/editMode.mjs.map +1 -1
  9. package/dist/EventPage/index.cjs +28 -11
  10. package/dist/EventPage/index.cjs.map +1 -1
  11. package/dist/EventPage/index.mjs +30 -13
  12. package/dist/EventPage/index.mjs.map +1 -1
  13. package/dist/EventPage.cjs +28 -11
  14. package/dist/EventPage.cjs.map +1 -1
  15. package/dist/EventPage.mjs +30 -13
  16. package/dist/EventPage.mjs.map +1 -1
  17. package/dist/PlayerPage/index.cjs +311 -99
  18. package/dist/PlayerPage/index.cjs.map +1 -1
  19. package/dist/PlayerPage/index.d.cts +1 -1
  20. package/dist/PlayerPage/index.d.ts +1 -1
  21. package/dist/PlayerPage/index.mjs +310 -98
  22. package/dist/PlayerPage/index.mjs.map +1 -1
  23. package/dist/PlayerPage.cjs +311 -99
  24. package/dist/PlayerPage.cjs.map +1 -1
  25. package/dist/PlayerPage.d.cts +24 -6
  26. package/dist/PlayerPage.d.ts +24 -6
  27. package/dist/PlayerPage.mjs +310 -98
  28. package/dist/PlayerPage.mjs.map +1 -1
  29. package/dist/ProfilePage/index.cjs +509 -63
  30. package/dist/ProfilePage/index.cjs.map +1 -1
  31. package/dist/ProfilePage/index.d.cts +2 -1
  32. package/dist/ProfilePage/index.d.ts +2 -1
  33. package/dist/ProfilePage/index.mjs +504 -58
  34. package/dist/ProfilePage/index.mjs.map +1 -1
  35. package/dist/ProfilePage.cjs +509 -63
  36. package/dist/ProfilePage.cjs.map +1 -1
  37. package/dist/ProfilePage.d.cts +4 -10
  38. package/dist/ProfilePage.d.ts +4 -10
  39. package/dist/ProfilePage.mjs +504 -58
  40. package/dist/ProfilePage.mjs.map +1 -1
  41. package/dist/SearchPage/Results/index.cjs +28 -11
  42. package/dist/SearchPage/Results/index.cjs.map +1 -1
  43. package/dist/SearchPage/Results/index.mjs +30 -13
  44. package/dist/SearchPage/Results/index.mjs.map +1 -1
  45. package/dist/SearchPage/Results.cjs +28 -11
  46. package/dist/SearchPage/Results.cjs.map +1 -1
  47. package/dist/SearchPage/Results.mjs +30 -13
  48. package/dist/SearchPage/Results.mjs.map +1 -1
  49. package/dist/SearchPage/index.cjs +28 -11
  50. package/dist/SearchPage/index.cjs.map +1 -1
  51. package/dist/SearchPage/index.mjs +30 -13
  52. package/dist/SearchPage/index.mjs.map +1 -1
  53. package/dist/SearchPage.cjs +28 -11
  54. package/dist/SearchPage.cjs.map +1 -1
  55. package/dist/SearchPage.mjs +30 -13
  56. package/dist/SearchPage.mjs.map +1 -1
  57. package/dist/TablePage/index.cjs +32 -31
  58. package/dist/TablePage/index.cjs.map +1 -1
  59. package/dist/TablePage/index.mjs +32 -31
  60. package/dist/TablePage/index.mjs.map +1 -1
  61. package/dist/TablePage/players/index.cjs +28 -11
  62. package/dist/TablePage/players/index.cjs.map +1 -1
  63. package/dist/TablePage/players/index.mjs +28 -11
  64. package/dist/TablePage/players/index.mjs.map +1 -1
  65. package/dist/TablePage/players.cjs +28 -11
  66. package/dist/TablePage/players.cjs.map +1 -1
  67. package/dist/TablePage/players.mjs +28 -11
  68. package/dist/TablePage/players.mjs.map +1 -1
  69. package/dist/TablePage.cjs +32 -31
  70. package/dist/TablePage.cjs.map +1 -1
  71. package/dist/TablePage.mjs +32 -31
  72. package/dist/TablePage.mjs.map +1 -1
  73. package/dist/common/index.cjs +38 -36
  74. package/dist/common/index.cjs.map +1 -1
  75. package/dist/common/index.d.cts +1 -1
  76. package/dist/common/index.d.ts +1 -1
  77. package/dist/common/index.mjs +39 -38
  78. package/dist/common/index.mjs.map +1 -1
  79. package/dist/common.cjs +38 -36
  80. package/dist/common.cjs.map +1 -1
  81. package/dist/common.d.cts +6 -1
  82. package/dist/common.d.ts +6 -1
  83. package/dist/common.mjs +39 -38
  84. package/dist/common.mjs.map +1 -1
  85. package/dist/index.cjs +373 -199
  86. package/dist/index.cjs.map +1 -1
  87. package/dist/index.d.cts +2 -3
  88. package/dist/index.d.ts +2 -3
  89. package/dist/index.mjs +370 -198
  90. package/dist/index.mjs.map +1 -1
  91. package/package.json +2 -1
@@ -1,84 +1,461 @@
1
1
  "use client";
2
2
  'use strict';
3
3
 
4
+ var material = require('@mui/material');
5
+ var jsxRuntime = require('react/jsx-runtime');
4
6
  var react = require('react');
5
7
  var Autocomplete = require('@mui/material/Autocomplete');
6
- var Card = require('@mui/material/Card');
7
- var CardContent = require('@mui/material/CardContent');
8
- var CardHeader = require('@mui/material/CardHeader');
9
- var Grid = require('@mui/material/Grid');
10
8
  var Popper = require('@mui/material/Popper');
11
- var TextField = require('@mui/material/TextField');
12
- var jsxRuntime = require('react/jsx-runtime');
13
9
 
14
10
  function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
15
11
 
16
12
  var Autocomplete__default = /*#__PURE__*/_interopDefault(Autocomplete);
17
- var Card__default = /*#__PURE__*/_interopDefault(Card);
18
- var CardContent__default = /*#__PURE__*/_interopDefault(CardContent);
19
- var CardHeader__default = /*#__PURE__*/_interopDefault(CardHeader);
20
- var Grid__default = /*#__PURE__*/_interopDefault(Grid);
21
13
  var Popper__default = /*#__PURE__*/_interopDefault(Popper);
22
- var TextField__default = /*#__PURE__*/_interopDefault(TextField);
23
14
 
24
- // src/components/shared/TagEditor.tsx
25
- function TagEditor({
26
- title = "Tags",
27
- selectedTags,
28
- possibleTags,
15
+ // src/components/PlayerPage/PlayerDetailsCard.tsx
16
+ var PlayerDetailsCard = ({
17
+ preferredPronouns,
18
+ age,
19
+ yearsPlaying,
20
+ discordUsername,
21
+ preferredGames
22
+ }) => {
23
+ return /* @__PURE__ */ jsxRuntime.jsxs(
24
+ material.Card,
25
+ {
26
+ sx: {
27
+ margin: "1rem",
28
+ background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
29
+ // Primary Blue Gradient
30
+ boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
31
+ // Deep shadow based on the color
32
+ borderRadius: "12px",
33
+ // Rounded corners
34
+ color: "#FFFFFF",
35
+ // White as the base text color for contrast
36
+ position: "relative",
37
+ overflow: "hidden"
38
+ // Ensures clean edges
39
+ },
40
+ className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
41
+ children: [
42
+ /* @__PURE__ */ jsxRuntime.jsx(
43
+ "div",
44
+ {
45
+ className: "absolute inset-0 bg-gradient-to-t from-white/10 to-transparent opacity-60",
46
+ "aria-hidden": "true"
47
+ }
48
+ ),
49
+ /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "relative p-6", children: [
50
+ /* @__PURE__ */ jsxRuntime.jsx(
51
+ material.Typography,
52
+ {
53
+ variant: "h5",
54
+ className: "font-bold uppercase text-center tracking-wide mb-4",
55
+ sx: {
56
+ color: "#FFFFFF",
57
+ // Bright white for high contrast
58
+ textShadow: "0px 4px 8px rgba(0, 0, 0, 0.5)",
59
+ // Stronger shadow for bold presence
60
+ fontSize: "1.5rem"
61
+ // Slightly larger title size
62
+ },
63
+ children: "Player Details"
64
+ }
65
+ ),
66
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
67
+ preferredPronouns && /* @__PURE__ */ jsxRuntime.jsxs(
68
+ material.Typography,
69
+ {
70
+ variant: "body2",
71
+ className: "text-sm font-medium",
72
+ sx: {
73
+ color: "#FFFFFF",
74
+ textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
75
+ fontWeight: "bold"
76
+ },
77
+ children: [
78
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Preferred Pronouns:" }),
79
+ " ",
80
+ preferredPronouns
81
+ ]
82
+ }
83
+ ),
84
+ age !== null && /* @__PURE__ */ jsxRuntime.jsxs(
85
+ material.Typography,
86
+ {
87
+ variant: "body2",
88
+ className: "text-sm font-medium",
89
+ sx: {
90
+ color: "#FFFFFF",
91
+ textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
92
+ fontWeight: "bold"
93
+ },
94
+ children: [
95
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Age:" }),
96
+ " ",
97
+ age
98
+ ]
99
+ }
100
+ ),
101
+ yearsPlaying !== null && /* @__PURE__ */ jsxRuntime.jsxs(
102
+ material.Typography,
103
+ {
104
+ variant: "body2",
105
+ className: "text-sm font-medium",
106
+ sx: {
107
+ color: "#FFFFFF",
108
+ textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
109
+ fontWeight: "bold"
110
+ },
111
+ children: [
112
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Years Playing:" }),
113
+ " ",
114
+ yearsPlaying
115
+ ]
116
+ }
117
+ ),
118
+ discordUsername && /* @__PURE__ */ jsxRuntime.jsxs(
119
+ material.Typography,
120
+ {
121
+ variant: "body2",
122
+ className: "text-sm font-medium",
123
+ sx: {
124
+ color: "#FFFFFF",
125
+ textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
126
+ fontWeight: "bold"
127
+ },
128
+ children: [
129
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Discord Username:" }),
130
+ " ",
131
+ discordUsername
132
+ ]
133
+ }
134
+ ),
135
+ preferredGames && /* @__PURE__ */ jsxRuntime.jsxs(
136
+ material.Typography,
137
+ {
138
+ variant: "body2",
139
+ className: "text-sm font-medium",
140
+ sx: {
141
+ color: "#FFFFFF",
142
+ textShadow: "0px 2px 6px rgba(0, 0, 0, 0.5)",
143
+ fontWeight: "bold"
144
+ },
145
+ children: [
146
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-extrabold text-cyan-300", children: "Preferred Games:" }),
147
+ " ",
148
+ Array.isArray(preferredGames) ? preferredGames.join(", ") : preferredGames
149
+ ]
150
+ }
151
+ )
152
+ ] }),
153
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 text-center", children: /* @__PURE__ */ jsxRuntime.jsx(
154
+ material.Typography,
155
+ {
156
+ variant: "caption",
157
+ className: "text-xs italic",
158
+ sx: {
159
+ color: "#BBDEFB",
160
+ // Subtle light blue for footer text
161
+ textShadow: "0px 1px 3px rgba(0, 0, 0, 0.2)"
162
+ },
163
+ children: "All information is player-submitted."
164
+ }
165
+ ) })
166
+ ] })
167
+ ]
168
+ }
169
+ );
170
+ };
171
+ var PlayerDetailsCard_default = PlayerDetailsCard;
172
+
173
+ // src/data/values.tsx
174
+ var ProfilePictureSettings = {
175
+ aspectRatio: 4 / 5};
176
+ var PlayerDisplayCard = ({ profilePicture, username, bio, preferredPronouns }) => {
177
+ const defaultImg = "/man-walking-silhouette-clipart.jpg";
178
+ const [imageSrc, setImageSrc] = react.useState(defaultImg);
179
+ const { aspectRatio } = ProfilePictureSettings;
180
+ react.useEffect(() => {
181
+ async function validateImage() {
182
+ const newImage = profilePicture || defaultImg;
183
+ if (!profilePicture) {
184
+ setImageSrc(defaultImg);
185
+ return;
186
+ }
187
+ const img = new Image();
188
+ img.src = newImage;
189
+ img.onload = () => {
190
+ setImageSrc(newImage);
191
+ };
192
+ img.onerror = () => {
193
+ setImageSrc(defaultImg);
194
+ };
195
+ }
196
+ validateImage();
197
+ }, [profilePicture]);
198
+ return /* @__PURE__ */ jsxRuntime.jsxs(
199
+ material.Card,
200
+ {
201
+ sx: {
202
+ margin: "1rem",
203
+ background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
204
+ // Vibrant blue gradient
205
+ boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
206
+ // Blue shadow to add depth
207
+ borderRadius: "12px",
208
+ // Smooth rounded corners
209
+ color: "#FFFFFF",
210
+ // White text for high contrast
211
+ overflow: "hidden"
212
+ // Clean edges
213
+ },
214
+ className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
215
+ children: [
216
+ /* @__PURE__ */ jsxRuntime.jsx(
217
+ material.CardMedia,
218
+ {
219
+ component: "img",
220
+ image: imageSrc,
221
+ alt: `${username}'s Profile Picture`,
222
+ sx: {
223
+ aspectRatio,
224
+ height: "auto",
225
+ // Updates to maintain aspect ratio and fill space nicely
226
+ width: "100%",
227
+ objectFit: "cover"
228
+ }
229
+ }
230
+ ),
231
+ /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "relative p-6", children: [
232
+ /* @__PURE__ */ jsxRuntime.jsx(
233
+ material.Typography,
234
+ {
235
+ variant: "h5",
236
+ component: "div",
237
+ className: "font-bold text-lg uppercase text-center tracking-wide mb-2",
238
+ sx: {
239
+ color: "#FFFFFF",
240
+ // Pure white for username
241
+ fontSize: "1.5rem",
242
+ textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
243
+ // Strong shadow for visibility
244
+ },
245
+ children: username
246
+ }
247
+ ),
248
+ preferredPronouns && /* @__PURE__ */ jsxRuntime.jsx(
249
+ material.Typography,
250
+ {
251
+ variant: "body2",
252
+ className: "text-sm font-medium",
253
+ sx: {
254
+ color: "#E3F2FD",
255
+ textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
256
+ // Subtle shadow for readability
257
+ fontWeight: "bold",
258
+ // Emphasize key details
259
+ marginBottom: "1rem"
260
+ },
261
+ children: preferredPronouns
262
+ }
263
+ ),
264
+ bio && /* @__PURE__ */ jsxRuntime.jsx(
265
+ material.Typography,
266
+ {
267
+ variant: "body2",
268
+ className: "text-sm font-light",
269
+ sx: {
270
+ color: "#E3F2FD",
271
+ // Softer muted tone for secondary text
272
+ textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
273
+ // Subtle shadow for readability
274
+ fontStyle: "italic"
275
+ // Distinguish bio visually
276
+ },
277
+ children: bio
278
+ }
279
+ )
280
+ ] })
281
+ ]
282
+ }
283
+ );
284
+ };
285
+ var PlayerDisplayCard_default = PlayerDisplayCard;
286
+ function Chip({ tag, removeCallback }) {
287
+ var _a;
288
+ const color = (_a = tag.color) != null ? _a : "#bfbcbb";
289
+ return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(
290
+ "span",
291
+ {
292
+ 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",
293
+ style: {
294
+ borderColor: `color-mix(in srgb, ${color}, black 50%)`,
295
+ background: `linear-gradient(160deg, color-mix(in srgb, ${color}, white 10%) 0%, color-mix(in srgb, ${color}, black 60%) 100%)`,
296
+ textShadow: "black 1.5px 1px 1.5px",
297
+ filter: `drop-shadow(2px 2px 1.5px color-mix(in srgb, ${color}, black 80%))`
298
+ },
299
+ children: [
300
+ tag.label,
301
+ removeCallback && /* @__PURE__ */ jsxRuntime.jsx(
302
+ "button",
303
+ {
304
+ type: "button",
305
+ onClick: () => removeCallback(tag.id),
306
+ className: "ml-2 text-white hover:text-red-700 focus:outline-none pl-0.5 pr-1 cursor-pointer hover:bg-white rounded-full",
307
+ style: {
308
+ textShadow: "black 1px 1px 1px"
309
+ },
310
+ children: "X"
311
+ }
312
+ )
313
+ ]
314
+ },
315
+ tag.id
316
+ ) });
317
+ }
318
+ var PlayerTagsCard = ({ tags = [] }) => {
319
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { sx: {
320
+ margin: "1rem",
321
+ borderRadius: "12px",
322
+ boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
323
+ overflow: "hidden"
324
+ }, className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl", children: [
325
+ /* @__PURE__ */ jsxRuntime.jsx(
326
+ material.CardHeader,
327
+ {
328
+ title: "Player Tags",
329
+ sx: {
330
+ background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
331
+ color: "#FFFFFF",
332
+ fontSize: "1.5rem",
333
+ textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
334
+ "& .MuiCardHeader-title": {
335
+ fontWeight: "bold",
336
+ fontSize: "1.5rem",
337
+ textAlign: "center",
338
+ textTransform: "uppercase",
339
+ letterSpacing: "0.05em"
340
+ }
341
+ }
342
+ }
343
+ ),
344
+ /* @__PURE__ */ jsxRuntime.jsx(material.CardContent, { className: "p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(Chip, { tag }, tag.id)) }) })
345
+ ] });
346
+ };
347
+ var PlayerTagsCard_default = PlayerTagsCard;
348
+ var PlayerPromptCard = ({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx(
349
+ material.Card,
350
+ {
351
+ sx: {
352
+ margin: "1rem",
353
+ background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
354
+ // Gradient color scheme
355
+ boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
356
+ // Card shadow
357
+ borderRadius: "12px",
358
+ // Rounded corners
359
+ color: "#FFFFFF",
360
+ // Text contrast with the background
361
+ overflow: "hidden"
362
+ // Keeps consistent and clean card shape
363
+ },
364
+ className: "transition duration-300 transform hover:scale-105 hover:shadow-2xl",
365
+ children: /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "p-6", children: [
366
+ title && /* @__PURE__ */ jsxRuntime.jsx(
367
+ material.Typography,
368
+ {
369
+ variant: "h5",
370
+ className: "font-bold text-lg uppercase text-center tracking-wide mb-4",
371
+ sx: {
372
+ color: "#FFFFFF",
373
+ // Bright white for high visibility
374
+ textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
375
+ // Strong text shadow for contrast
376
+ fontSize: "1.5rem"
377
+ },
378
+ children: title
379
+ }
380
+ ),
381
+ description && /* @__PURE__ */ jsxRuntime.jsx(
382
+ material.Typography,
383
+ {
384
+ variant: "body2",
385
+ className: "text-sm font-medium text-center",
386
+ sx: {
387
+ color: "#E3F2FD",
388
+ // Softer light blue for description
389
+ textShadow: "0px 2px 4px rgba(0, 0, 0, 0.3)",
390
+ // Subtle shadow
391
+ lineHeight: 1.6,
392
+ marginTop: "1rem"
393
+ },
394
+ children: description
395
+ }
396
+ )
397
+ ] })
398
+ }
399
+ );
400
+ var PlayerPromptCard_default = PlayerPromptCard;
401
+ var PlayerTagsEdit = ({
402
+ selectedTags = [],
403
+ possibleTags = [],
29
404
  onToggleTag
30
- }) {
405
+ }) => {
31
406
  const [inputValue, setInputValue] = react.useState("");
32
407
  const selectedIds = react.useMemo(() => selectedTags.map((tag) => tag.id), [selectedTags]);
33
408
  const options = react.useMemo(
34
- () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label })),
409
+ () => possibleTags.map((tag) => ({ value: tag.id, label: tag.label, alternate_title: tag.alternate_title })),
35
410
  [possibleTags]
36
411
  );
37
- return /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { container: true, children: /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { size: { xs: 12 }, children: /* @__PURE__ */ jsxRuntime.jsxs(Card__default.default, { children: [
412
+ return /* @__PURE__ */ jsxRuntime.jsxs(material.Card, { sx: {
413
+ margin: "1rem",
414
+ borderRadius: "12px",
415
+ boxShadow: "0px 8px 15px rgba(25, 118, 210, 0.3)",
416
+ overflow: "hidden"
417
+ }, children: [
38
418
  /* @__PURE__ */ jsxRuntime.jsx(
39
- CardHeader__default.default,
419
+ material.CardHeader,
40
420
  {
41
- title,
42
- style: {
421
+ title: "Player Tags",
422
+ sx: {
43
423
  background: "linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(25, 118, 210, 1))",
44
424
  color: "#FFFFFF",
45
425
  fontSize: "1.5rem",
46
- textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)"
426
+ textShadow: "0px 3px 6px rgba(0, 0, 0, 0.5)",
427
+ "& .MuiCardHeader-title": {
428
+ fontWeight: "bold",
429
+ fontSize: "1.5rem",
430
+ textAlign: "center",
431
+ textTransform: "uppercase",
432
+ letterSpacing: "0.05em"
433
+ }
47
434
  }
48
435
  }
49
436
  ),
50
- /* @__PURE__ */ jsxRuntime.jsxs(CardContent__default.default, { children: [
51
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-2 flex flex-wrap gap-2", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsxs(
52
- "span",
437
+ /* @__PURE__ */ jsxRuntime.jsxs(material.CardContent, { className: "p-6", children: [
438
+ /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2 mb-4", children: selectedTags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
439
+ Chip,
53
440
  {
54
- className: "inline-block text-sm px-3 py-1 rounded-full outline-black outline-2 font-outlined",
55
- style: {
56
- background: tag.color || "#bfbcbb",
57
- color: "white",
58
- textShadow: "black 0.2em 0.2em 0.4em"
59
- },
60
- children: [
61
- tag.label,
62
- /* @__PURE__ */ jsxRuntime.jsx(
63
- "button",
64
- {
65
- type: "button",
66
- onClick: () => onToggleTag(tag.id),
67
- className: "ml-2 text-red-500 bg-white bg-opacity-50 rounded-full outline-black outline-2 font-outlined",
68
- children: "\xD7"
69
- }
70
- )
71
- ]
441
+ tag,
442
+ removeCallback: () => onToggleTag(tag.id)
72
443
  },
73
444
  tag.id
74
445
  )) }),
75
- /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { container: true, spacing: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Grid__default.default, { sx: { marginTop: 3, width: "100%" }, children: /* @__PURE__ */ jsxRuntime.jsx(
446
+ /* @__PURE__ */ jsxRuntime.jsx(
76
447
  Autocomplete__default.default,
77
448
  {
78
449
  options,
79
- filterOptions: (availableOptions, state) => availableOptions.filter(
80
- (option) => !selectedIds.includes(option.value) && option.label.toLowerCase().includes(state.inputValue.toLowerCase())
81
- ).slice(0, 3),
450
+ filterOptions: (availableOptions, state) => {
451
+ const query = state.inputValue.toLowerCase();
452
+ return availableOptions.filter(
453
+ (option) => {
454
+ var _a;
455
+ return !selectedIds.includes(option.value) && (option.label.toLowerCase().includes(query) || ((_a = option.alternate_title) == null ? void 0 : _a.some((title) => title.toLowerCase().includes(query))));
456
+ }
457
+ ).slice(0, 5);
458
+ },
82
459
  value: null,
83
460
  inputValue,
84
461
  onInputChange: (event, newInputValue) => {
@@ -93,13 +470,20 @@ function TagEditor({
93
470
  setInputValue("");
94
471
  },
95
472
  slots: { popper: CustomPopper },
96
- renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(TextField__default.default, { ...params, label: "Select Tags" })
473
+ renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
474
+ material.TextField,
475
+ {
476
+ ...params,
477
+ label: "Select Tags",
478
+ variant: "outlined"
479
+ }
480
+ )
97
481
  },
98
482
  selectedIds.join("-")
99
- ) }) })
483
+ )
100
484
  ] })
101
- ] }) }) });
102
- }
485
+ ] });
486
+ };
103
487
  var CustomPopper = (props) => {
104
488
  return /* @__PURE__ */ jsxRuntime.jsx(
105
489
  Popper__default.default,
@@ -108,29 +492,91 @@ var CustomPopper = (props) => {
108
492
  modifiers: [
109
493
  {
110
494
  name: "preventOverflow",
111
- options: { boundary: "viewport" }
495
+ options: {
496
+ boundary: "viewport"
497
+ }
112
498
  },
113
499
  {
114
500
  name: "offset",
115
- options: { offset: [0, -10] }
501
+ options: {
502
+ offset: [0, -10]
503
+ }
116
504
  }
117
505
  ],
118
506
  placement: "top-start"
119
507
  }
120
508
  );
121
509
  };
122
- function PlayerTagsEdit(props) {
123
- return /* @__PURE__ */ jsxRuntime.jsx(
124
- TagEditor,
510
+ var PlayerTagsEdit_default = PlayerTagsEdit;
511
+ function PlayerPageLayout({
512
+ playerData,
513
+ tags = [],
514
+ blurbs = [],
515
+ isOwner = false,
516
+ possibleTags = [],
517
+ onToggleTag = () => {
518
+ }
519
+ }) {
520
+ const theme = material.useTheme();
521
+ const isSmallScreen = material.useMediaQuery(theme.breakpoints.down("lg"));
522
+ const tagsElement = isOwner ? /* @__PURE__ */ jsxRuntime.jsx(
523
+ PlayerTagsEdit_default,
125
524
  {
126
- title: "Player Tags",
127
- selectedTags: props.PlayerTags,
128
- possibleTags: props.possibleTags,
129
- onToggleTag: props.updatePlayerTags
525
+ selectedTags: tags,
526
+ possibleTags,
527
+ onToggleTag
130
528
  }
131
- );
529
+ ) : /* @__PURE__ */ jsxRuntime.jsx(PlayerTagsCard_default, { tags });
530
+ return /* @__PURE__ */ jsxRuntime.jsx(material.NoSsr, { children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { padding: "2rem", marginRight: "auto", marginLeft: "auto" }, justifyContent: "center", children: /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 3, justifyContent: "center", sx: { marginRight: "auto", marginLeft: "auto" }, children: [
531
+ !isSmallScreen && /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { size: { xs: 12, lg: 3 }, children: [
532
+ /* @__PURE__ */ jsxRuntime.jsx(
533
+ PlayerDetailsCard_default,
534
+ {
535
+ preferredPronouns: playerData.preferredPronouns,
536
+ age: playerData.age,
537
+ yearsPlaying: playerData.yearsPlaying,
538
+ discordUsername: playerData.discordUsername,
539
+ preferredGames: playerData.preferredGames
540
+ }
541
+ ),
542
+ tagsElement
543
+ ] }),
544
+ /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 6 }, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Grid, { container: true, spacing: 3, children: [
545
+ /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
546
+ PlayerDisplayCard_default,
547
+ {
548
+ profilePicture: playerData.profilePicture,
549
+ username: playerData.username,
550
+ bio: playerData.bio,
551
+ preferredPronouns: playerData.preferredPronouns
552
+ }
553
+ ) }),
554
+ isSmallScreen && /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 3 }, children: /* @__PURE__ */ jsxRuntime.jsx(
555
+ PlayerDetailsCard_default,
556
+ {
557
+ preferredPronouns: playerData.preferredPronouns,
558
+ age: playerData.age,
559
+ yearsPlaying: playerData.yearsPlaying,
560
+ discordUsername: playerData.discordUsername,
561
+ preferredGames: playerData.preferredGames
562
+ }
563
+ ) }),
564
+ blurbs.map((blurb, index) => /* @__PURE__ */ jsxRuntime.jsx(material.Grid, { size: { xs: 12, lg: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
565
+ PlayerPromptCard_default,
566
+ {
567
+ title: blurb.title,
568
+ description: blurb.description
569
+ }
570
+ ) }, index))
571
+ ] }) })
572
+ ] }) }) });
132
573
  }
133
574
 
134
- exports.PlayerTagsEdit = PlayerTagsEdit;
575
+ exports.PlayerDetailsCard = PlayerDetailsCard_default;
576
+ exports.PlayerDisplayCard = PlayerDisplayCard_default;
577
+ exports.PlayerPageLayout = PlayerPageLayout;
578
+ exports.PlayerPromptCard = PlayerPromptCard_default;
579
+ exports.PlayerTagsCard = PlayerTagsCard_default;
580
+ exports.PlayerTagsEdit = PlayerTagsEdit_default;
135
581
  //# sourceMappingURL=ProfilePage.cjs.map
136
582
  //# sourceMappingURL=ProfilePage.cjs.map