analytica-frontend-lib 1.1.48 → 1.1.50
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.
- package/dist/ThemeToggle/index.d.mts +51 -0
- package/dist/ThemeToggle/index.d.ts +51 -0
- package/dist/ThemeToggle/index.js +236 -0
- package/dist/ThemeToggle/index.js.map +1 -0
- package/dist/ThemeToggle/index.mjs +211 -0
- package/dist/ThemeToggle/index.mjs.map +1 -0
- package/dist/hooks/useTheme/index.d.mts +13 -0
- package/dist/hooks/useTheme/index.d.ts +13 -0
- package/dist/hooks/useTheme/index.js +114 -0
- package/dist/hooks/useTheme/index.js.map +1 -0
- package/dist/hooks/useTheme/index.mjs +89 -0
- package/dist/hooks/useTheme/index.mjs.map +1 -0
- package/dist/index.css +39 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +713 -510
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +705 -504
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +39 -0
- package/dist/styles.css.map +1 -1
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -128,6 +128,7 @@ __export(src_exports, {
|
|
|
128
128
|
Table: () => Table_default,
|
|
129
129
|
Text: () => Text_default,
|
|
130
130
|
TextArea: () => TextArea_default,
|
|
131
|
+
ThemeToggle: () => ThemeToggle,
|
|
131
132
|
Toast: () => Toast_default,
|
|
132
133
|
Toaster: () => Toaster_default,
|
|
133
134
|
VideoPlayer: () => VideoPlayer_default,
|
|
@@ -147,6 +148,7 @@ __export(src_exports, {
|
|
|
147
148
|
useMobile: () => useMobile,
|
|
148
149
|
useQuizStore: () => useQuizStore,
|
|
149
150
|
useRouteAuth: () => useRouteAuth,
|
|
151
|
+
useTheme: () => useTheme,
|
|
150
152
|
useToastStore: () => ToastStore_default,
|
|
151
153
|
useUrlAuthentication: () => useUrlAuthentication,
|
|
152
154
|
withAuth: () => withAuth
|
|
@@ -6068,11 +6070,210 @@ var useMobile = () => {
|
|
|
6068
6070
|
};
|
|
6069
6071
|
};
|
|
6070
6072
|
|
|
6073
|
+
// src/hooks/useTheme.ts
|
|
6074
|
+
var import_react20 = require("react");
|
|
6075
|
+
var useTheme = () => {
|
|
6076
|
+
const [themeMode, setThemeMode] = (0, import_react20.useState)("system");
|
|
6077
|
+
const [isDark, setIsDark] = (0, import_react20.useState)(false);
|
|
6078
|
+
const themeModeRef = (0, import_react20.useRef)("system");
|
|
6079
|
+
const applyTheme = (0, import_react20.useCallback)((mode) => {
|
|
6080
|
+
const htmlElement = document.documentElement;
|
|
6081
|
+
const originalTheme = htmlElement.getAttribute("data-original-theme");
|
|
6082
|
+
if (mode === "dark") {
|
|
6083
|
+
htmlElement.setAttribute("data-theme", "dark");
|
|
6084
|
+
setIsDark(true);
|
|
6085
|
+
} else if (mode === "light") {
|
|
6086
|
+
if (originalTheme) {
|
|
6087
|
+
htmlElement.setAttribute("data-theme", originalTheme);
|
|
6088
|
+
}
|
|
6089
|
+
setIsDark(false);
|
|
6090
|
+
} else if (mode === "system") {
|
|
6091
|
+
const isSystemDark = window.matchMedia(
|
|
6092
|
+
"(prefers-color-scheme: dark)"
|
|
6093
|
+
).matches;
|
|
6094
|
+
if (isSystemDark) {
|
|
6095
|
+
htmlElement.setAttribute("data-theme", "dark");
|
|
6096
|
+
setIsDark(true);
|
|
6097
|
+
} else if (originalTheme) {
|
|
6098
|
+
htmlElement.setAttribute("data-theme", originalTheme);
|
|
6099
|
+
setIsDark(false);
|
|
6100
|
+
}
|
|
6101
|
+
}
|
|
6102
|
+
}, []);
|
|
6103
|
+
const toggleTheme = (0, import_react20.useCallback)(() => {
|
|
6104
|
+
let newMode;
|
|
6105
|
+
if (themeMode === "light") {
|
|
6106
|
+
newMode = "dark";
|
|
6107
|
+
} else if (themeMode === "dark") {
|
|
6108
|
+
newMode = "light";
|
|
6109
|
+
} else {
|
|
6110
|
+
newMode = "dark";
|
|
6111
|
+
}
|
|
6112
|
+
setThemeMode(newMode);
|
|
6113
|
+
themeModeRef.current = newMode;
|
|
6114
|
+
applyTheme(newMode);
|
|
6115
|
+
localStorage.setItem("theme-mode", newMode);
|
|
6116
|
+
}, [themeMode, applyTheme]);
|
|
6117
|
+
const setTheme = (0, import_react20.useCallback)(
|
|
6118
|
+
(mode) => {
|
|
6119
|
+
setThemeMode(mode);
|
|
6120
|
+
themeModeRef.current = mode;
|
|
6121
|
+
applyTheme(mode);
|
|
6122
|
+
localStorage.setItem("theme-mode", mode);
|
|
6123
|
+
},
|
|
6124
|
+
[applyTheme]
|
|
6125
|
+
);
|
|
6126
|
+
(0, import_react20.useEffect)(() => {
|
|
6127
|
+
const htmlElement = document.documentElement;
|
|
6128
|
+
const currentTheme = htmlElement.getAttribute("data-theme");
|
|
6129
|
+
if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
|
|
6130
|
+
htmlElement.setAttribute("data-original-theme", currentTheme);
|
|
6131
|
+
}
|
|
6132
|
+
const savedThemeMode = localStorage.getItem("theme-mode");
|
|
6133
|
+
const initialMode = savedThemeMode || "system";
|
|
6134
|
+
if (!savedThemeMode) {
|
|
6135
|
+
localStorage.setItem("theme-mode", "system");
|
|
6136
|
+
}
|
|
6137
|
+
setThemeMode(initialMode);
|
|
6138
|
+
themeModeRef.current = initialMode;
|
|
6139
|
+
applyTheme(initialMode);
|
|
6140
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
6141
|
+
const handleSystemThemeChange = () => {
|
|
6142
|
+
if (themeModeRef.current === "system") {
|
|
6143
|
+
applyTheme("system");
|
|
6144
|
+
}
|
|
6145
|
+
};
|
|
6146
|
+
mediaQuery.addEventListener("change", handleSystemThemeChange);
|
|
6147
|
+
return () => {
|
|
6148
|
+
mediaQuery.removeEventListener("change", handleSystemThemeChange);
|
|
6149
|
+
};
|
|
6150
|
+
}, [applyTheme]);
|
|
6151
|
+
return {
|
|
6152
|
+
themeMode,
|
|
6153
|
+
isDark,
|
|
6154
|
+
toggleTheme,
|
|
6155
|
+
setTheme
|
|
6156
|
+
};
|
|
6157
|
+
};
|
|
6158
|
+
|
|
6159
|
+
// src/components/ThemeToggle/ThemeToggle.tsx
|
|
6160
|
+
var import_react21 = require("react");
|
|
6161
|
+
var import_jsx_runtime32 = require("react/jsx-runtime");
|
|
6162
|
+
var ThemeToggle = (0, import_react21.forwardRef)(
|
|
6163
|
+
({
|
|
6164
|
+
variant = "simple",
|
|
6165
|
+
size = "md",
|
|
6166
|
+
showIcons = true,
|
|
6167
|
+
showLabels = true,
|
|
6168
|
+
className,
|
|
6169
|
+
children,
|
|
6170
|
+
...props
|
|
6171
|
+
}, ref) => {
|
|
6172
|
+
const { themeMode, isDark, toggleTheme, setTheme } = useTheme();
|
|
6173
|
+
const sizeClasses = {
|
|
6174
|
+
sm: "text-sm px-3 py-1.5",
|
|
6175
|
+
md: "text-md px-4 py-2",
|
|
6176
|
+
lg: "text-lg px-5 py-2.5"
|
|
6177
|
+
};
|
|
6178
|
+
const activeClasses = "bg-primary-500 text-white";
|
|
6179
|
+
const inactiveClasses = "bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600";
|
|
6180
|
+
const baseButtonClasses = "inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
|
|
6181
|
+
const smallButtonClasses = "px-3 py-1.5 rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500";
|
|
6182
|
+
const renderThemeButton = (theme, icon, label, isActive, buttonSize) => {
|
|
6183
|
+
const buttonClasses = buttonSize ? cn(baseButtonClasses, sizeClasses[buttonSize]) : smallButtonClasses;
|
|
6184
|
+
const stateClasses = isActive ? activeClasses : inactiveClasses;
|
|
6185
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
|
|
6186
|
+
"button",
|
|
6187
|
+
{
|
|
6188
|
+
type: "button",
|
|
6189
|
+
onClick: () => setTheme(theme),
|
|
6190
|
+
className: cn(buttonClasses, stateClasses),
|
|
6191
|
+
...buttonSize ? props : {},
|
|
6192
|
+
children: [
|
|
6193
|
+
showIcons && icon,
|
|
6194
|
+
showLabels && label
|
|
6195
|
+
]
|
|
6196
|
+
}
|
|
6197
|
+
);
|
|
6198
|
+
};
|
|
6199
|
+
if (variant === "simple") {
|
|
6200
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
|
|
6201
|
+
"button",
|
|
6202
|
+
{
|
|
6203
|
+
type: "button",
|
|
6204
|
+
ref,
|
|
6205
|
+
onClick: toggleTheme,
|
|
6206
|
+
className: cn(
|
|
6207
|
+
"inline-flex items-center justify-center gap-2 rounded-md border border-gray-300 dark:border-gray-600 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-500",
|
|
6208
|
+
sizeClasses[size],
|
|
6209
|
+
className
|
|
6210
|
+
),
|
|
6211
|
+
...props,
|
|
6212
|
+
children: children || /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
|
|
6213
|
+
showIcons && (isDark ? "\u2600\uFE0F" : "\u{1F319}"),
|
|
6214
|
+
showLabels && (isDark ? "Claro" : "Escuro")
|
|
6215
|
+
] })
|
|
6216
|
+
}
|
|
6217
|
+
);
|
|
6218
|
+
}
|
|
6219
|
+
if (variant === "detailed") {
|
|
6220
|
+
const getLabel = () => {
|
|
6221
|
+
if (themeMode === "system") return "Sistema";
|
|
6222
|
+
if (isDark) return "Escuro";
|
|
6223
|
+
return "Claro";
|
|
6224
|
+
};
|
|
6225
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("flex flex-col gap-2", className), children: [
|
|
6226
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
|
|
6227
|
+
"Tema: ",
|
|
6228
|
+
getLabel()
|
|
6229
|
+
] }),
|
|
6230
|
+
/* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex gap-1", children: [
|
|
6231
|
+
renderThemeButton("light", "\u2600\uFE0F ", "Claro", themeMode === "light"),
|
|
6232
|
+
renderThemeButton("dark", "\u{1F319} ", "Escuro", themeMode === "dark"),
|
|
6233
|
+
renderThemeButton(
|
|
6234
|
+
"system",
|
|
6235
|
+
"\u2699\uFE0F ",
|
|
6236
|
+
"Sistema",
|
|
6237
|
+
themeMode === "system"
|
|
6238
|
+
)
|
|
6239
|
+
] })
|
|
6240
|
+
] });
|
|
6241
|
+
}
|
|
6242
|
+
if (variant === "buttons") {
|
|
6243
|
+
return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("flex gap-2", className), children: [
|
|
6244
|
+
renderThemeButton(
|
|
6245
|
+
"light",
|
|
6246
|
+
"\u2600\uFE0F",
|
|
6247
|
+
"Claro",
|
|
6248
|
+
themeMode === "light",
|
|
6249
|
+
size
|
|
6250
|
+
),
|
|
6251
|
+
renderThemeButton(
|
|
6252
|
+
"dark",
|
|
6253
|
+
"\u{1F319}",
|
|
6254
|
+
"Escuro",
|
|
6255
|
+
themeMode === "dark",
|
|
6256
|
+
size
|
|
6257
|
+
),
|
|
6258
|
+
renderThemeButton(
|
|
6259
|
+
"system",
|
|
6260
|
+
"\u2699\uFE0F",
|
|
6261
|
+
"Sistema",
|
|
6262
|
+
themeMode === "system",
|
|
6263
|
+
size
|
|
6264
|
+
)
|
|
6265
|
+
] });
|
|
6266
|
+
}
|
|
6267
|
+
return null;
|
|
6268
|
+
}
|
|
6269
|
+
);
|
|
6270
|
+
ThemeToggle.displayName = "ThemeToggle";
|
|
6271
|
+
|
|
6071
6272
|
// src/components/Select/Select.tsx
|
|
6072
6273
|
var import_zustand5 = require("zustand");
|
|
6073
|
-
var
|
|
6274
|
+
var import_react22 = require("react");
|
|
6074
6275
|
var import_phosphor_react16 = require("phosphor-react");
|
|
6075
|
-
var
|
|
6276
|
+
var import_jsx_runtime33 = require("react/jsx-runtime");
|
|
6076
6277
|
var VARIANT_CLASSES4 = {
|
|
6077
6278
|
outlined: "border-2 rounded-lg focus:border-primary-950",
|
|
6078
6279
|
underlined: "border-b-2 focus:border-primary-950",
|
|
@@ -6130,13 +6331,13 @@ function getLabelAsNode(children) {
|
|
|
6130
6331
|
if (typeof children === "string" || typeof children === "number") {
|
|
6131
6332
|
return children;
|
|
6132
6333
|
}
|
|
6133
|
-
const flattened =
|
|
6334
|
+
const flattened = import_react22.Children.toArray(children);
|
|
6134
6335
|
if (flattened.length === 1) return flattened[0];
|
|
6135
|
-
return /* @__PURE__ */ (0,
|
|
6336
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_jsx_runtime33.Fragment, { children: flattened });
|
|
6136
6337
|
}
|
|
6137
6338
|
var injectStore4 = (children, store, size, selectId) => {
|
|
6138
|
-
return
|
|
6139
|
-
if ((0,
|
|
6339
|
+
return import_react22.Children.map(children, (child) => {
|
|
6340
|
+
if ((0, import_react22.isValidElement)(child)) {
|
|
6140
6341
|
const typedChild = child;
|
|
6141
6342
|
const newProps = {
|
|
6142
6343
|
store
|
|
@@ -6153,7 +6354,7 @@ var injectStore4 = (children, store, size, selectId) => {
|
|
|
6153
6354
|
selectId
|
|
6154
6355
|
);
|
|
6155
6356
|
}
|
|
6156
|
-
return (0,
|
|
6357
|
+
return (0, import_react22.cloneElement)(typedChild, newProps);
|
|
6157
6358
|
}
|
|
6158
6359
|
return child;
|
|
6159
6360
|
});
|
|
@@ -6170,18 +6371,18 @@ var Select = ({
|
|
|
6170
6371
|
errorMessage,
|
|
6171
6372
|
id
|
|
6172
6373
|
}) => {
|
|
6173
|
-
const storeRef = (0,
|
|
6374
|
+
const storeRef = (0, import_react22.useRef)(null);
|
|
6174
6375
|
storeRef.current ??= createSelectStore(onValueChange);
|
|
6175
6376
|
const store = storeRef.current;
|
|
6176
|
-
const selectRef = (0,
|
|
6377
|
+
const selectRef = (0, import_react22.useRef)(null);
|
|
6177
6378
|
const { open, setOpen, setValue, selectedLabel } = (0, import_zustand5.useStore)(store, (s) => s);
|
|
6178
|
-
const generatedId = (0,
|
|
6379
|
+
const generatedId = (0, import_react22.useId)();
|
|
6179
6380
|
const selectId = id ?? `select-${generatedId}`;
|
|
6180
6381
|
const findLabelForValue = (children2, targetValue) => {
|
|
6181
6382
|
let found = null;
|
|
6182
6383
|
const search = (nodes) => {
|
|
6183
|
-
|
|
6184
|
-
if (!(0,
|
|
6384
|
+
import_react22.Children.forEach(nodes, (child) => {
|
|
6385
|
+
if (!(0, import_react22.isValidElement)(child)) return;
|
|
6185
6386
|
const typedChild = child;
|
|
6186
6387
|
if (typedChild.type === SelectItem && typedChild.props.value === targetValue) {
|
|
6187
6388
|
if (typeof typedChild.props.children === "string")
|
|
@@ -6194,13 +6395,13 @@ var Select = ({
|
|
|
6194
6395
|
search(children2);
|
|
6195
6396
|
return found;
|
|
6196
6397
|
};
|
|
6197
|
-
(0,
|
|
6398
|
+
(0, import_react22.useEffect)(() => {
|
|
6198
6399
|
if (!selectedLabel && defaultValue) {
|
|
6199
6400
|
const label2 = findLabelForValue(children, defaultValue);
|
|
6200
6401
|
if (label2) store.setState({ selectedLabel: label2 });
|
|
6201
6402
|
}
|
|
6202
6403
|
}, [children, defaultValue, selectedLabel]);
|
|
6203
|
-
(0,
|
|
6404
|
+
(0, import_react22.useEffect)(() => {
|
|
6204
6405
|
const handleClickOutside = (event) => {
|
|
6205
6406
|
if (selectRef.current && !selectRef.current.contains(event.target)) {
|
|
6206
6407
|
setOpen(false);
|
|
@@ -6235,7 +6436,7 @@ var Select = ({
|
|
|
6235
6436
|
document.removeEventListener("keydown", handleArrowKeys);
|
|
6236
6437
|
};
|
|
6237
6438
|
}, [open]);
|
|
6238
|
-
(0,
|
|
6439
|
+
(0, import_react22.useEffect)(() => {
|
|
6239
6440
|
if (propValue) {
|
|
6240
6441
|
setValue(propValue);
|
|
6241
6442
|
const label2 = findLabelForValue(children, propValue);
|
|
@@ -6243,8 +6444,8 @@ var Select = ({
|
|
|
6243
6444
|
}
|
|
6244
6445
|
}, [propValue]);
|
|
6245
6446
|
const sizeClasses = SIZE_CLASSES12[size];
|
|
6246
|
-
return /* @__PURE__ */ (0,
|
|
6247
|
-
label && /* @__PURE__ */ (0,
|
|
6447
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("w-full", className), children: [
|
|
6448
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6248
6449
|
"label",
|
|
6249
6450
|
{
|
|
6250
6451
|
htmlFor: selectId,
|
|
@@ -6252,11 +6453,11 @@ var Select = ({
|
|
|
6252
6453
|
children: label
|
|
6253
6454
|
}
|
|
6254
6455
|
),
|
|
6255
|
-
/* @__PURE__ */ (0,
|
|
6256
|
-
(helperText || errorMessage) && /* @__PURE__ */ (0,
|
|
6257
|
-
helperText && /* @__PURE__ */ (0,
|
|
6258
|
-
errorMessage && /* @__PURE__ */ (0,
|
|
6259
|
-
/* @__PURE__ */ (0,
|
|
6456
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: cn("relative w-full"), ref: selectRef, children: injectStore4(children, store, size, selectId) }),
|
|
6457
|
+
(helperText || errorMessage) && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "mt-1.5 gap-1.5", children: [
|
|
6458
|
+
helperText && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("p", { className: "text-sm text-text-500", children: helperText }),
|
|
6459
|
+
errorMessage && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
|
|
6460
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_phosphor_react16.WarningCircle, { size: 16 }),
|
|
6260
6461
|
" ",
|
|
6261
6462
|
errorMessage
|
|
6262
6463
|
] })
|
|
@@ -6270,9 +6471,9 @@ var SelectValue = ({
|
|
|
6270
6471
|
const store = useSelectStore(externalStore);
|
|
6271
6472
|
const selectedLabel = (0, import_zustand5.useStore)(store, (s) => s.selectedLabel);
|
|
6272
6473
|
const value = (0, import_zustand5.useStore)(store, (s) => s.value);
|
|
6273
|
-
return /* @__PURE__ */ (0,
|
|
6474
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-inherit flex gap-2 items-center", children: selectedLabel || placeholder || value });
|
|
6274
6475
|
};
|
|
6275
|
-
var SelectTrigger = (0,
|
|
6476
|
+
var SelectTrigger = (0, import_react22.forwardRef)(
|
|
6276
6477
|
({
|
|
6277
6478
|
className,
|
|
6278
6479
|
invalid = false,
|
|
@@ -6289,7 +6490,7 @@ var SelectTrigger = (0, import_react20.forwardRef)(
|
|
|
6289
6490
|
const variantClasses = VARIANT_CLASSES4[variant];
|
|
6290
6491
|
const heightClasses = HEIGHT_CLASSES[size];
|
|
6291
6492
|
const paddingClasses = PADDING_CLASSES[size];
|
|
6292
|
-
return /* @__PURE__ */ (0,
|
|
6493
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
6293
6494
|
"button",
|
|
6294
6495
|
{
|
|
6295
6496
|
ref,
|
|
@@ -6311,7 +6512,7 @@ var SelectTrigger = (0, import_react20.forwardRef)(
|
|
|
6311
6512
|
...props,
|
|
6312
6513
|
children: [
|
|
6313
6514
|
props.children,
|
|
6314
|
-
/* @__PURE__ */ (0,
|
|
6515
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6315
6516
|
import_phosphor_react16.CaretDown,
|
|
6316
6517
|
{
|
|
6317
6518
|
className: cn(
|
|
@@ -6326,7 +6527,7 @@ var SelectTrigger = (0, import_react20.forwardRef)(
|
|
|
6326
6527
|
}
|
|
6327
6528
|
);
|
|
6328
6529
|
SelectTrigger.displayName = "SelectTrigger";
|
|
6329
|
-
var SelectContent = (0,
|
|
6530
|
+
var SelectContent = (0, import_react22.forwardRef)(
|
|
6330
6531
|
({
|
|
6331
6532
|
children,
|
|
6332
6533
|
className,
|
|
@@ -6339,7 +6540,7 @@ var SelectContent = (0, import_react20.forwardRef)(
|
|
|
6339
6540
|
const open = (0, import_zustand5.useStore)(store, (s) => s.open);
|
|
6340
6541
|
if (!open) return null;
|
|
6341
6542
|
const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
|
|
6342
|
-
return /* @__PURE__ */ (0,
|
|
6543
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
|
|
6343
6544
|
"div",
|
|
6344
6545
|
{
|
|
6345
6546
|
role: "menu",
|
|
@@ -6356,7 +6557,7 @@ var SelectContent = (0, import_react20.forwardRef)(
|
|
|
6356
6557
|
}
|
|
6357
6558
|
);
|
|
6358
6559
|
SelectContent.displayName = "SelectContent";
|
|
6359
|
-
var SelectItem = (0,
|
|
6560
|
+
var SelectItem = (0, import_react22.forwardRef)(
|
|
6360
6561
|
({
|
|
6361
6562
|
className,
|
|
6362
6563
|
children,
|
|
@@ -6383,7 +6584,7 @@ var SelectItem = (0, import_react20.forwardRef)(
|
|
|
6383
6584
|
}
|
|
6384
6585
|
props.onClick?.(e);
|
|
6385
6586
|
};
|
|
6386
|
-
return /* @__PURE__ */ (0,
|
|
6587
|
+
return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
|
|
6387
6588
|
"div",
|
|
6388
6589
|
{
|
|
6389
6590
|
role: "menuitem",
|
|
@@ -6403,7 +6604,7 @@ var SelectItem = (0, import_react20.forwardRef)(
|
|
|
6403
6604
|
tabIndex: disabled ? -1 : 0,
|
|
6404
6605
|
...props,
|
|
6405
6606
|
children: [
|
|
6406
|
-
/* @__PURE__ */ (0,
|
|
6607
|
+
/* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_phosphor_react16.Check, { className: "" }) }),
|
|
6407
6608
|
children
|
|
6408
6609
|
]
|
|
6409
6610
|
}
|
|
@@ -6415,9 +6616,9 @@ var Select_default = Select;
|
|
|
6415
6616
|
|
|
6416
6617
|
// src/components/Menu/Menu.tsx
|
|
6417
6618
|
var import_zustand6 = require("zustand");
|
|
6418
|
-
var
|
|
6619
|
+
var import_react23 = require("react");
|
|
6419
6620
|
var import_phosphor_react17 = require("phosphor-react");
|
|
6420
|
-
var
|
|
6621
|
+
var import_jsx_runtime34 = require("react/jsx-runtime");
|
|
6421
6622
|
var createMenuStore = (onValueChange) => (0, import_zustand6.create)((set) => ({
|
|
6422
6623
|
value: "",
|
|
6423
6624
|
setValue: (value) => {
|
|
@@ -6436,7 +6637,7 @@ var VARIANT_CLASSES5 = {
|
|
|
6436
6637
|
"menu-overflow": "",
|
|
6437
6638
|
breadcrumb: "bg-transparent shadow-none !px-0"
|
|
6438
6639
|
};
|
|
6439
|
-
var Menu = (0,
|
|
6640
|
+
var Menu = (0, import_react23.forwardRef)(
|
|
6440
6641
|
({
|
|
6441
6642
|
className,
|
|
6442
6643
|
children,
|
|
@@ -6446,16 +6647,16 @@ var Menu = (0, import_react21.forwardRef)(
|
|
|
6446
6647
|
onValueChange,
|
|
6447
6648
|
...props
|
|
6448
6649
|
}, ref) => {
|
|
6449
|
-
const storeRef = (0,
|
|
6650
|
+
const storeRef = (0, import_react23.useRef)(null);
|
|
6450
6651
|
storeRef.current ??= createMenuStore(onValueChange);
|
|
6451
6652
|
const store = storeRef.current;
|
|
6452
6653
|
const { setValue } = (0, import_zustand6.useStore)(store, (s) => s);
|
|
6453
|
-
(0,
|
|
6654
|
+
(0, import_react23.useEffect)(() => {
|
|
6454
6655
|
setValue(propValue ?? defaultValue);
|
|
6455
6656
|
}, [defaultValue, propValue, setValue]);
|
|
6456
6657
|
const baseClasses = variant === "menu-overflow" ? "w-fit py-2 flex flex-row items-center justify-center" : "w-full py-2 flex flex-row items-center justify-center";
|
|
6457
6658
|
const variantClasses = VARIANT_CLASSES5[variant];
|
|
6458
|
-
return /* @__PURE__ */ (0,
|
|
6659
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6459
6660
|
"div",
|
|
6460
6661
|
{
|
|
6461
6662
|
ref,
|
|
@@ -6471,11 +6672,11 @@ var Menu = (0, import_react21.forwardRef)(
|
|
|
6471
6672
|
}
|
|
6472
6673
|
);
|
|
6473
6674
|
Menu.displayName = "Menu";
|
|
6474
|
-
var MenuContent = (0,
|
|
6675
|
+
var MenuContent = (0, import_react23.forwardRef)(
|
|
6475
6676
|
({ className, children, variant = "menu", ...props }, ref) => {
|
|
6476
6677
|
const baseClasses = "w-full flex flex-row items-center gap-2";
|
|
6477
6678
|
const variantClasses = variant === "menu2" || variant === "menu-overflow" ? "overflow-x-auto scroll-smooth" : "";
|
|
6478
|
-
return /* @__PURE__ */ (0,
|
|
6679
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6479
6680
|
"ul",
|
|
6480
6681
|
{
|
|
6481
6682
|
ref,
|
|
@@ -6493,7 +6694,7 @@ var MenuContent = (0, import_react21.forwardRef)(
|
|
|
6493
6694
|
}
|
|
6494
6695
|
);
|
|
6495
6696
|
MenuContent.displayName = "MenuContent";
|
|
6496
|
-
var MenuItem = (0,
|
|
6697
|
+
var MenuItem = (0, import_react23.forwardRef)(
|
|
6497
6698
|
({
|
|
6498
6699
|
className,
|
|
6499
6700
|
children,
|
|
@@ -6527,7 +6728,7 @@ var MenuItem = (0, import_react21.forwardRef)(
|
|
|
6527
6728
|
...props
|
|
6528
6729
|
};
|
|
6529
6730
|
const variants = {
|
|
6530
|
-
menu: /* @__PURE__ */ (0,
|
|
6731
|
+
menu: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6531
6732
|
"li",
|
|
6532
6733
|
{
|
|
6533
6734
|
"data-variant": "menu",
|
|
@@ -6542,7 +6743,7 @@ var MenuItem = (0, import_react21.forwardRef)(
|
|
|
6542
6743
|
children
|
|
6543
6744
|
}
|
|
6544
6745
|
),
|
|
6545
|
-
menu2: /* @__PURE__ */ (0,
|
|
6746
|
+
menu2: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6546
6747
|
"li",
|
|
6547
6748
|
{
|
|
6548
6749
|
"data-variant": "menu2",
|
|
@@ -6553,7 +6754,7 @@ var MenuItem = (0, import_react21.forwardRef)(
|
|
|
6553
6754
|
`,
|
|
6554
6755
|
...commonProps,
|
|
6555
6756
|
children: [
|
|
6556
|
-
/* @__PURE__ */ (0,
|
|
6757
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6557
6758
|
"span",
|
|
6558
6759
|
{
|
|
6559
6760
|
className: cn(
|
|
@@ -6563,11 +6764,11 @@ var MenuItem = (0, import_react21.forwardRef)(
|
|
|
6563
6764
|
children
|
|
6564
6765
|
}
|
|
6565
6766
|
),
|
|
6566
|
-
selectedValue === value && /* @__PURE__ */ (0,
|
|
6767
|
+
selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
|
|
6567
6768
|
]
|
|
6568
6769
|
}
|
|
6569
6770
|
),
|
|
6570
|
-
"menu-overflow": /* @__PURE__ */ (0,
|
|
6771
|
+
"menu-overflow": /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6571
6772
|
"li",
|
|
6572
6773
|
{
|
|
6573
6774
|
"data-variant": "menu-overflow",
|
|
@@ -6578,7 +6779,7 @@ var MenuItem = (0, import_react21.forwardRef)(
|
|
|
6578
6779
|
`,
|
|
6579
6780
|
...commonProps,
|
|
6580
6781
|
children: [
|
|
6581
|
-
/* @__PURE__ */ (0,
|
|
6782
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6582
6783
|
"span",
|
|
6583
6784
|
{
|
|
6584
6785
|
className: cn(
|
|
@@ -6588,11 +6789,11 @@ var MenuItem = (0, import_react21.forwardRef)(
|
|
|
6588
6789
|
children
|
|
6589
6790
|
}
|
|
6590
6791
|
),
|
|
6591
|
-
selectedValue === value && /* @__PURE__ */ (0,
|
|
6792
|
+
selectedValue === value && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
|
|
6592
6793
|
]
|
|
6593
6794
|
}
|
|
6594
6795
|
),
|
|
6595
|
-
breadcrumb: /* @__PURE__ */ (0,
|
|
6796
|
+
breadcrumb: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6596
6797
|
"li",
|
|
6597
6798
|
{
|
|
6598
6799
|
"data-variant": "breadcrumb",
|
|
@@ -6604,7 +6805,7 @@ var MenuItem = (0, import_react21.forwardRef)(
|
|
|
6604
6805
|
`,
|
|
6605
6806
|
...commonProps,
|
|
6606
6807
|
children: [
|
|
6607
|
-
/* @__PURE__ */ (0,
|
|
6808
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6608
6809
|
"span",
|
|
6609
6810
|
{
|
|
6610
6811
|
className: cn(
|
|
@@ -6614,7 +6815,7 @@ var MenuItem = (0, import_react21.forwardRef)(
|
|
|
6614
6815
|
children
|
|
6615
6816
|
}
|
|
6616
6817
|
),
|
|
6617
|
-
separator && /* @__PURE__ */ (0,
|
|
6818
|
+
separator && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6618
6819
|
import_phosphor_react17.CaretRight,
|
|
6619
6820
|
{
|
|
6620
6821
|
size: 16,
|
|
@@ -6651,10 +6852,10 @@ var MenuOverflow = ({
|
|
|
6651
6852
|
onValueChange,
|
|
6652
6853
|
...props
|
|
6653
6854
|
}) => {
|
|
6654
|
-
const containerRef = (0,
|
|
6655
|
-
const [showLeftArrow, setShowLeftArrow] = (0,
|
|
6656
|
-
const [showRightArrow, setShowRightArrow] = (0,
|
|
6657
|
-
(0,
|
|
6855
|
+
const containerRef = (0, import_react23.useRef)(null);
|
|
6856
|
+
const [showLeftArrow, setShowLeftArrow] = (0, import_react23.useState)(false);
|
|
6857
|
+
const [showRightArrow, setShowRightArrow] = (0, import_react23.useState)(false);
|
|
6858
|
+
(0, import_react23.useEffect)(() => {
|
|
6658
6859
|
const checkScroll = () => internalCheckScroll(
|
|
6659
6860
|
containerRef.current,
|
|
6660
6861
|
setShowLeftArrow,
|
|
@@ -6669,25 +6870,25 @@ var MenuOverflow = ({
|
|
|
6669
6870
|
window.removeEventListener("resize", checkScroll);
|
|
6670
6871
|
};
|
|
6671
6872
|
}, []);
|
|
6672
|
-
return /* @__PURE__ */ (0,
|
|
6873
|
+
return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6673
6874
|
"div",
|
|
6674
6875
|
{
|
|
6675
6876
|
"data-testid": "menu-overflow-wrapper",
|
|
6676
6877
|
className: cn("relative w-full overflow-hidden", className),
|
|
6677
6878
|
children: [
|
|
6678
|
-
showLeftArrow && /* @__PURE__ */ (0,
|
|
6879
|
+
showLeftArrow && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6679
6880
|
"button",
|
|
6680
6881
|
{
|
|
6681
6882
|
onClick: () => internalScroll(containerRef.current, "left"),
|
|
6682
6883
|
className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
|
|
6683
6884
|
"data-testid": "scroll-left-button",
|
|
6684
6885
|
children: [
|
|
6685
|
-
/* @__PURE__ */ (0,
|
|
6686
|
-
/* @__PURE__ */ (0,
|
|
6886
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_phosphor_react17.CaretLeft, { size: 16 }),
|
|
6887
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "sr-only", children: "Scroll left" })
|
|
6687
6888
|
]
|
|
6688
6889
|
}
|
|
6689
6890
|
),
|
|
6690
|
-
/* @__PURE__ */ (0,
|
|
6891
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
|
|
6691
6892
|
Menu,
|
|
6692
6893
|
{
|
|
6693
6894
|
defaultValue,
|
|
@@ -6695,18 +6896,18 @@ var MenuOverflow = ({
|
|
|
6695
6896
|
value,
|
|
6696
6897
|
variant: "menu2",
|
|
6697
6898
|
...props,
|
|
6698
|
-
children: /* @__PURE__ */ (0,
|
|
6899
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MenuContent, { ref: containerRef, variant: "menu2", children })
|
|
6699
6900
|
}
|
|
6700
6901
|
),
|
|
6701
|
-
showRightArrow && /* @__PURE__ */ (0,
|
|
6902
|
+
showRightArrow && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
|
|
6702
6903
|
"button",
|
|
6703
6904
|
{
|
|
6704
6905
|
onClick: () => internalScroll(containerRef.current, "right"),
|
|
6705
6906
|
className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white shadow-md cursor-pointer",
|
|
6706
6907
|
"data-testid": "scroll-right-button",
|
|
6707
6908
|
children: [
|
|
6708
|
-
/* @__PURE__ */ (0,
|
|
6709
|
-
/* @__PURE__ */ (0,
|
|
6909
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_phosphor_react17.CaretRight, { size: 16 }),
|
|
6910
|
+
/* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "sr-only", children: "Scroll right" })
|
|
6710
6911
|
]
|
|
6711
6912
|
}
|
|
6712
6913
|
)
|
|
@@ -6714,11 +6915,11 @@ var MenuOverflow = ({
|
|
|
6714
6915
|
}
|
|
6715
6916
|
);
|
|
6716
6917
|
};
|
|
6717
|
-
var injectStore5 = (children, store) =>
|
|
6718
|
-
if (!(0,
|
|
6918
|
+
var injectStore5 = (children, store) => import_react23.Children.map(children, (child) => {
|
|
6919
|
+
if (!(0, import_react23.isValidElement)(child)) return child;
|
|
6719
6920
|
const typedChild = child;
|
|
6720
6921
|
const shouldInject = typedChild.type === MenuItem;
|
|
6721
|
-
return (0,
|
|
6922
|
+
return (0, import_react23.cloneElement)(typedChild, {
|
|
6722
6923
|
...shouldInject ? { store } : {},
|
|
6723
6924
|
...typedChild.props.children ? { children: injectStore5(typedChild.props.children, store) } : {}
|
|
6724
6925
|
});
|
|
@@ -6726,8 +6927,8 @@ var injectStore5 = (children, store) => import_react21.Children.map(children, (c
|
|
|
6726
6927
|
var Menu_default = Menu;
|
|
6727
6928
|
|
|
6728
6929
|
// src/components/Skeleton/Skeleton.tsx
|
|
6729
|
-
var
|
|
6730
|
-
var
|
|
6930
|
+
var import_react24 = require("react");
|
|
6931
|
+
var import_jsx_runtime35 = require("react/jsx-runtime");
|
|
6731
6932
|
var SKELETON_ANIMATION_CLASSES = {
|
|
6732
6933
|
pulse: "animate-pulse",
|
|
6733
6934
|
none: ""
|
|
@@ -6744,7 +6945,7 @@ var SPACING_CLASSES = {
|
|
|
6744
6945
|
medium: "space-y-2",
|
|
6745
6946
|
large: "space-y-3"
|
|
6746
6947
|
};
|
|
6747
|
-
var Skeleton = (0,
|
|
6948
|
+
var Skeleton = (0, import_react24.forwardRef)(
|
|
6748
6949
|
({
|
|
6749
6950
|
variant = "text",
|
|
6750
6951
|
width,
|
|
@@ -6764,13 +6965,13 @@ var Skeleton = (0, import_react22.forwardRef)(
|
|
|
6764
6965
|
height: typeof height === "number" ? `${height}px` : height
|
|
6765
6966
|
};
|
|
6766
6967
|
if (variant === "text" && lines > 1) {
|
|
6767
|
-
return /* @__PURE__ */ (0,
|
|
6968
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6768
6969
|
"div",
|
|
6769
6970
|
{
|
|
6770
6971
|
ref,
|
|
6771
6972
|
className: cn("flex flex-col", spacingClass, className),
|
|
6772
6973
|
...props,
|
|
6773
|
-
children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0,
|
|
6974
|
+
children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6774
6975
|
"div",
|
|
6775
6976
|
{
|
|
6776
6977
|
className: cn(variantClass, animationClass),
|
|
@@ -6781,7 +6982,7 @@ var Skeleton = (0, import_react22.forwardRef)(
|
|
|
6781
6982
|
}
|
|
6782
6983
|
);
|
|
6783
6984
|
}
|
|
6784
|
-
return /* @__PURE__ */ (0,
|
|
6985
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6785
6986
|
"div",
|
|
6786
6987
|
{
|
|
6787
6988
|
ref,
|
|
@@ -6793,13 +6994,13 @@ var Skeleton = (0, import_react22.forwardRef)(
|
|
|
6793
6994
|
);
|
|
6794
6995
|
}
|
|
6795
6996
|
);
|
|
6796
|
-
var SkeletonText = (0,
|
|
6797
|
-
(props, ref) => /* @__PURE__ */ (0,
|
|
6997
|
+
var SkeletonText = (0, import_react24.forwardRef)(
|
|
6998
|
+
(props, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { ref, variant: "text", ...props })
|
|
6798
6999
|
);
|
|
6799
|
-
var SkeletonCircle = (0,
|
|
6800
|
-
var SkeletonRectangle = (0,
|
|
6801
|
-
var SkeletonRounded = (0,
|
|
6802
|
-
var SkeletonCard = (0,
|
|
7000
|
+
var SkeletonCircle = (0, import_react24.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { ref, variant: "circular", ...props }));
|
|
7001
|
+
var SkeletonRectangle = (0, import_react24.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { ref, variant: "rectangular", ...props }));
|
|
7002
|
+
var SkeletonRounded = (0, import_react24.forwardRef)((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Skeleton, { ref, variant: "rounded", ...props }));
|
|
7003
|
+
var SkeletonCard = (0, import_react24.forwardRef)(
|
|
6803
7004
|
({
|
|
6804
7005
|
showAvatar = true,
|
|
6805
7006
|
showTitle = true,
|
|
@@ -6809,7 +7010,7 @@ var SkeletonCard = (0, import_react22.forwardRef)(
|
|
|
6809
7010
|
className = "",
|
|
6810
7011
|
...props
|
|
6811
7012
|
}, ref) => {
|
|
6812
|
-
return /* @__PURE__ */ (0,
|
|
7013
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
6813
7014
|
"div",
|
|
6814
7015
|
{
|
|
6815
7016
|
ref,
|
|
@@ -6819,23 +7020,23 @@ var SkeletonCard = (0, import_react22.forwardRef)(
|
|
|
6819
7020
|
),
|
|
6820
7021
|
...props,
|
|
6821
7022
|
children: [
|
|
6822
|
-
/* @__PURE__ */ (0,
|
|
6823
|
-
showAvatar && /* @__PURE__ */ (0,
|
|
6824
|
-
/* @__PURE__ */ (0,
|
|
6825
|
-
showTitle && /* @__PURE__ */ (0,
|
|
6826
|
-
showDescription && /* @__PURE__ */ (0,
|
|
7023
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-start space-x-3", children: [
|
|
7024
|
+
showAvatar && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SkeletonCircle, { width: 40, height: 40 }),
|
|
7025
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex-1 space-y-2", children: [
|
|
7026
|
+
showTitle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SkeletonText, { width: "60%", height: 20 }),
|
|
7027
|
+
showDescription && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SkeletonText, { lines, spacing: "small" })
|
|
6827
7028
|
] })
|
|
6828
7029
|
] }),
|
|
6829
|
-
showActions && /* @__PURE__ */ (0,
|
|
6830
|
-
/* @__PURE__ */ (0,
|
|
6831
|
-
/* @__PURE__ */ (0,
|
|
7030
|
+
showActions && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex justify-end space-x-2 mt-4", children: [
|
|
7031
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SkeletonRectangle, { width: 80, height: 32 }),
|
|
7032
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SkeletonRectangle, { width: 80, height: 32 })
|
|
6832
7033
|
] })
|
|
6833
7034
|
]
|
|
6834
7035
|
}
|
|
6835
7036
|
);
|
|
6836
7037
|
}
|
|
6837
7038
|
);
|
|
6838
|
-
var SkeletonList = (0,
|
|
7039
|
+
var SkeletonList = (0, import_react24.forwardRef)(
|
|
6839
7040
|
({
|
|
6840
7041
|
items = 3,
|
|
6841
7042
|
showAvatar = true,
|
|
@@ -6845,19 +7046,19 @@ var SkeletonList = (0, import_react22.forwardRef)(
|
|
|
6845
7046
|
className = "",
|
|
6846
7047
|
...props
|
|
6847
7048
|
}, ref) => {
|
|
6848
|
-
return /* @__PURE__ */ (0,
|
|
6849
|
-
showAvatar && /* @__PURE__ */ (0,
|
|
6850
|
-
/* @__PURE__ */ (0,
|
|
6851
|
-
showTitle && /* @__PURE__ */ (0,
|
|
6852
|
-
showDescription && /* @__PURE__ */ (0,
|
|
7049
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-start space-x-3 p-3", children: [
|
|
7050
|
+
showAvatar && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SkeletonCircle, { width: 32, height: 32 }),
|
|
7051
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex-1 space-y-2", children: [
|
|
7052
|
+
showTitle && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SkeletonText, { width: "40%", height: 16 }),
|
|
7053
|
+
showDescription && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SkeletonText, { lines, spacing: "small" })
|
|
6853
7054
|
] })
|
|
6854
7055
|
] }, index)) });
|
|
6855
7056
|
}
|
|
6856
7057
|
);
|
|
6857
|
-
var SkeletonTable = (0,
|
|
7058
|
+
var SkeletonTable = (0, import_react24.forwardRef)(
|
|
6858
7059
|
({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
|
|
6859
|
-
return /* @__PURE__ */ (0,
|
|
6860
|
-
showHeader && /* @__PURE__ */ (0,
|
|
7060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
|
|
7061
|
+
showHeader && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6861
7062
|
SkeletonText,
|
|
6862
7063
|
{
|
|
6863
7064
|
width: `${100 / columns}%`,
|
|
@@ -6865,7 +7066,7 @@ var SkeletonTable = (0, import_react22.forwardRef)(
|
|
|
6865
7066
|
},
|
|
6866
7067
|
index
|
|
6867
7068
|
)) }),
|
|
6868
|
-
/* @__PURE__ */ (0,
|
|
7069
|
+
/* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
|
|
6869
7070
|
SkeletonText,
|
|
6870
7071
|
{
|
|
6871
7072
|
width: `${100 / columns}%`,
|
|
@@ -6878,7 +7079,7 @@ var SkeletonTable = (0, import_react22.forwardRef)(
|
|
|
6878
7079
|
);
|
|
6879
7080
|
|
|
6880
7081
|
// src/components/NotFound/NotFound.tsx
|
|
6881
|
-
var
|
|
7082
|
+
var import_jsx_runtime36 = require("react/jsx-runtime");
|
|
6882
7083
|
var NotFound = ({
|
|
6883
7084
|
title,
|
|
6884
7085
|
description,
|
|
@@ -6921,22 +7122,22 @@ var NotFound = ({
|
|
|
6921
7122
|
const errorTitle = title || getDefaultTitle();
|
|
6922
7123
|
const errorDescription = description || getDefaultDescription();
|
|
6923
7124
|
const errorCode = getErrorCode();
|
|
6924
|
-
return /* @__PURE__ */ (0,
|
|
7125
|
+
return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
6925
7126
|
"div",
|
|
6926
7127
|
{
|
|
6927
7128
|
className: cn(
|
|
6928
7129
|
"flex flex-col w-full h-screen items-center justify-center bg-background-50 px-4",
|
|
6929
7130
|
className
|
|
6930
7131
|
),
|
|
6931
|
-
children: /* @__PURE__ */ (0,
|
|
7132
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
6932
7133
|
"main",
|
|
6933
7134
|
{
|
|
6934
7135
|
role: "main",
|
|
6935
7136
|
"aria-labelledby": "error-title",
|
|
6936
7137
|
"aria-describedby": "error-description",
|
|
6937
7138
|
className: "flex flex-col items-center text-center max-w-md space-y-6",
|
|
6938
|
-
children: /* @__PURE__ */ (0,
|
|
6939
|
-
/* @__PURE__ */ (0,
|
|
7139
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { "aria-label": `Erro ${errorCode}`, children: [
|
|
7140
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
6940
7141
|
"div",
|
|
6941
7142
|
{
|
|
6942
7143
|
className: "text-8xl font-bold text-primary-300 select-none",
|
|
@@ -6944,8 +7145,8 @@ var NotFound = ({
|
|
|
6944
7145
|
children: errorCode
|
|
6945
7146
|
}
|
|
6946
7147
|
),
|
|
6947
|
-
/* @__PURE__ */ (0,
|
|
6948
|
-
/* @__PURE__ */ (0,
|
|
7148
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("header", { className: "space-y-2", children: [
|
|
7149
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
6949
7150
|
Text_default,
|
|
6950
7151
|
{
|
|
6951
7152
|
size: "xl",
|
|
@@ -6956,9 +7157,9 @@ var NotFound = ({
|
|
|
6956
7157
|
children: errorTitle
|
|
6957
7158
|
}
|
|
6958
7159
|
),
|
|
6959
|
-
/* @__PURE__ */ (0,
|
|
7160
|
+
/* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Text_default, { size: "md", className: "text-text-600", id: "error-description", children: errorDescription })
|
|
6960
7161
|
] }),
|
|
6961
|
-
onButtonClick && /* @__PURE__ */ (0,
|
|
7162
|
+
onButtonClick && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("nav", { "aria-label": "Navega\xE7\xE3o de erro", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
|
|
6962
7163
|
Button_default,
|
|
6963
7164
|
{
|
|
6964
7165
|
onClick: handleButtonClick,
|
|
@@ -6979,9 +7180,9 @@ var NotFound = ({
|
|
|
6979
7180
|
var NotFound_default = NotFound;
|
|
6980
7181
|
|
|
6981
7182
|
// src/components/VideoPlayer/VideoPlayer.tsx
|
|
6982
|
-
var
|
|
7183
|
+
var import_react25 = require("react");
|
|
6983
7184
|
var import_phosphor_react18 = require("phosphor-react");
|
|
6984
|
-
var
|
|
7185
|
+
var import_jsx_runtime37 = require("react/jsx-runtime");
|
|
6985
7186
|
var CONTROLS_HIDE_TIMEOUT = 3e3;
|
|
6986
7187
|
var LEAVE_HIDE_TIMEOUT = 1e3;
|
|
6987
7188
|
var INIT_DELAY = 100;
|
|
@@ -6996,7 +7197,7 @@ var ProgressBar2 = ({
|
|
|
6996
7197
|
duration,
|
|
6997
7198
|
progressPercentage,
|
|
6998
7199
|
onSeek
|
|
6999
|
-
}) => /* @__PURE__ */ (0,
|
|
7200
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7000
7201
|
"input",
|
|
7001
7202
|
{
|
|
7002
7203
|
type: "range",
|
|
@@ -7016,17 +7217,17 @@ var VolumeControls = ({
|
|
|
7016
7217
|
isMuted,
|
|
7017
7218
|
onVolumeChange,
|
|
7018
7219
|
onToggleMute
|
|
7019
|
-
}) => /* @__PURE__ */ (0,
|
|
7020
|
-
/* @__PURE__ */ (0,
|
|
7220
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
7221
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7021
7222
|
IconButton_default,
|
|
7022
7223
|
{
|
|
7023
|
-
icon: isMuted ? /* @__PURE__ */ (0,
|
|
7224
|
+
icon: isMuted ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_phosphor_react18.SpeakerSlash, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_phosphor_react18.SpeakerHigh, { size: 24 }),
|
|
7024
7225
|
onClick: onToggleMute,
|
|
7025
7226
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
7026
7227
|
className: "!bg-transparent !text-white hover:!bg-white/20"
|
|
7027
7228
|
}
|
|
7028
7229
|
),
|
|
7029
|
-
/* @__PURE__ */ (0,
|
|
7230
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7030
7231
|
"input",
|
|
7031
7232
|
{
|
|
7032
7233
|
type: "range",
|
|
@@ -7047,17 +7248,17 @@ var SpeedMenu = ({
|
|
|
7047
7248
|
playbackRate,
|
|
7048
7249
|
onToggleMenu,
|
|
7049
7250
|
onSpeedChange
|
|
7050
|
-
}) => /* @__PURE__ */ (0,
|
|
7051
|
-
/* @__PURE__ */ (0,
|
|
7251
|
+
}) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "relative", children: [
|
|
7252
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7052
7253
|
IconButton_default,
|
|
7053
7254
|
{
|
|
7054
|
-
icon: /* @__PURE__ */ (0,
|
|
7255
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_phosphor_react18.DotsThreeVertical, { size: 24 }),
|
|
7055
7256
|
onClick: onToggleMenu,
|
|
7056
7257
|
"aria-label": "Playback speed",
|
|
7057
7258
|
className: "!bg-transparent !text-white hover:!bg-white/20"
|
|
7058
7259
|
}
|
|
7059
7260
|
),
|
|
7060
|
-
showSpeedMenu && /* @__PURE__ */ (0,
|
|
7261
|
+
showSpeedMenu && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "absolute bottom-12 right-0 bg-black/90 rounded-lg p-2 min-w-20", children: [0.5, 0.75, 1, 1.25, 1.5, 2].map((speed) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
7061
7262
|
"button",
|
|
7062
7263
|
{
|
|
7063
7264
|
onClick: () => onSpeedChange(speed),
|
|
@@ -7084,26 +7285,26 @@ var VideoPlayer = ({
|
|
|
7084
7285
|
autoSave = true,
|
|
7085
7286
|
storageKey = "video-progress"
|
|
7086
7287
|
}) => {
|
|
7087
|
-
const videoRef = (0,
|
|
7088
|
-
const [isPlaying, setIsPlaying] = (0,
|
|
7089
|
-
const [currentTime, setCurrentTime] = (0,
|
|
7090
|
-
const [duration, setDuration] = (0,
|
|
7091
|
-
const [isMuted, setIsMuted] = (0,
|
|
7092
|
-
const [volume, setVolume] = (0,
|
|
7093
|
-
const [isFullscreen, setIsFullscreen] = (0,
|
|
7094
|
-
const [showControls, setShowControls] = (0,
|
|
7095
|
-
const [hasCompleted, setHasCompleted] = (0,
|
|
7096
|
-
const [showCaptions, setShowCaptions] = (0,
|
|
7097
|
-
(0,
|
|
7288
|
+
const videoRef = (0, import_react25.useRef)(null);
|
|
7289
|
+
const [isPlaying, setIsPlaying] = (0, import_react25.useState)(false);
|
|
7290
|
+
const [currentTime, setCurrentTime] = (0, import_react25.useState)(0);
|
|
7291
|
+
const [duration, setDuration] = (0, import_react25.useState)(0);
|
|
7292
|
+
const [isMuted, setIsMuted] = (0, import_react25.useState)(false);
|
|
7293
|
+
const [volume, setVolume] = (0, import_react25.useState)(1);
|
|
7294
|
+
const [isFullscreen, setIsFullscreen] = (0, import_react25.useState)(false);
|
|
7295
|
+
const [showControls, setShowControls] = (0, import_react25.useState)(true);
|
|
7296
|
+
const [hasCompleted, setHasCompleted] = (0, import_react25.useState)(false);
|
|
7297
|
+
const [showCaptions, setShowCaptions] = (0, import_react25.useState)(false);
|
|
7298
|
+
(0, import_react25.useEffect)(() => {
|
|
7098
7299
|
setHasCompleted(false);
|
|
7099
7300
|
}, [src]);
|
|
7100
|
-
const [playbackRate, setPlaybackRate] = (0,
|
|
7101
|
-
const [showSpeedMenu, setShowSpeedMenu] = (0,
|
|
7102
|
-
const lastSaveTimeRef = (0,
|
|
7103
|
-
const trackRef = (0,
|
|
7104
|
-
const controlsTimeoutRef = (0,
|
|
7105
|
-
const lastMousePositionRef = (0,
|
|
7106
|
-
const isUserInteracting = (0,
|
|
7301
|
+
const [playbackRate, setPlaybackRate] = (0, import_react25.useState)(1);
|
|
7302
|
+
const [showSpeedMenu, setShowSpeedMenu] = (0, import_react25.useState)(false);
|
|
7303
|
+
const lastSaveTimeRef = (0, import_react25.useRef)(0);
|
|
7304
|
+
const trackRef = (0, import_react25.useRef)(null);
|
|
7305
|
+
const controlsTimeoutRef = (0, import_react25.useRef)(null);
|
|
7306
|
+
const lastMousePositionRef = (0, import_react25.useRef)({ x: 0, y: 0 });
|
|
7307
|
+
const isUserInteracting = (0, import_react25.useCallback)(() => {
|
|
7107
7308
|
if (showSpeedMenu) {
|
|
7108
7309
|
return true;
|
|
7109
7310
|
}
|
|
@@ -7120,13 +7321,13 @@ var VideoPlayer = ({
|
|
|
7120
7321
|
}
|
|
7121
7322
|
return false;
|
|
7122
7323
|
}, [showSpeedMenu]);
|
|
7123
|
-
const clearControlsTimeout = (0,
|
|
7324
|
+
const clearControlsTimeout = (0, import_react25.useCallback)(() => {
|
|
7124
7325
|
if (controlsTimeoutRef.current) {
|
|
7125
7326
|
clearTimeout(controlsTimeoutRef.current);
|
|
7126
7327
|
controlsTimeoutRef.current = null;
|
|
7127
7328
|
}
|
|
7128
7329
|
}, []);
|
|
7129
|
-
const showControlsWithTimer = (0,
|
|
7330
|
+
const showControlsWithTimer = (0, import_react25.useCallback)(() => {
|
|
7130
7331
|
setShowControls(true);
|
|
7131
7332
|
clearControlsTimeout();
|
|
7132
7333
|
if (isFullscreen) {
|
|
@@ -7141,7 +7342,7 @@ var VideoPlayer = ({
|
|
|
7141
7342
|
}, CONTROLS_HIDE_TIMEOUT);
|
|
7142
7343
|
}
|
|
7143
7344
|
}, [isFullscreen, isPlaying, clearControlsTimeout]);
|
|
7144
|
-
const handleMouseMove = (0,
|
|
7345
|
+
const handleMouseMove = (0, import_react25.useCallback)(
|
|
7145
7346
|
(event) => {
|
|
7146
7347
|
const currentX = event.clientX;
|
|
7147
7348
|
const currentY = event.clientY;
|
|
@@ -7154,10 +7355,10 @@ var VideoPlayer = ({
|
|
|
7154
7355
|
},
|
|
7155
7356
|
[showControlsWithTimer]
|
|
7156
7357
|
);
|
|
7157
|
-
const handleMouseEnter = (0,
|
|
7358
|
+
const handleMouseEnter = (0, import_react25.useCallback)(() => {
|
|
7158
7359
|
showControlsWithTimer();
|
|
7159
7360
|
}, [showControlsWithTimer]);
|
|
7160
|
-
const handleMouseLeave = (0,
|
|
7361
|
+
const handleMouseLeave = (0, import_react25.useCallback)(() => {
|
|
7161
7362
|
const userInteracting = isUserInteracting();
|
|
7162
7363
|
clearControlsTimeout();
|
|
7163
7364
|
if (!isFullscreen && !userInteracting) {
|
|
@@ -7166,13 +7367,13 @@ var VideoPlayer = ({
|
|
|
7166
7367
|
}, LEAVE_HIDE_TIMEOUT);
|
|
7167
7368
|
}
|
|
7168
7369
|
}, [isFullscreen, clearControlsTimeout, isUserInteracting]);
|
|
7169
|
-
(0,
|
|
7370
|
+
(0, import_react25.useEffect)(() => {
|
|
7170
7371
|
if (videoRef.current) {
|
|
7171
7372
|
videoRef.current.volume = volume;
|
|
7172
7373
|
videoRef.current.muted = isMuted;
|
|
7173
7374
|
}
|
|
7174
7375
|
}, [volume, isMuted]);
|
|
7175
|
-
(0,
|
|
7376
|
+
(0, import_react25.useEffect)(() => {
|
|
7176
7377
|
const video = videoRef.current;
|
|
7177
7378
|
if (!video) return;
|
|
7178
7379
|
const onPlay = () => setIsPlaying(true);
|
|
@@ -7187,7 +7388,7 @@ var VideoPlayer = ({
|
|
|
7187
7388
|
video.removeEventListener("ended", onEnded);
|
|
7188
7389
|
};
|
|
7189
7390
|
}, []);
|
|
7190
|
-
(0,
|
|
7391
|
+
(0, import_react25.useEffect)(() => {
|
|
7191
7392
|
if (isPlaying) {
|
|
7192
7393
|
showControlsWithTimer();
|
|
7193
7394
|
} else {
|
|
@@ -7199,7 +7400,7 @@ var VideoPlayer = ({
|
|
|
7199
7400
|
}
|
|
7200
7401
|
}
|
|
7201
7402
|
}, [isPlaying, isFullscreen, showControlsWithTimer, clearControlsTimeout]);
|
|
7202
|
-
(0,
|
|
7403
|
+
(0, import_react25.useEffect)(() => {
|
|
7203
7404
|
const handleFullscreenChange = () => {
|
|
7204
7405
|
const isCurrentlyFullscreen = !!document.fullscreenElement;
|
|
7205
7406
|
setIsFullscreen(isCurrentlyFullscreen);
|
|
@@ -7212,7 +7413,7 @@ var VideoPlayer = ({
|
|
|
7212
7413
|
document.removeEventListener("fullscreenchange", handleFullscreenChange);
|
|
7213
7414
|
};
|
|
7214
7415
|
}, [showControlsWithTimer]);
|
|
7215
|
-
(0,
|
|
7416
|
+
(0, import_react25.useEffect)(() => {
|
|
7216
7417
|
const init = () => {
|
|
7217
7418
|
if (!isFullscreen) {
|
|
7218
7419
|
showControlsWithTimer();
|
|
@@ -7234,7 +7435,7 @@ var VideoPlayer = ({
|
|
|
7234
7435
|
};
|
|
7235
7436
|
}
|
|
7236
7437
|
}, []);
|
|
7237
|
-
const getInitialTime = (0,
|
|
7438
|
+
const getInitialTime = (0, import_react25.useCallback)(() => {
|
|
7238
7439
|
if (!autoSave || !storageKey) {
|
|
7239
7440
|
return Number.isFinite(initialTime) && initialTime >= 0 ? initialTime : void 0;
|
|
7240
7441
|
}
|
|
@@ -7245,14 +7446,14 @@ var VideoPlayer = ({
|
|
|
7245
7446
|
if (hasValidSaved) return saved;
|
|
7246
7447
|
return void 0;
|
|
7247
7448
|
}, [autoSave, storageKey, src, initialTime]);
|
|
7248
|
-
(0,
|
|
7449
|
+
(0, import_react25.useEffect)(() => {
|
|
7249
7450
|
const start = getInitialTime();
|
|
7250
7451
|
if (start !== void 0 && videoRef.current) {
|
|
7251
7452
|
videoRef.current.currentTime = start;
|
|
7252
7453
|
setCurrentTime(start);
|
|
7253
7454
|
}
|
|
7254
7455
|
}, [getInitialTime]);
|
|
7255
|
-
const saveProgress = (0,
|
|
7456
|
+
const saveProgress = (0, import_react25.useCallback)(
|
|
7256
7457
|
(time) => {
|
|
7257
7458
|
if (!autoSave || !storageKey) return;
|
|
7258
7459
|
const now = Date.now();
|
|
@@ -7263,7 +7464,7 @@ var VideoPlayer = ({
|
|
|
7263
7464
|
},
|
|
7264
7465
|
[autoSave, storageKey, src]
|
|
7265
7466
|
);
|
|
7266
|
-
const togglePlayPause = (0,
|
|
7467
|
+
const togglePlayPause = (0, import_react25.useCallback)(async () => {
|
|
7267
7468
|
const video = videoRef.current;
|
|
7268
7469
|
if (!video) return;
|
|
7269
7470
|
if (!video.paused) {
|
|
@@ -7275,7 +7476,7 @@ var VideoPlayer = ({
|
|
|
7275
7476
|
} catch {
|
|
7276
7477
|
}
|
|
7277
7478
|
}, []);
|
|
7278
|
-
const handleVolumeChange = (0,
|
|
7479
|
+
const handleVolumeChange = (0, import_react25.useCallback)(
|
|
7279
7480
|
(newVolume) => {
|
|
7280
7481
|
const video = videoRef.current;
|
|
7281
7482
|
if (!video) return;
|
|
@@ -7294,7 +7495,7 @@ var VideoPlayer = ({
|
|
|
7294
7495
|
},
|
|
7295
7496
|
[isMuted]
|
|
7296
7497
|
);
|
|
7297
|
-
const toggleMute = (0,
|
|
7498
|
+
const toggleMute = (0, import_react25.useCallback)(() => {
|
|
7298
7499
|
const video = videoRef.current;
|
|
7299
7500
|
if (!video) return;
|
|
7300
7501
|
if (isMuted) {
|
|
@@ -7308,13 +7509,13 @@ var VideoPlayer = ({
|
|
|
7308
7509
|
setIsMuted(true);
|
|
7309
7510
|
}
|
|
7310
7511
|
}, [isMuted, volume]);
|
|
7311
|
-
const handleSeek = (0,
|
|
7512
|
+
const handleSeek = (0, import_react25.useCallback)((newTime) => {
|
|
7312
7513
|
const video = videoRef.current;
|
|
7313
7514
|
if (video) {
|
|
7314
7515
|
video.currentTime = newTime;
|
|
7315
7516
|
}
|
|
7316
7517
|
}, []);
|
|
7317
|
-
const toggleFullscreen = (0,
|
|
7518
|
+
const toggleFullscreen = (0, import_react25.useCallback)(() => {
|
|
7318
7519
|
const container = videoRef.current?.parentElement;
|
|
7319
7520
|
if (!container) return;
|
|
7320
7521
|
if (!isFullscreen && container.requestFullscreen) {
|
|
@@ -7323,23 +7524,23 @@ var VideoPlayer = ({
|
|
|
7323
7524
|
document.exitFullscreen();
|
|
7324
7525
|
}
|
|
7325
7526
|
}, [isFullscreen]);
|
|
7326
|
-
const handleSpeedChange = (0,
|
|
7527
|
+
const handleSpeedChange = (0, import_react25.useCallback)((speed) => {
|
|
7327
7528
|
if (videoRef.current) {
|
|
7328
7529
|
videoRef.current.playbackRate = speed;
|
|
7329
7530
|
setPlaybackRate(speed);
|
|
7330
7531
|
setShowSpeedMenu(false);
|
|
7331
7532
|
}
|
|
7332
7533
|
}, []);
|
|
7333
|
-
const toggleSpeedMenu = (0,
|
|
7534
|
+
const toggleSpeedMenu = (0, import_react25.useCallback)(() => {
|
|
7334
7535
|
setShowSpeedMenu(!showSpeedMenu);
|
|
7335
7536
|
}, [showSpeedMenu]);
|
|
7336
|
-
const toggleCaptions = (0,
|
|
7537
|
+
const toggleCaptions = (0, import_react25.useCallback)(() => {
|
|
7337
7538
|
if (!trackRef.current?.track || !subtitles) return;
|
|
7338
7539
|
const newShowCaptions = !showCaptions;
|
|
7339
7540
|
setShowCaptions(newShowCaptions);
|
|
7340
7541
|
trackRef.current.track.mode = newShowCaptions && subtitles ? "showing" : "hidden";
|
|
7341
7542
|
}, [showCaptions, subtitles]);
|
|
7342
|
-
const checkVideoCompletion = (0,
|
|
7543
|
+
const checkVideoCompletion = (0, import_react25.useCallback)(
|
|
7343
7544
|
(progressPercent) => {
|
|
7344
7545
|
if (progressPercent >= 95 && !hasCompleted) {
|
|
7345
7546
|
setHasCompleted(true);
|
|
@@ -7348,7 +7549,7 @@ var VideoPlayer = ({
|
|
|
7348
7549
|
},
|
|
7349
7550
|
[hasCompleted, onVideoComplete]
|
|
7350
7551
|
);
|
|
7351
|
-
const handleTimeUpdate = (0,
|
|
7552
|
+
const handleTimeUpdate = (0, import_react25.useCallback)(() => {
|
|
7352
7553
|
const video = videoRef.current;
|
|
7353
7554
|
if (!video) return;
|
|
7354
7555
|
const current = video.currentTime;
|
|
@@ -7361,17 +7562,17 @@ var VideoPlayer = ({
|
|
|
7361
7562
|
checkVideoCompletion(progressPercent);
|
|
7362
7563
|
}
|
|
7363
7564
|
}, [duration, saveProgress, onTimeUpdate, onProgress, checkVideoCompletion]);
|
|
7364
|
-
const handleLoadedMetadata = (0,
|
|
7565
|
+
const handleLoadedMetadata = (0, import_react25.useCallback)(() => {
|
|
7365
7566
|
if (videoRef.current) {
|
|
7366
7567
|
setDuration(videoRef.current.duration);
|
|
7367
7568
|
}
|
|
7368
7569
|
}, []);
|
|
7369
|
-
(0,
|
|
7570
|
+
(0, import_react25.useEffect)(() => {
|
|
7370
7571
|
if (trackRef.current?.track) {
|
|
7371
7572
|
trackRef.current.track.mode = showCaptions && subtitles ? "showing" : "hidden";
|
|
7372
7573
|
}
|
|
7373
7574
|
}, [subtitles, showCaptions]);
|
|
7374
|
-
(0,
|
|
7575
|
+
(0, import_react25.useEffect)(() => {
|
|
7375
7576
|
const handleVisibilityChange = () => {
|
|
7376
7577
|
if (document.hidden && isPlaying && videoRef.current) {
|
|
7377
7578
|
videoRef.current.pause();
|
|
@@ -7393,13 +7594,13 @@ var VideoPlayer = ({
|
|
|
7393
7594
|
};
|
|
7394
7595
|
}, [isPlaying, clearControlsTimeout]);
|
|
7395
7596
|
const progressPercentage = duration > 0 ? currentTime / duration * 100 : 0;
|
|
7396
|
-
const getTopControlsOpacity = (0,
|
|
7597
|
+
const getTopControlsOpacity = (0, import_react25.useCallback)(() => {
|
|
7397
7598
|
return showControls ? "opacity-100" : "opacity-0";
|
|
7398
7599
|
}, [showControls]);
|
|
7399
|
-
const getBottomControlsOpacity = (0,
|
|
7600
|
+
const getBottomControlsOpacity = (0, import_react25.useCallback)(() => {
|
|
7400
7601
|
return showControls ? "opacity-100" : "opacity-0";
|
|
7401
7602
|
}, [showControls]);
|
|
7402
|
-
const handleVideoKeyDown = (0,
|
|
7603
|
+
const handleVideoKeyDown = (0, import_react25.useCallback)(
|
|
7403
7604
|
(e) => {
|
|
7404
7605
|
if (e.key) {
|
|
7405
7606
|
e.stopPropagation();
|
|
@@ -7454,9 +7655,9 @@ var VideoPlayer = ({
|
|
|
7454
7655
|
toggleFullscreen
|
|
7455
7656
|
]
|
|
7456
7657
|
);
|
|
7457
|
-
return /* @__PURE__ */ (0,
|
|
7458
|
-
(title || subtitleText) && /* @__PURE__ */ (0,
|
|
7459
|
-
title && /* @__PURE__ */ (0,
|
|
7658
|
+
return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("flex flex-col", className), children: [
|
|
7659
|
+
(title || subtitleText) && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "bg-subject-1 px-8 py-4 flex items-end justify-between min-h-20", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex flex-col gap-1", children: [
|
|
7660
|
+
title && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7460
7661
|
Text_default,
|
|
7461
7662
|
{
|
|
7462
7663
|
as: "h2",
|
|
@@ -7467,7 +7668,7 @@ var VideoPlayer = ({
|
|
|
7467
7668
|
children: title
|
|
7468
7669
|
}
|
|
7469
7670
|
),
|
|
7470
|
-
subtitleText && /* @__PURE__ */ (0,
|
|
7671
|
+
subtitleText && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7471
7672
|
Text_default,
|
|
7472
7673
|
{
|
|
7473
7674
|
as: "p",
|
|
@@ -7479,7 +7680,7 @@ var VideoPlayer = ({
|
|
|
7479
7680
|
}
|
|
7480
7681
|
)
|
|
7481
7682
|
] }) }),
|
|
7482
|
-
/* @__PURE__ */ (0,
|
|
7683
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
7483
7684
|
"section",
|
|
7484
7685
|
{
|
|
7485
7686
|
className: cn(
|
|
@@ -7494,7 +7695,7 @@ var VideoPlayer = ({
|
|
|
7494
7695
|
onTouchStart: handleMouseEnter,
|
|
7495
7696
|
onMouseLeave: handleMouseLeave,
|
|
7496
7697
|
children: [
|
|
7497
|
-
/* @__PURE__ */ (0,
|
|
7698
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7498
7699
|
"video",
|
|
7499
7700
|
{
|
|
7500
7701
|
ref: videoRef,
|
|
@@ -7508,7 +7709,7 @@ var VideoPlayer = ({
|
|
|
7508
7709
|
onKeyDown: handleVideoKeyDown,
|
|
7509
7710
|
tabIndex: 0,
|
|
7510
7711
|
"aria-label": title ? `Video: ${title}` : "Video player",
|
|
7511
|
-
children: /* @__PURE__ */ (0,
|
|
7712
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7512
7713
|
"track",
|
|
7513
7714
|
{
|
|
7514
7715
|
ref: trackRef,
|
|
@@ -7521,26 +7722,26 @@ var VideoPlayer = ({
|
|
|
7521
7722
|
)
|
|
7522
7723
|
}
|
|
7523
7724
|
),
|
|
7524
|
-
!isPlaying && /* @__PURE__ */ (0,
|
|
7725
|
+
!isPlaying && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7525
7726
|
IconButton_default,
|
|
7526
7727
|
{
|
|
7527
|
-
icon: /* @__PURE__ */ (0,
|
|
7728
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_phosphor_react18.Play, { size: 32, weight: "regular", className: "ml-1" }),
|
|
7528
7729
|
onClick: togglePlayPause,
|
|
7529
7730
|
"aria-label": "Play video",
|
|
7530
7731
|
className: "!bg-transparent !text-white !w-auto !h-auto hover:!bg-transparent hover:!text-gray-200"
|
|
7531
7732
|
}
|
|
7532
7733
|
) }),
|
|
7533
|
-
/* @__PURE__ */ (0,
|
|
7734
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7534
7735
|
"div",
|
|
7535
7736
|
{
|
|
7536
7737
|
className: cn(
|
|
7537
7738
|
"absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/70 to-transparent transition-opacity",
|
|
7538
7739
|
getTopControlsOpacity()
|
|
7539
7740
|
),
|
|
7540
|
-
children: /* @__PURE__ */ (0,
|
|
7741
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex justify-start", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7541
7742
|
IconButton_default,
|
|
7542
7743
|
{
|
|
7543
|
-
icon: isFullscreen ? /* @__PURE__ */ (0,
|
|
7744
|
+
icon: isFullscreen ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_phosphor_react18.ArrowsInSimple, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_phosphor_react18.ArrowsOutSimple, { size: 24 }),
|
|
7544
7745
|
onClick: toggleFullscreen,
|
|
7545
7746
|
"aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
|
|
7546
7747
|
className: "!bg-transparent !text-white hover:!bg-white/20"
|
|
@@ -7548,7 +7749,7 @@ var VideoPlayer = ({
|
|
|
7548
7749
|
) })
|
|
7549
7750
|
}
|
|
7550
7751
|
),
|
|
7551
|
-
/* @__PURE__ */ (0,
|
|
7752
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
|
|
7552
7753
|
"div",
|
|
7553
7754
|
{
|
|
7554
7755
|
className: cn(
|
|
@@ -7556,7 +7757,7 @@ var VideoPlayer = ({
|
|
|
7556
7757
|
getBottomControlsOpacity()
|
|
7557
7758
|
),
|
|
7558
7759
|
children: [
|
|
7559
|
-
/* @__PURE__ */ (0,
|
|
7760
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7560
7761
|
ProgressBar2,
|
|
7561
7762
|
{
|
|
7562
7763
|
currentTime,
|
|
@@ -7565,18 +7766,18 @@ var VideoPlayer = ({
|
|
|
7565
7766
|
onSeek: handleSeek
|
|
7566
7767
|
}
|
|
7567
7768
|
),
|
|
7568
|
-
/* @__PURE__ */ (0,
|
|
7569
|
-
/* @__PURE__ */ (0,
|
|
7570
|
-
/* @__PURE__ */ (0,
|
|
7769
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between px-4 pb-4", children: [
|
|
7770
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center gap-4", children: [
|
|
7771
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7571
7772
|
IconButton_default,
|
|
7572
7773
|
{
|
|
7573
|
-
icon: isPlaying ? /* @__PURE__ */ (0,
|
|
7774
|
+
icon: isPlaying ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_phosphor_react18.Pause, { size: 24 }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_phosphor_react18.Play, { size: 24 }),
|
|
7574
7775
|
onClick: togglePlayPause,
|
|
7575
7776
|
"aria-label": isPlaying ? "Pause" : "Play",
|
|
7576
7777
|
className: "!bg-transparent !text-white hover:!bg-white/20"
|
|
7577
7778
|
}
|
|
7578
7779
|
),
|
|
7579
|
-
/* @__PURE__ */ (0,
|
|
7780
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7580
7781
|
VolumeControls,
|
|
7581
7782
|
{
|
|
7582
7783
|
volume,
|
|
@@ -7585,10 +7786,10 @@ var VideoPlayer = ({
|
|
|
7585
7786
|
onToggleMute: toggleMute
|
|
7586
7787
|
}
|
|
7587
7788
|
),
|
|
7588
|
-
subtitles && /* @__PURE__ */ (0,
|
|
7789
|
+
subtitles && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7589
7790
|
IconButton_default,
|
|
7590
7791
|
{
|
|
7591
|
-
icon: /* @__PURE__ */ (0,
|
|
7792
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_phosphor_react18.ClosedCaptioning, { size: 24 }),
|
|
7592
7793
|
onClick: toggleCaptions,
|
|
7593
7794
|
"aria-label": showCaptions ? "Hide captions" : "Show captions",
|
|
7594
7795
|
className: cn(
|
|
@@ -7597,13 +7798,13 @@ var VideoPlayer = ({
|
|
|
7597
7798
|
)
|
|
7598
7799
|
}
|
|
7599
7800
|
),
|
|
7600
|
-
/* @__PURE__ */ (0,
|
|
7801
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Text_default, { size: "sm", weight: "medium", color: "text-white", children: [
|
|
7601
7802
|
formatTime(currentTime),
|
|
7602
7803
|
" / ",
|
|
7603
7804
|
formatTime(duration)
|
|
7604
7805
|
] })
|
|
7605
7806
|
] }),
|
|
7606
|
-
/* @__PURE__ */ (0,
|
|
7807
|
+
/* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
|
|
7607
7808
|
SpeedMenu,
|
|
7608
7809
|
{
|
|
7609
7810
|
showSpeedMenu,
|
|
@@ -7624,9 +7825,9 @@ var VideoPlayer = ({
|
|
|
7624
7825
|
var VideoPlayer_default = VideoPlayer;
|
|
7625
7826
|
|
|
7626
7827
|
// src/components/Whiteboard/Whiteboard.tsx
|
|
7627
|
-
var
|
|
7828
|
+
var import_react26 = require("react");
|
|
7628
7829
|
var import_phosphor_react19 = require("phosphor-react");
|
|
7629
|
-
var
|
|
7830
|
+
var import_jsx_runtime38 = require("react/jsx-runtime");
|
|
7630
7831
|
var IMAGE_WIDTH = 225;
|
|
7631
7832
|
var IMAGE_HEIGHT = 90;
|
|
7632
7833
|
var Whiteboard = ({
|
|
@@ -7637,8 +7838,8 @@ var Whiteboard = ({
|
|
|
7637
7838
|
imagesPerRow = 2,
|
|
7638
7839
|
...rest
|
|
7639
7840
|
}) => {
|
|
7640
|
-
const [imageErrors, setImageErrors] = (0,
|
|
7641
|
-
const handleDownload = (0,
|
|
7841
|
+
const [imageErrors, setImageErrors] = (0, import_react26.useState)(/* @__PURE__ */ new Set());
|
|
7842
|
+
const handleDownload = (0, import_react26.useCallback)(
|
|
7642
7843
|
(image) => {
|
|
7643
7844
|
if (onDownload) {
|
|
7644
7845
|
onDownload(image);
|
|
@@ -7655,7 +7856,7 @@ var Whiteboard = ({
|
|
|
7655
7856
|
},
|
|
7656
7857
|
[onDownload]
|
|
7657
7858
|
);
|
|
7658
|
-
const handleImageError = (0,
|
|
7859
|
+
const handleImageError = (0, import_react26.useCallback)((imageId) => {
|
|
7659
7860
|
setImageErrors((prev) => new Set(prev).add(imageId));
|
|
7660
7861
|
}, []);
|
|
7661
7862
|
const gridColsClass = images?.length === 1 ? "grid-cols-1" : {
|
|
@@ -7664,7 +7865,7 @@ var Whiteboard = ({
|
|
|
7664
7865
|
4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
|
|
7665
7866
|
}[imagesPerRow];
|
|
7666
7867
|
if (!images || images.length === 0) {
|
|
7667
|
-
return /* @__PURE__ */ (0,
|
|
7868
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7668
7869
|
"div",
|
|
7669
7870
|
{
|
|
7670
7871
|
className: cn(
|
|
@@ -7672,11 +7873,11 @@ var Whiteboard = ({
|
|
|
7672
7873
|
className
|
|
7673
7874
|
),
|
|
7674
7875
|
...rest,
|
|
7675
|
-
children: /* @__PURE__ */ (0,
|
|
7876
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-gray-400 text-sm", children: "Nenhuma imagem dispon\xEDvel" })
|
|
7676
7877
|
}
|
|
7677
7878
|
);
|
|
7678
7879
|
}
|
|
7679
|
-
return /* @__PURE__ */ (0,
|
|
7880
|
+
return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7680
7881
|
"div",
|
|
7681
7882
|
{
|
|
7682
7883
|
className: cn(
|
|
@@ -7684,7 +7885,7 @@ var Whiteboard = ({
|
|
|
7684
7885
|
className
|
|
7685
7886
|
),
|
|
7686
7887
|
...rest,
|
|
7687
|
-
children: /* @__PURE__ */ (0,
|
|
7888
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: cn("grid gap-4", gridColsClass), children: images.map((image) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
|
|
7688
7889
|
"div",
|
|
7689
7890
|
{
|
|
7690
7891
|
className: "relative group overflow-hidden bg-gray-100 rounded-lg",
|
|
@@ -7692,7 +7893,7 @@ var Whiteboard = ({
|
|
|
7692
7893
|
width: `${IMAGE_WIDTH}px`
|
|
7693
7894
|
},
|
|
7694
7895
|
children: [
|
|
7695
|
-
/* @__PURE__ */ (0,
|
|
7896
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7696
7897
|
"div",
|
|
7697
7898
|
{
|
|
7698
7899
|
className: "relative",
|
|
@@ -7700,8 +7901,8 @@ var Whiteboard = ({
|
|
|
7700
7901
|
width: `${IMAGE_WIDTH}px`,
|
|
7701
7902
|
height: `${IMAGE_HEIGHT}px`
|
|
7702
7903
|
},
|
|
7703
|
-
children: imageErrors.has(image.id) ? /* @__PURE__ */ (0,
|
|
7704
|
-
/* @__PURE__ */ (0,
|
|
7904
|
+
children: imageErrors.has(image.id) ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-200", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("p", { className: "text-gray-500 text-sm text-center px-2", children: "Imagem indispon\xEDvel" }) }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
|
|
7905
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7705
7906
|
"img",
|
|
7706
7907
|
{
|
|
7707
7908
|
src: image.imageUrl,
|
|
@@ -7711,18 +7912,18 @@ var Whiteboard = ({
|
|
|
7711
7912
|
onError: () => handleImageError(image.id)
|
|
7712
7913
|
}
|
|
7713
7914
|
),
|
|
7714
|
-
/* @__PURE__ */ (0,
|
|
7915
|
+
/* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" })
|
|
7715
7916
|
] })
|
|
7716
7917
|
}
|
|
7717
7918
|
),
|
|
7718
|
-
showDownload && /* @__PURE__ */ (0,
|
|
7919
|
+
showDownload && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7719
7920
|
"button",
|
|
7720
7921
|
{
|
|
7721
7922
|
type: "button",
|
|
7722
7923
|
onClick: () => handleDownload(image),
|
|
7723
7924
|
className: "cursor-pointer absolute bottom-3 right-3 flex items-center justify-center bg-black/20 backdrop-blur-sm rounded hover:bg-black/30 transition-colors duration-200 group/button w-6 h-6",
|
|
7724
7925
|
"aria-label": `Download ${image.title || "imagem"}`,
|
|
7725
|
-
children: /* @__PURE__ */ (0,
|
|
7926
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
|
|
7726
7927
|
import_phosphor_react19.ArrowsOut,
|
|
7727
7928
|
{
|
|
7728
7929
|
size: 24,
|
|
@@ -7742,10 +7943,10 @@ var Whiteboard = ({
|
|
|
7742
7943
|
var Whiteboard_default = Whiteboard;
|
|
7743
7944
|
|
|
7744
7945
|
// src/components/Auth/Auth.tsx
|
|
7745
|
-
var
|
|
7946
|
+
var import_react27 = require("react");
|
|
7746
7947
|
var import_react_router_dom = require("react-router-dom");
|
|
7747
|
-
var
|
|
7748
|
-
var AuthContext = (0,
|
|
7948
|
+
var import_jsx_runtime39 = require("react/jsx-runtime");
|
|
7949
|
+
var AuthContext = (0, import_react27.createContext)(void 0);
|
|
7749
7950
|
var AuthProvider = ({
|
|
7750
7951
|
children,
|
|
7751
7952
|
checkAuthFn,
|
|
@@ -7755,12 +7956,12 @@ var AuthProvider = ({
|
|
|
7755
7956
|
getSessionFn,
|
|
7756
7957
|
getTokensFn
|
|
7757
7958
|
}) => {
|
|
7758
|
-
const [authState, setAuthState] = (0,
|
|
7959
|
+
const [authState, setAuthState] = (0, import_react27.useState)({
|
|
7759
7960
|
isAuthenticated: false,
|
|
7760
7961
|
isLoading: true,
|
|
7761
7962
|
...initialAuthState
|
|
7762
7963
|
});
|
|
7763
|
-
const checkAuth = (0,
|
|
7964
|
+
const checkAuth = (0, import_react27.useCallback)(async () => {
|
|
7764
7965
|
try {
|
|
7765
7966
|
setAuthState((prev) => ({ ...prev, isLoading: true }));
|
|
7766
7967
|
if (!checkAuthFn) {
|
|
@@ -7791,7 +7992,7 @@ var AuthProvider = ({
|
|
|
7791
7992
|
return false;
|
|
7792
7993
|
}
|
|
7793
7994
|
}, [checkAuthFn, getUserFn, getSessionFn, getTokensFn]);
|
|
7794
|
-
const signOut = (0,
|
|
7995
|
+
const signOut = (0, import_react27.useCallback)(() => {
|
|
7795
7996
|
if (signOutFn) {
|
|
7796
7997
|
signOutFn();
|
|
7797
7998
|
}
|
|
@@ -7803,10 +8004,10 @@ var AuthProvider = ({
|
|
|
7803
8004
|
tokens: void 0
|
|
7804
8005
|
}));
|
|
7805
8006
|
}, [signOutFn]);
|
|
7806
|
-
(0,
|
|
8007
|
+
(0, import_react27.useEffect)(() => {
|
|
7807
8008
|
checkAuth();
|
|
7808
8009
|
}, [checkAuth]);
|
|
7809
|
-
const contextValue = (0,
|
|
8010
|
+
const contextValue = (0, import_react27.useMemo)(
|
|
7810
8011
|
() => ({
|
|
7811
8012
|
...authState,
|
|
7812
8013
|
checkAuth,
|
|
@@ -7814,10 +8015,10 @@ var AuthProvider = ({
|
|
|
7814
8015
|
}),
|
|
7815
8016
|
[authState, checkAuth, signOut]
|
|
7816
8017
|
);
|
|
7817
|
-
return /* @__PURE__ */ (0,
|
|
8018
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(AuthContext.Provider, { value: contextValue, children });
|
|
7818
8019
|
};
|
|
7819
8020
|
var useAuth = () => {
|
|
7820
|
-
const context = (0,
|
|
8021
|
+
const context = (0, import_react27.useContext)(AuthContext);
|
|
7821
8022
|
if (context === void 0) {
|
|
7822
8023
|
throw new Error("useAuth deve ser usado dentro de um AuthProvider");
|
|
7823
8024
|
}
|
|
@@ -7830,9 +8031,9 @@ var ProtectedRoute = ({
|
|
|
7830
8031
|
additionalCheck
|
|
7831
8032
|
}) => {
|
|
7832
8033
|
const { isAuthenticated, isLoading, ...authState } = useAuth();
|
|
7833
|
-
const defaultLoadingComponent = /* @__PURE__ */ (0,
|
|
8034
|
+
const defaultLoadingComponent = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
|
|
7834
8035
|
if (isLoading) {
|
|
7835
|
-
return /* @__PURE__ */ (0,
|
|
8036
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: loadingComponent || defaultLoadingComponent });
|
|
7836
8037
|
}
|
|
7837
8038
|
if (!isAuthenticated) {
|
|
7838
8039
|
if (typeof window !== "undefined") {
|
|
@@ -7843,12 +8044,12 @@ var ProtectedRoute = ({
|
|
|
7843
8044
|
return null;
|
|
7844
8045
|
}
|
|
7845
8046
|
}
|
|
7846
|
-
return /* @__PURE__ */ (0,
|
|
8047
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
|
|
7847
8048
|
}
|
|
7848
8049
|
if (additionalCheck && !additionalCheck({ isAuthenticated, isLoading, ...authState })) {
|
|
7849
|
-
return /* @__PURE__ */ (0,
|
|
8050
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
|
|
7850
8051
|
}
|
|
7851
|
-
return /* @__PURE__ */ (0,
|
|
8052
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children });
|
|
7852
8053
|
};
|
|
7853
8054
|
var PublicRoute = ({
|
|
7854
8055
|
children,
|
|
@@ -7858,15 +8059,15 @@ var PublicRoute = ({
|
|
|
7858
8059
|
}) => {
|
|
7859
8060
|
const { isAuthenticated, isLoading } = useAuth();
|
|
7860
8061
|
if (checkAuthBeforeRender && isLoading) {
|
|
7861
|
-
return /* @__PURE__ */ (0,
|
|
8062
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
|
|
7862
8063
|
}
|
|
7863
8064
|
if (isAuthenticated && redirectIfAuthenticated) {
|
|
7864
|
-
return /* @__PURE__ */ (0,
|
|
8065
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_router_dom.Navigate, { to: redirectTo, replace: true });
|
|
7865
8066
|
}
|
|
7866
|
-
return /* @__PURE__ */ (0,
|
|
8067
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children });
|
|
7867
8068
|
};
|
|
7868
8069
|
var withAuth = (Component, options = {}) => {
|
|
7869
|
-
return (props) => /* @__PURE__ */ (0,
|
|
8070
|
+
return (props) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ProtectedRoute, { ...options, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Component, { ...props }) });
|
|
7870
8071
|
};
|
|
7871
8072
|
var useAuthGuard = (options = {}) => {
|
|
7872
8073
|
const authState = useAuth();
|
|
@@ -7881,7 +8082,7 @@ var useAuthGuard = (options = {}) => {
|
|
|
7881
8082
|
var useRouteAuth = (fallbackPath = "/") => {
|
|
7882
8083
|
const { isAuthenticated, isLoading } = useAuth();
|
|
7883
8084
|
const location = (0, import_react_router_dom.useLocation)();
|
|
7884
|
-
const redirectToLogin = () => /* @__PURE__ */ (0,
|
|
8085
|
+
const redirectToLogin = () => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_router_dom.Navigate, { to: fallbackPath, state: { from: location }, replace: true });
|
|
7885
8086
|
return {
|
|
7886
8087
|
isAuthenticated,
|
|
7887
8088
|
isLoading,
|
|
@@ -7957,7 +8158,7 @@ function createZustandAuthAdapter(useAuthStore) {
|
|
|
7957
8158
|
}
|
|
7958
8159
|
|
|
7959
8160
|
// src/components/Auth/useUrlAuthentication.ts
|
|
7960
|
-
var
|
|
8161
|
+
var import_react28 = require("react");
|
|
7961
8162
|
var import_react_router_dom2 = require("react-router-dom");
|
|
7962
8163
|
var getAuthParams = (location, extractParams) => {
|
|
7963
8164
|
const searchParams = new URLSearchParams(location.search);
|
|
@@ -8005,8 +8206,8 @@ var handleUserData = (responseData, setUser) => {
|
|
|
8005
8206
|
};
|
|
8006
8207
|
function useUrlAuthentication(options) {
|
|
8007
8208
|
const location = (0, import_react_router_dom2.useLocation)();
|
|
8008
|
-
const processedRef = (0,
|
|
8009
|
-
(0,
|
|
8209
|
+
const processedRef = (0, import_react28.useRef)(false);
|
|
8210
|
+
(0, import_react28.useEffect)(() => {
|
|
8010
8211
|
const handleAuthentication = async () => {
|
|
8011
8212
|
if (processedRef.current) {
|
|
8012
8213
|
return;
|
|
@@ -8077,9 +8278,9 @@ function useUrlAuthentication(options) {
|
|
|
8077
8278
|
}
|
|
8078
8279
|
|
|
8079
8280
|
// src/components/Auth/useApiConfig.ts
|
|
8080
|
-
var
|
|
8281
|
+
var import_react29 = require("react");
|
|
8081
8282
|
function useApiConfig(api) {
|
|
8082
|
-
return (0,
|
|
8283
|
+
return (0, import_react29.useMemo)(
|
|
8083
8284
|
() => ({
|
|
8084
8285
|
get: (endpoint, config) => api.get(endpoint, config)
|
|
8085
8286
|
}),
|
|
@@ -8089,7 +8290,7 @@ function useApiConfig(api) {
|
|
|
8089
8290
|
|
|
8090
8291
|
// src/components/Quiz/Quiz.tsx
|
|
8091
8292
|
var import_phosphor_react20 = require("phosphor-react");
|
|
8092
|
-
var
|
|
8293
|
+
var import_react30 = require("react");
|
|
8093
8294
|
|
|
8094
8295
|
// src/components/Quiz/useQuizStore.ts
|
|
8095
8296
|
var import_zustand7 = require("zustand");
|
|
@@ -8725,13 +8926,13 @@ var useQuizStore = (0, import_zustand7.create)()(
|
|
|
8725
8926
|
var mock_image_question_default = "./mock-image-question-HEZCLFDL.png";
|
|
8726
8927
|
|
|
8727
8928
|
// src/components/Quiz/Quiz.tsx
|
|
8728
|
-
var
|
|
8929
|
+
var import_jsx_runtime40 = require("react/jsx-runtime");
|
|
8729
8930
|
var getStatusBadge = (status) => {
|
|
8730
8931
|
switch (status) {
|
|
8731
8932
|
case "correct":
|
|
8732
|
-
return /* @__PURE__ */ (0,
|
|
8933
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_phosphor_react20.CheckCircle, {}), children: "Resposta correta" });
|
|
8733
8934
|
case "incorrect":
|
|
8734
|
-
return /* @__PURE__ */ (0,
|
|
8935
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_phosphor_react20.XCircle, {}), children: "Resposta incorreta" });
|
|
8735
8936
|
default:
|
|
8736
8937
|
return null;
|
|
8737
8938
|
}
|
|
@@ -8744,18 +8945,18 @@ var getStatusStyles = (variantCorrect) => {
|
|
|
8744
8945
|
return "bg-error-background border-error-300";
|
|
8745
8946
|
}
|
|
8746
8947
|
};
|
|
8747
|
-
var Quiz = (0,
|
|
8948
|
+
var Quiz = (0, import_react30.forwardRef)(({ children, className, variant = "default", ...props }, ref) => {
|
|
8748
8949
|
const { setVariant } = useQuizStore();
|
|
8749
|
-
(0,
|
|
8950
|
+
(0, import_react30.useEffect)(() => {
|
|
8750
8951
|
setVariant(variant);
|
|
8751
8952
|
}, [variant, setVariant]);
|
|
8752
|
-
return /* @__PURE__ */ (0,
|
|
8953
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ref, className: cn("flex flex-col", className), ...props, children });
|
|
8753
8954
|
});
|
|
8754
|
-
var QuizHeaderResult = (0,
|
|
8955
|
+
var QuizHeaderResult = (0, import_react30.forwardRef)(
|
|
8755
8956
|
({ className, ...props }, ref) => {
|
|
8756
8957
|
const { getQuestionResultByQuestionId, getCurrentQuestion } = useQuizStore();
|
|
8757
|
-
const [status, setStatus] = (0,
|
|
8758
|
-
(0,
|
|
8958
|
+
const [status, setStatus] = (0, import_react30.useState)(void 0);
|
|
8959
|
+
(0, import_react30.useEffect)(() => {
|
|
8759
8960
|
const cq = getCurrentQuestion();
|
|
8760
8961
|
if (!cq) {
|
|
8761
8962
|
setStatus(void 0);
|
|
@@ -8790,7 +8991,7 @@ var QuizHeaderResult = (0, import_react28.forwardRef)(
|
|
|
8790
8991
|
return "N\xE3o foi dessa vez...voc\xEA deixou a resposta em branco";
|
|
8791
8992
|
}
|
|
8792
8993
|
};
|
|
8793
|
-
return /* @__PURE__ */ (0,
|
|
8994
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
8794
8995
|
"div",
|
|
8795
8996
|
{
|
|
8796
8997
|
ref,
|
|
@@ -8801,14 +9002,14 @@ var QuizHeaderResult = (0, import_react28.forwardRef)(
|
|
|
8801
9002
|
),
|
|
8802
9003
|
...props,
|
|
8803
9004
|
children: [
|
|
8804
|
-
/* @__PURE__ */ (0,
|
|
8805
|
-
/* @__PURE__ */ (0,
|
|
9005
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-950 font-bold text-lg", children: "Resultado" }),
|
|
9006
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-700 text-md", children: getLabelByAnswersStatus() })
|
|
8806
9007
|
]
|
|
8807
9008
|
}
|
|
8808
9009
|
);
|
|
8809
9010
|
}
|
|
8810
9011
|
);
|
|
8811
|
-
var QuizTitle = (0,
|
|
9012
|
+
var QuizTitle = (0, import_react30.forwardRef)(
|
|
8812
9013
|
({ className, ...props }, ref) => {
|
|
8813
9014
|
const {
|
|
8814
9015
|
currentQuestionIndex,
|
|
@@ -8818,7 +9019,7 @@ var QuizTitle = (0, import_react28.forwardRef)(
|
|
|
8818
9019
|
formatTime: formatTime2,
|
|
8819
9020
|
isStarted
|
|
8820
9021
|
} = useQuizStore();
|
|
8821
|
-
const [showExitConfirmation, setShowExitConfirmation] = (0,
|
|
9022
|
+
const [showExitConfirmation, setShowExitConfirmation] = (0, import_react30.useState)(false);
|
|
8822
9023
|
const totalQuestions = getTotalQuestions();
|
|
8823
9024
|
const quizTitle = getQuizTitle();
|
|
8824
9025
|
const handleBackClick = () => {
|
|
@@ -8835,8 +9036,8 @@ var QuizTitle = (0, import_react28.forwardRef)(
|
|
|
8835
9036
|
const handleCancelExit = () => {
|
|
8836
9037
|
setShowExitConfirmation(false);
|
|
8837
9038
|
};
|
|
8838
|
-
return /* @__PURE__ */ (0,
|
|
8839
|
-
/* @__PURE__ */ (0,
|
|
9039
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9040
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
8840
9041
|
"div",
|
|
8841
9042
|
{
|
|
8842
9043
|
ref,
|
|
@@ -8846,24 +9047,24 @@ var QuizTitle = (0, import_react28.forwardRef)(
|
|
|
8846
9047
|
),
|
|
8847
9048
|
...props,
|
|
8848
9049
|
children: [
|
|
8849
|
-
/* @__PURE__ */ (0,
|
|
9050
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8850
9051
|
IconButton_default,
|
|
8851
9052
|
{
|
|
8852
|
-
icon: /* @__PURE__ */ (0,
|
|
9053
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_phosphor_react20.CaretLeft, { size: 24 }),
|
|
8853
9054
|
size: "md",
|
|
8854
9055
|
"aria-label": "Voltar",
|
|
8855
9056
|
onClick: handleBackClick
|
|
8856
9057
|
}
|
|
8857
9058
|
),
|
|
8858
|
-
/* @__PURE__ */ (0,
|
|
8859
|
-
/* @__PURE__ */ (0,
|
|
8860
|
-
/* @__PURE__ */ (0,
|
|
9059
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "flex flex-col gap-2 text-center", children: [
|
|
9060
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-950 font-bold text-md", children: quizTitle }),
|
|
9061
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-600 text-xs", children: totalQuestions > 0 ? `${currentQuestionIndex + 1} de ${totalQuestions}` : "0 de 0" })
|
|
8861
9062
|
] }),
|
|
8862
|
-
/* @__PURE__ */ (0,
|
|
9063
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "flex flex-row items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge_default, { variant: "outlined", action: "info", iconLeft: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_phosphor_react20.Clock, {}), children: isStarted ? formatTime2(timeElapsed) : "00:00" }) })
|
|
8863
9064
|
]
|
|
8864
9065
|
}
|
|
8865
9066
|
),
|
|
8866
|
-
/* @__PURE__ */ (0,
|
|
9067
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8867
9068
|
AlertDialog,
|
|
8868
9069
|
{
|
|
8869
9070
|
isOpen: showExitConfirmation,
|
|
@@ -8879,15 +9080,15 @@ var QuizTitle = (0, import_react28.forwardRef)(
|
|
|
8879
9080
|
] });
|
|
8880
9081
|
}
|
|
8881
9082
|
);
|
|
8882
|
-
var QuizSubTitle = (0,
|
|
9083
|
+
var QuizSubTitle = (0, import_react30.forwardRef)(
|
|
8883
9084
|
({ subTitle, ...props }, ref) => {
|
|
8884
|
-
return /* @__PURE__ */ (0,
|
|
9085
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "px-4 pb-2 pt-6", ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "font-bold text-lg text-text-950", children: subTitle }) });
|
|
8885
9086
|
}
|
|
8886
9087
|
);
|
|
8887
9088
|
var QuizHeader = () => {
|
|
8888
9089
|
const { getCurrentQuestion, currentQuestionIndex } = useQuizStore();
|
|
8889
9090
|
const currentQuestion = getCurrentQuestion();
|
|
8890
|
-
return /* @__PURE__ */ (0,
|
|
9091
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8891
9092
|
HeaderAlternative,
|
|
8892
9093
|
{
|
|
8893
9094
|
title: currentQuestion ? `Quest\xE3o ${currentQuestionIndex + 1}` : "Quest\xE3o",
|
|
@@ -8896,8 +9097,8 @@ var QuizHeader = () => {
|
|
|
8896
9097
|
}
|
|
8897
9098
|
);
|
|
8898
9099
|
};
|
|
8899
|
-
var QuizContainer = (0,
|
|
8900
|
-
return /* @__PURE__ */ (0,
|
|
9100
|
+
var QuizContainer = (0, import_react30.forwardRef)(({ children, className, ...props }, ref) => {
|
|
9101
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8901
9102
|
"div",
|
|
8902
9103
|
{
|
|
8903
9104
|
ref,
|
|
@@ -8910,7 +9111,7 @@ var QuizContainer = (0, import_react28.forwardRef)(({ children, className, ...pr
|
|
|
8910
9111
|
}
|
|
8911
9112
|
);
|
|
8912
9113
|
});
|
|
8913
|
-
var QuizContent = (0,
|
|
9114
|
+
var QuizContent = (0, import_react30.forwardRef)(({ paddingBottom }) => {
|
|
8914
9115
|
const { getCurrentQuestion } = useQuizStore();
|
|
8915
9116
|
const currentQuestion = getCurrentQuestion();
|
|
8916
9117
|
const questionComponents = {
|
|
@@ -8923,7 +9124,7 @@ var QuizContent = (0, import_react28.forwardRef)(({ paddingBottom }) => {
|
|
|
8923
9124
|
["IMAGEM" /* IMAGEM */]: QuizImageQuestion
|
|
8924
9125
|
};
|
|
8925
9126
|
const QuestionComponent = currentQuestion ? questionComponents[currentQuestion.questionType] : null;
|
|
8926
|
-
return QuestionComponent ? /* @__PURE__ */ (0,
|
|
9127
|
+
return QuestionComponent ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuestionComponent, { paddingBottom }) : null;
|
|
8927
9128
|
});
|
|
8928
9129
|
var QuizAlternative = ({ paddingBottom }) => {
|
|
8929
9130
|
const {
|
|
@@ -8960,10 +9161,10 @@ var QuizAlternative = ({ paddingBottom }) => {
|
|
|
8960
9161
|
};
|
|
8961
9162
|
});
|
|
8962
9163
|
if (!alternatives)
|
|
8963
|
-
return /* @__PURE__ */ (0,
|
|
8964
|
-
return /* @__PURE__ */ (0,
|
|
8965
|
-
/* @__PURE__ */ (0,
|
|
8966
|
-
/* @__PURE__ */ (0,
|
|
9164
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: "N\xE3o h\xE1 Alternativas" }) });
|
|
9165
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9166
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
|
|
9167
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
8967
9168
|
AlternativesList,
|
|
8968
9169
|
{
|
|
8969
9170
|
mode: variant === "default" ? "interactive" : "readonly",
|
|
@@ -8995,15 +9196,15 @@ var QuizMultipleChoice = ({ paddingBottom }) => {
|
|
|
8995
9196
|
const currentQuestionResult = getQuestionResultByQuestionId(
|
|
8996
9197
|
currentQuestion?.id || ""
|
|
8997
9198
|
);
|
|
8998
|
-
const prevSelectedValuesRef = (0,
|
|
8999
|
-
const prevQuestionIdRef = (0,
|
|
9000
|
-
const allCurrentAnswerIds = (0,
|
|
9199
|
+
const prevSelectedValuesRef = (0, import_react30.useRef)([]);
|
|
9200
|
+
const prevQuestionIdRef = (0, import_react30.useRef)("");
|
|
9201
|
+
const allCurrentAnswerIds = (0, import_react30.useMemo)(() => {
|
|
9001
9202
|
return allCurrentAnswers?.map((answer) => answer.optionId) || [];
|
|
9002
9203
|
}, [allCurrentAnswers]);
|
|
9003
|
-
const selectedValues = (0,
|
|
9204
|
+
const selectedValues = (0, import_react30.useMemo)(() => {
|
|
9004
9205
|
return allCurrentAnswerIds?.filter((id) => id !== null) || [];
|
|
9005
9206
|
}, [allCurrentAnswerIds]);
|
|
9006
|
-
const stableSelectedValues = (0,
|
|
9207
|
+
const stableSelectedValues = (0, import_react30.useMemo)(() => {
|
|
9007
9208
|
const currentQuestionId = currentQuestion?.id || "";
|
|
9008
9209
|
const hasQuestionChanged = prevQuestionIdRef.current !== currentQuestionId;
|
|
9009
9210
|
if (hasQuestionChanged) {
|
|
@@ -9027,7 +9228,7 @@ var QuizMultipleChoice = ({ paddingBottom }) => {
|
|
|
9027
9228
|
variant,
|
|
9028
9229
|
currentQuestionResult?.selectedOptions
|
|
9029
9230
|
]);
|
|
9030
|
-
const handleSelectedValues = (0,
|
|
9231
|
+
const handleSelectedValues = (0, import_react30.useCallback)(
|
|
9031
9232
|
(values) => {
|
|
9032
9233
|
if (currentQuestion) {
|
|
9033
9234
|
selectMultipleAnswer(currentQuestion.id, values);
|
|
@@ -9035,7 +9236,7 @@ var QuizMultipleChoice = ({ paddingBottom }) => {
|
|
|
9035
9236
|
},
|
|
9036
9237
|
[currentQuestion, selectMultipleAnswer]
|
|
9037
9238
|
);
|
|
9038
|
-
const questionKey = (0,
|
|
9239
|
+
const questionKey = (0, import_react30.useMemo)(
|
|
9039
9240
|
() => `question-${currentQuestion?.id || "1"}`,
|
|
9040
9241
|
[currentQuestion?.id]
|
|
9041
9242
|
);
|
|
@@ -9061,10 +9262,10 @@ var QuizMultipleChoice = ({ paddingBottom }) => {
|
|
|
9061
9262
|
};
|
|
9062
9263
|
});
|
|
9063
9264
|
if (!choices)
|
|
9064
|
-
return /* @__PURE__ */ (0,
|
|
9065
|
-
return /* @__PURE__ */ (0,
|
|
9066
|
-
/* @__PURE__ */ (0,
|
|
9067
|
-
/* @__PURE__ */ (0,
|
|
9265
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { children: "N\xE3o h\xE1 Escolhas Multiplas" }) });
|
|
9266
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9267
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
|
|
9268
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9068
9269
|
MultipleChoiceList,
|
|
9069
9270
|
{
|
|
9070
9271
|
choices,
|
|
@@ -9090,13 +9291,13 @@ var QuizDissertative = ({ paddingBottom }) => {
|
|
|
9090
9291
|
currentQuestion?.id || ""
|
|
9091
9292
|
);
|
|
9092
9293
|
const currentAnswer = getCurrentAnswer();
|
|
9093
|
-
const textareaRef = (0,
|
|
9294
|
+
const textareaRef = (0, import_react30.useRef)(null);
|
|
9094
9295
|
const handleAnswerChange = (value) => {
|
|
9095
9296
|
if (currentQuestion) {
|
|
9096
9297
|
selectDissertativeAnswer(currentQuestion.id, value);
|
|
9097
9298
|
}
|
|
9098
9299
|
};
|
|
9099
|
-
const adjustTextareaHeight = (0,
|
|
9300
|
+
const adjustTextareaHeight = (0, import_react30.useCallback)(() => {
|
|
9100
9301
|
if (textareaRef.current) {
|
|
9101
9302
|
textareaRef.current.style.height = "auto";
|
|
9102
9303
|
const scrollHeight = textareaRef.current.scrollHeight;
|
|
@@ -9106,16 +9307,16 @@ var QuizDissertative = ({ paddingBottom }) => {
|
|
|
9106
9307
|
textareaRef.current.style.height = `${newHeight}px`;
|
|
9107
9308
|
}
|
|
9108
9309
|
}, []);
|
|
9109
|
-
(0,
|
|
9310
|
+
(0, import_react30.useEffect)(() => {
|
|
9110
9311
|
adjustTextareaHeight();
|
|
9111
9312
|
}, [currentAnswer, adjustTextareaHeight]);
|
|
9112
9313
|
if (!currentQuestion) {
|
|
9113
|
-
return /* @__PURE__ */ (0,
|
|
9314
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-600 text-md", children: "Nenhuma quest\xE3o dispon\xEDvel" }) });
|
|
9114
9315
|
}
|
|
9115
9316
|
const localAnswer = (variant == "result" ? currentQuestionResult?.answer : currentAnswer?.answer) || "";
|
|
9116
|
-
return /* @__PURE__ */ (0,
|
|
9117
|
-
/* @__PURE__ */ (0,
|
|
9118
|
-
/* @__PURE__ */ (0,
|
|
9317
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9318
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizSubTitle, { subTitle: "Resposta" }),
|
|
9319
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizContainer, { className: cn(variant != "result" && paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "space-y-4 max-h-[600px] overflow-y-auto", children: variant === "default" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9119
9320
|
TextArea_default,
|
|
9120
9321
|
{
|
|
9121
9322
|
ref: textareaRef,
|
|
@@ -9125,10 +9326,10 @@ var QuizDissertative = ({ paddingBottom }) => {
|
|
|
9125
9326
|
rows: 4,
|
|
9126
9327
|
className: "min-h-[120px] max-h-[400px] resize-none overflow-y-auto"
|
|
9127
9328
|
}
|
|
9128
|
-
) }) : /* @__PURE__ */ (0,
|
|
9129
|
-
variant === "result" && currentQuestionResult?.answerStatus == "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */ && /* @__PURE__ */ (0,
|
|
9130
|
-
/* @__PURE__ */ (0,
|
|
9131
|
-
/* @__PURE__ */ (0,
|
|
9329
|
+
) }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "space-y-4", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: localAnswer || "Nenhuma resposta fornecida" }) }) }) }),
|
|
9330
|
+
variant === "result" && currentQuestionResult?.answerStatus == "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */ && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9331
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizSubTitle, { subTitle: "Observa\xE7\xE3o do professor" }),
|
|
9332
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. Mauris euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim." }) })
|
|
9132
9333
|
] })
|
|
9133
9334
|
] });
|
|
9134
9335
|
};
|
|
@@ -9154,16 +9355,16 @@ var QuizTrueOrFalse = ({ paddingBottom }) => {
|
|
|
9154
9355
|
];
|
|
9155
9356
|
const getLetterByIndex = (index) => String.fromCharCode(97 + index);
|
|
9156
9357
|
const isDefaultVariant = variant == "default";
|
|
9157
|
-
return /* @__PURE__ */ (0,
|
|
9158
|
-
/* @__PURE__ */ (0,
|
|
9159
|
-
/* @__PURE__ */ (0,
|
|
9358
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9359
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
|
|
9360
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-col gap-3.5", children: options.map((option, index) => {
|
|
9160
9361
|
const variantCorrect = option.isCorrect ? "correct" : "incorrect";
|
|
9161
|
-
return /* @__PURE__ */ (0,
|
|
9362
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
9162
9363
|
"section",
|
|
9163
9364
|
{
|
|
9164
9365
|
className: "flex flex-col gap-2",
|
|
9165
9366
|
children: [
|
|
9166
|
-
/* @__PURE__ */ (0,
|
|
9367
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
9167
9368
|
"div",
|
|
9168
9369
|
{
|
|
9169
9370
|
className: cn(
|
|
@@ -9171,20 +9372,20 @@ var QuizTrueOrFalse = ({ paddingBottom }) => {
|
|
|
9171
9372
|
!isDefaultVariant ? getStatusStyles(variantCorrect) : ""
|
|
9172
9373
|
),
|
|
9173
9374
|
children: [
|
|
9174
|
-
/* @__PURE__ */ (0,
|
|
9175
|
-
isDefaultVariant ? /* @__PURE__ */ (0,
|
|
9176
|
-
/* @__PURE__ */ (0,
|
|
9177
|
-
/* @__PURE__ */ (0,
|
|
9178
|
-
/* @__PURE__ */ (0,
|
|
9179
|
-
/* @__PURE__ */ (0,
|
|
9375
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-900 text-sm", children: getLetterByIndex(index).concat(") ").concat(option.label) }),
|
|
9376
|
+
isDefaultVariant ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Select_default, { size: "medium", children: [
|
|
9377
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectTrigger, { className: "w-[180px]", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectValue, { placeholder: "Selecione opc\xE3o" }) }),
|
|
9378
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(SelectContent, { children: [
|
|
9379
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectItem, { value: "V", children: "Verdadeiro" }),
|
|
9380
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectItem, { value: "F", children: "Falso" })
|
|
9180
9381
|
] })
|
|
9181
|
-
] }) : /* @__PURE__ */ (0,
|
|
9382
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex-shrink-0", children: getStatusBadge(variantCorrect) })
|
|
9182
9383
|
]
|
|
9183
9384
|
}
|
|
9184
9385
|
),
|
|
9185
|
-
!isDefaultVariant && /* @__PURE__ */ (0,
|
|
9186
|
-
/* @__PURE__ */ (0,
|
|
9187
|
-
!option.isCorrect && /* @__PURE__ */ (0,
|
|
9386
|
+
!isDefaultVariant && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "flex flex-row gap-2 items-center", children: [
|
|
9387
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-800 text-2xs", children: "Resposta selecionada: V" }),
|
|
9388
|
+
!option.isCorrect && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-800 text-2xs", children: "Resposta correta: F" })
|
|
9188
9389
|
] })
|
|
9189
9390
|
]
|
|
9190
9391
|
},
|
|
@@ -9245,7 +9446,7 @@ var QuizConnectDots = ({ paddingBottom }) => {
|
|
|
9245
9446
|
isCorrect: false
|
|
9246
9447
|
}
|
|
9247
9448
|
];
|
|
9248
|
-
const [userAnswers, setUserAnswers] = (0,
|
|
9449
|
+
const [userAnswers, setUserAnswers] = (0, import_react30.useState)(() => {
|
|
9249
9450
|
if (variant === "result") {
|
|
9250
9451
|
return mockUserAnswers;
|
|
9251
9452
|
}
|
|
@@ -9274,13 +9475,13 @@ var QuizConnectDots = ({ paddingBottom }) => {
|
|
|
9274
9475
|
const assignedDots = new Set(
|
|
9275
9476
|
userAnswers.map((a) => a.dotOption).filter(Boolean)
|
|
9276
9477
|
);
|
|
9277
|
-
return /* @__PURE__ */ (0,
|
|
9278
|
-
/* @__PURE__ */ (0,
|
|
9279
|
-
/* @__PURE__ */ (0,
|
|
9478
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9479
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
|
|
9480
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-col gap-3.5", children: options.map((option, index) => {
|
|
9280
9481
|
const answer = userAnswers[index];
|
|
9281
9482
|
const variantCorrect = answer.isCorrect ? "correct" : "incorrect";
|
|
9282
|
-
return /* @__PURE__ */ (0,
|
|
9283
|
-
/* @__PURE__ */ (0,
|
|
9483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("section", { className: "flex flex-col gap-2", children: [
|
|
9484
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
9284
9485
|
"div",
|
|
9285
9486
|
{
|
|
9286
9487
|
className: cn(
|
|
@@ -9288,30 +9489,30 @@ var QuizConnectDots = ({ paddingBottom }) => {
|
|
|
9288
9489
|
!isDefaultVariant ? getStatusStyles(variantCorrect) : ""
|
|
9289
9490
|
),
|
|
9290
9491
|
children: [
|
|
9291
|
-
/* @__PURE__ */ (0,
|
|
9292
|
-
isDefaultVariant ? /* @__PURE__ */ (0,
|
|
9492
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-900 text-sm", children: getLetterByIndex(index) + ") " + option.label }),
|
|
9493
|
+
isDefaultVariant ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
9293
9494
|
Select_default,
|
|
9294
9495
|
{
|
|
9295
9496
|
size: "medium",
|
|
9296
9497
|
value: answer.dotOption || void 0,
|
|
9297
9498
|
onValueChange: (value) => handleSelectDot(index, value),
|
|
9298
9499
|
children: [
|
|
9299
|
-
/* @__PURE__ */ (0,
|
|
9300
|
-
/* @__PURE__ */ (0,
|
|
9500
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectTrigger, { className: "w-[180px]", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectValue, { placeholder: "Selecione op\xE7\xE3o" }) }),
|
|
9501
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectContent, { children: dotsOptions.filter(
|
|
9301
9502
|
(dot) => !assignedDots.has(dot.label) || answer.dotOption === dot.label
|
|
9302
|
-
).map((dot) => /* @__PURE__ */ (0,
|
|
9503
|
+
).map((dot) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectItem, { value: dot.label, children: dot.label }, dot.label)) })
|
|
9303
9504
|
]
|
|
9304
9505
|
}
|
|
9305
|
-
) : /* @__PURE__ */ (0,
|
|
9506
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex-shrink-0", children: answer.isCorrect === null ? null : getStatusBadge(variantCorrect) })
|
|
9306
9507
|
]
|
|
9307
9508
|
}
|
|
9308
9509
|
),
|
|
9309
|
-
!isDefaultVariant && /* @__PURE__ */ (0,
|
|
9310
|
-
/* @__PURE__ */ (0,
|
|
9510
|
+
!isDefaultVariant && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "flex flex-row gap-2 items-center", children: [
|
|
9511
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-text-800 text-2xs", children: [
|
|
9311
9512
|
"Resposta selecionada: ",
|
|
9312
9513
|
answer.dotOption || "Nenhuma"
|
|
9313
9514
|
] }),
|
|
9314
|
-
!answer.isCorrect && /* @__PURE__ */ (0,
|
|
9515
|
+
!answer.isCorrect && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-text-800 text-2xs", children: [
|
|
9315
9516
|
"Resposta correta: ",
|
|
9316
9517
|
answer.correctOption
|
|
9317
9518
|
] })
|
|
@@ -9364,8 +9565,8 @@ var QuizFill = ({ paddingBottom }) => {
|
|
|
9364
9565
|
isCorrect: true
|
|
9365
9566
|
}
|
|
9366
9567
|
];
|
|
9367
|
-
const [answers, setAnswers] = (0,
|
|
9368
|
-
const baseId = (0,
|
|
9568
|
+
const [answers, setAnswers] = (0, import_react30.useState)({});
|
|
9569
|
+
const baseId = (0, import_react30.useId)();
|
|
9369
9570
|
const getAvailableOptionsForSelect = (selectId) => {
|
|
9370
9571
|
const usedOptions = Object.entries(answers).filter(([key]) => key !== selectId).map(([, value]) => value);
|
|
9371
9572
|
return options.filter((option) => !usedOptions.includes(option));
|
|
@@ -9378,18 +9579,18 @@ var QuizFill = ({ paddingBottom }) => {
|
|
|
9378
9579
|
const mockAnswer = mockUserAnswers.find(
|
|
9379
9580
|
(answer) => answer.selectId === selectId
|
|
9380
9581
|
);
|
|
9381
|
-
return /* @__PURE__ */ (0,
|
|
9582
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "inline-flex mb-2.5 text-success-600 font-semibold text-md border-b-2 border-success-600", children: mockAnswer?.correctAnswer });
|
|
9382
9583
|
};
|
|
9383
9584
|
const renderDefaultElement = (selectId, startIndex, selectedValue, availableOptionsForThisSelect) => {
|
|
9384
|
-
return /* @__PURE__ */ (0,
|
|
9585
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
9385
9586
|
Select_default,
|
|
9386
9587
|
{
|
|
9387
9588
|
value: selectedValue,
|
|
9388
9589
|
onValueChange: (value) => handleSelectChange(selectId, value),
|
|
9389
9590
|
className: "inline-flex mb-2.5",
|
|
9390
9591
|
children: [
|
|
9391
|
-
/* @__PURE__ */ (0,
|
|
9392
|
-
/* @__PURE__ */ (0,
|
|
9592
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectTrigger, { className: "inline-flex w-auto min-w-[140px] h-8 mx-1 bg-white border-gray-300", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectValue, { placeholder: "Selecione op\xE7\xE3o" }) }),
|
|
9593
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectContent, { children: availableOptionsForThisSelect.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectItem, { value: option, children: option }, `${option}-${index}`)) })
|
|
9393
9594
|
]
|
|
9394
9595
|
},
|
|
9395
9596
|
`${selectId}-${startIndex}`
|
|
@@ -9401,8 +9602,8 @@ var QuizFill = ({ paddingBottom }) => {
|
|
|
9401
9602
|
);
|
|
9402
9603
|
if (!mockAnswer) return null;
|
|
9403
9604
|
const action = mockAnswer.isCorrect ? "success" : "error";
|
|
9404
|
-
const icon = mockAnswer.isCorrect ? /* @__PURE__ */ (0,
|
|
9405
|
-
return /* @__PURE__ */ (0,
|
|
9605
|
+
const icon = mockAnswer.isCorrect ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_phosphor_react20.CheckCircle, {}) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_phosphor_react20.XCircle, {});
|
|
9606
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9406
9607
|
Badge_default,
|
|
9407
9608
|
{
|
|
9408
9609
|
variant: "solid",
|
|
@@ -9410,7 +9611,7 @@ var QuizFill = ({ paddingBottom }) => {
|
|
|
9410
9611
|
iconRight: icon,
|
|
9411
9612
|
size: "large",
|
|
9412
9613
|
className: "py-3 w-[180px] justify-between mb-2.5",
|
|
9413
|
-
children: /* @__PURE__ */ (0,
|
|
9614
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-text-900", children: mockAnswer.userAnswer })
|
|
9414
9615
|
},
|
|
9415
9616
|
selectId
|
|
9416
9617
|
);
|
|
@@ -9466,25 +9667,25 @@ var QuizFill = ({ paddingBottom }) => {
|
|
|
9466
9667
|
}
|
|
9467
9668
|
return elements;
|
|
9468
9669
|
};
|
|
9469
|
-
return /* @__PURE__ */ (0,
|
|
9470
|
-
/* @__PURE__ */ (0,
|
|
9471
|
-
/* @__PURE__ */ (0,
|
|
9670
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9671
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizSubTitle, { subTitle: "Alternativas" }),
|
|
9672
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizContainer, { className: "h-auto pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "space-y-6 px-4 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9472
9673
|
"div",
|
|
9473
9674
|
{
|
|
9474
9675
|
className: cn(
|
|
9475
9676
|
"text-lg text-text-900 leading-8 h-auto",
|
|
9476
9677
|
variant != "result" && paddingBottom
|
|
9477
9678
|
),
|
|
9478
|
-
children: renderTextWithSelects(exampleText).map((element) => /* @__PURE__ */ (0,
|
|
9679
|
+
children: renderTextWithSelects(exampleText).map((element) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: element.element }, element.id))
|
|
9479
9680
|
}
|
|
9480
9681
|
) }) }),
|
|
9481
|
-
variant === "result" && /* @__PURE__ */ (0,
|
|
9482
|
-
/* @__PURE__ */ (0,
|
|
9483
|
-
/* @__PURE__ */ (0,
|
|
9682
|
+
variant === "result" && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9683
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizSubTitle, { subTitle: "Resultado" }),
|
|
9684
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizContainer, { className: "h-auto pb-0", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "space-y-6 px-4", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9484
9685
|
"div",
|
|
9485
9686
|
{
|
|
9486
9687
|
className: cn("text-lg text-text-900 leading-8", paddingBottom),
|
|
9487
|
-
children: renderTextWithSelects(exampleText, true).map((element) => /* @__PURE__ */ (0,
|
|
9688
|
+
children: renderTextWithSelects(exampleText, true).map((element) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { children: element.element }, element.id))
|
|
9488
9689
|
}
|
|
9489
9690
|
) }) })
|
|
9490
9691
|
] })
|
|
@@ -9502,7 +9703,7 @@ var QuizImageQuestion = ({ paddingBottom }) => {
|
|
|
9502
9703
|
};
|
|
9503
9704
|
const correctRadiusRelative = calculateCorrectRadiusRelative();
|
|
9504
9705
|
const mockUserAnswerRelative = { x: 0.72, y: 0.348 };
|
|
9505
|
-
const [clickPositionRelative, setClickPositionRelative] = (0,
|
|
9706
|
+
const [clickPositionRelative, setClickPositionRelative] = (0, import_react30.useState)(variant == "result" ? mockUserAnswerRelative : null);
|
|
9506
9707
|
const convertToRelativeCoordinates = (x, y, rect) => {
|
|
9507
9708
|
const safeWidth = Math.max(rect.width, 1e-3);
|
|
9508
9709
|
const safeHeight = Math.max(rect.height, 1e-3);
|
|
@@ -9538,36 +9739,36 @@ var QuizImageQuestion = ({ paddingBottom }) => {
|
|
|
9538
9739
|
}
|
|
9539
9740
|
return "bg-success-600/70 border-white";
|
|
9540
9741
|
};
|
|
9541
|
-
return /* @__PURE__ */ (0,
|
|
9542
|
-
/* @__PURE__ */ (0,
|
|
9543
|
-
/* @__PURE__ */ (0,
|
|
9742
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9743
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizSubTitle, { subTitle: "Clique na \xE1rea correta" }),
|
|
9744
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
9544
9745
|
"div",
|
|
9545
9746
|
{
|
|
9546
9747
|
"data-testid": "quiz-image-container",
|
|
9547
9748
|
className: "space-y-6 p-3 relative inline-block",
|
|
9548
9749
|
children: [
|
|
9549
|
-
variant == "result" && /* @__PURE__ */ (0,
|
|
9750
|
+
variant == "result" && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
9550
9751
|
"div",
|
|
9551
9752
|
{
|
|
9552
9753
|
"data-testid": "quiz-legend",
|
|
9553
9754
|
className: "flex items-center gap-4 text-xs",
|
|
9554
9755
|
children: [
|
|
9555
|
-
/* @__PURE__ */ (0,
|
|
9556
|
-
/* @__PURE__ */ (0,
|
|
9557
|
-
/* @__PURE__ */ (0,
|
|
9756
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
9757
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-3 h-3 rounded-full bg-indicator-primary/70 border border-[#F8CC2E]" }),
|
|
9758
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-text-600 font-medium text-sm", children: "\xC1rea correta" })
|
|
9558
9759
|
] }),
|
|
9559
|
-
/* @__PURE__ */ (0,
|
|
9560
|
-
/* @__PURE__ */ (0,
|
|
9561
|
-
/* @__PURE__ */ (0,
|
|
9760
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
9761
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-3 h-3 rounded-full bg-success-600/70 border border-white" }),
|
|
9762
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-text-600 font-medium text-sm", children: "Resposta correta" })
|
|
9562
9763
|
] }),
|
|
9563
|
-
/* @__PURE__ */ (0,
|
|
9564
|
-
/* @__PURE__ */ (0,
|
|
9565
|
-
/* @__PURE__ */ (0,
|
|
9764
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2", children: [
|
|
9765
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-3 h-3 rounded-full bg-indicator-error/70 border border-white" }),
|
|
9766
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-text-600 font-medium text-sm", children: "Resposta incorreta" })
|
|
9566
9767
|
] })
|
|
9567
9768
|
]
|
|
9568
9769
|
}
|
|
9569
9770
|
),
|
|
9570
|
-
/* @__PURE__ */ (0,
|
|
9771
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
9571
9772
|
"button",
|
|
9572
9773
|
{
|
|
9573
9774
|
"data-testid": "quiz-image-button",
|
|
@@ -9582,7 +9783,7 @@ var QuizImageQuestion = ({ paddingBottom }) => {
|
|
|
9582
9783
|
},
|
|
9583
9784
|
"aria-label": "\xC1rea da imagem interativa",
|
|
9584
9785
|
children: [
|
|
9585
|
-
/* @__PURE__ */ (0,
|
|
9786
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9586
9787
|
"img",
|
|
9587
9788
|
{
|
|
9588
9789
|
"data-testid": "quiz-image",
|
|
@@ -9591,7 +9792,7 @@ var QuizImageQuestion = ({ paddingBottom }) => {
|
|
|
9591
9792
|
className: "w-full h-auto rounded-md"
|
|
9592
9793
|
}
|
|
9593
9794
|
),
|
|
9594
|
-
variant === "result" && /* @__PURE__ */ (0,
|
|
9795
|
+
variant === "result" && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9595
9796
|
"div",
|
|
9596
9797
|
{
|
|
9597
9798
|
"data-testid": "quiz-correct-circle",
|
|
@@ -9606,7 +9807,7 @@ var QuizImageQuestion = ({ paddingBottom }) => {
|
|
|
9606
9807
|
}
|
|
9607
9808
|
}
|
|
9608
9809
|
),
|
|
9609
|
-
clickPositionRelative && /* @__PURE__ */ (0,
|
|
9810
|
+
clickPositionRelative && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9610
9811
|
"div",
|
|
9611
9812
|
{
|
|
9612
9813
|
"data-testid": "quiz-user-circle",
|
|
@@ -9674,18 +9875,18 @@ var QuizQuestionList = ({
|
|
|
9674
9875
|
return "Em branco";
|
|
9675
9876
|
}
|
|
9676
9877
|
};
|
|
9677
|
-
return /* @__PURE__ */ (0,
|
|
9678
|
-
Object.entries(filteredGroupedQuestions).length == 0 && /* @__PURE__ */ (0,
|
|
9878
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "space-y-6 px-4 h-full", children: [
|
|
9879
|
+
Object.entries(filteredGroupedQuestions).length == 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex items-center justify-center text-gray-500 py-8 h-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-lg", children: "Nenhum resultado" }) }),
|
|
9679
9880
|
Object.entries(filteredGroupedQuestions).map(
|
|
9680
|
-
([subjectId, questions]) => /* @__PURE__ */ (0,
|
|
9681
|
-
/* @__PURE__ */ (0,
|
|
9682
|
-
/* @__PURE__ */ (0,
|
|
9683
|
-
/* @__PURE__ */ (0,
|
|
9881
|
+
([subjectId, questions]) => /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("section", { className: "flex flex-col gap-2", children: [
|
|
9882
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "pt-6 pb-4 flex flex-row gap-2", children: [
|
|
9883
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "bg-primary-500 p-1 rounded-sm flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_phosphor_react20.BookOpen, { size: 17, className: "text-white" }) }),
|
|
9884
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-800 font-bold text-lg", children: questions?.[0]?.knowledgeMatrix?.[0]?.subject?.name ?? "Sem mat\xE9ria" })
|
|
9684
9885
|
] }),
|
|
9685
|
-
/* @__PURE__ */ (0,
|
|
9886
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "flex flex-col gap-2", children: questions.map((question) => {
|
|
9686
9887
|
const status = getQuestionStatus(question.id);
|
|
9687
9888
|
const questionNumber = getQuestionIndex(question.id);
|
|
9688
|
-
return /* @__PURE__ */ (0,
|
|
9889
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9689
9890
|
CardStatus,
|
|
9690
9891
|
{
|
|
9691
9892
|
header: `Quest\xE3o ${questionNumber.toString().padStart(2, "0")}`,
|
|
@@ -9702,7 +9903,7 @@ var QuizQuestionList = ({
|
|
|
9702
9903
|
)
|
|
9703
9904
|
] });
|
|
9704
9905
|
};
|
|
9705
|
-
var QuizFooter = (0,
|
|
9906
|
+
var QuizFooter = (0, import_react30.forwardRef)(
|
|
9706
9907
|
({
|
|
9707
9908
|
className,
|
|
9708
9909
|
onGoToSimulated,
|
|
@@ -9730,11 +9931,11 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9730
9931
|
const currentAnswer = getCurrentAnswer();
|
|
9731
9932
|
const currentQuestion = getCurrentQuestion();
|
|
9732
9933
|
const isCurrentQuestionSkipped = currentQuestion ? getQuestionStatusFromUserAnswers(currentQuestion.id) === "skipped" : false;
|
|
9733
|
-
const [alertDialogOpen, setAlertDialogOpen] = (0,
|
|
9734
|
-
const [modalResultOpen, setModalResultOpen] = (0,
|
|
9735
|
-
const [modalNavigateOpen, setModalNavigateOpen] = (0,
|
|
9736
|
-
const [modalResolutionOpen, setModalResolutionOpen] = (0,
|
|
9737
|
-
const [filterType, setFilterType] = (0,
|
|
9934
|
+
const [alertDialogOpen, setAlertDialogOpen] = (0, import_react30.useState)(false);
|
|
9935
|
+
const [modalResultOpen, setModalResultOpen] = (0, import_react30.useState)(false);
|
|
9936
|
+
const [modalNavigateOpen, setModalNavigateOpen] = (0, import_react30.useState)(false);
|
|
9937
|
+
const [modalResolutionOpen, setModalResolutionOpen] = (0, import_react30.useState)(false);
|
|
9938
|
+
const [filterType, setFilterType] = (0, import_react30.useState)("all");
|
|
9738
9939
|
const unansweredQuestions = getUnansweredQuestionsFromUserAnswers();
|
|
9739
9940
|
const allQuestions = getTotalQuestions();
|
|
9740
9941
|
const handleFinishQuiz = async () => {
|
|
@@ -9765,8 +9966,8 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9765
9966
|
return;
|
|
9766
9967
|
}
|
|
9767
9968
|
};
|
|
9768
|
-
return /* @__PURE__ */ (0,
|
|
9769
|
-
/* @__PURE__ */ (0,
|
|
9969
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9970
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9770
9971
|
"footer",
|
|
9771
9972
|
{
|
|
9772
9973
|
ref,
|
|
@@ -9775,17 +9976,17 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9775
9976
|
className
|
|
9776
9977
|
),
|
|
9777
9978
|
...props,
|
|
9778
|
-
children: variant === "default" ? /* @__PURE__ */ (0,
|
|
9779
|
-
/* @__PURE__ */ (0,
|
|
9780
|
-
/* @__PURE__ */ (0,
|
|
9979
|
+
children: variant === "default" ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
|
|
9980
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-row items-center gap-1", children: [
|
|
9981
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9781
9982
|
IconButton_default,
|
|
9782
9983
|
{
|
|
9783
|
-
icon: /* @__PURE__ */ (0,
|
|
9984
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_phosphor_react20.SquaresFour, { size: 24, className: "text-text-950" }),
|
|
9784
9985
|
size: "md",
|
|
9785
9986
|
onClick: () => setModalNavigateOpen(true)
|
|
9786
9987
|
}
|
|
9787
9988
|
),
|
|
9788
|
-
isFirstQuestion ? /* @__PURE__ */ (0,
|
|
9989
|
+
isFirstQuestion ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9789
9990
|
Button_default,
|
|
9790
9991
|
{
|
|
9791
9992
|
variant: "outline",
|
|
@@ -9796,13 +9997,13 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9796
9997
|
},
|
|
9797
9998
|
children: "Pular"
|
|
9798
9999
|
}
|
|
9799
|
-
) : /* @__PURE__ */ (0,
|
|
10000
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9800
10001
|
Button_default,
|
|
9801
10002
|
{
|
|
9802
10003
|
size: "medium",
|
|
9803
10004
|
variant: "link",
|
|
9804
10005
|
action: "primary",
|
|
9805
|
-
iconLeft: /* @__PURE__ */ (0,
|
|
10006
|
+
iconLeft: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_phosphor_react20.CaretLeft, { size: 18 }),
|
|
9806
10007
|
onClick: () => {
|
|
9807
10008
|
goToPreviousQuestion();
|
|
9808
10009
|
},
|
|
@@ -9810,7 +10011,7 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9810
10011
|
}
|
|
9811
10012
|
)
|
|
9812
10013
|
] }),
|
|
9813
|
-
!isFirstQuestion && !isLastQuestion && /* @__PURE__ */ (0,
|
|
10014
|
+
!isFirstQuestion && !isLastQuestion && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9814
10015
|
Button_default,
|
|
9815
10016
|
{
|
|
9816
10017
|
size: "small",
|
|
@@ -9823,7 +10024,7 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9823
10024
|
children: "Pular"
|
|
9824
10025
|
}
|
|
9825
10026
|
),
|
|
9826
|
-
isLastQuestion ? /* @__PURE__ */ (0,
|
|
10027
|
+
isLastQuestion ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9827
10028
|
Button_default,
|
|
9828
10029
|
{
|
|
9829
10030
|
size: "medium",
|
|
@@ -9833,13 +10034,13 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9833
10034
|
onClick: handleFinishQuiz,
|
|
9834
10035
|
children: "Finalizar"
|
|
9835
10036
|
}
|
|
9836
|
-
) : /* @__PURE__ */ (0,
|
|
10037
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9837
10038
|
Button_default,
|
|
9838
10039
|
{
|
|
9839
10040
|
size: "medium",
|
|
9840
10041
|
variant: "link",
|
|
9841
10042
|
action: "primary",
|
|
9842
|
-
iconRight: /* @__PURE__ */ (0,
|
|
10043
|
+
iconRight: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_phosphor_react20.CaretRight, { size: 18 }),
|
|
9843
10044
|
disabled: !currentAnswer && !isCurrentQuestionSkipped,
|
|
9844
10045
|
onClick: () => {
|
|
9845
10046
|
goToNextQuestion();
|
|
@@ -9847,7 +10048,7 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9847
10048
|
children: "Avan\xE7ar"
|
|
9848
10049
|
}
|
|
9849
10050
|
)
|
|
9850
|
-
] }) : /* @__PURE__ */ (0,
|
|
10051
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-row items-center justify-end w-full", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9851
10052
|
Button_default,
|
|
9852
10053
|
{
|
|
9853
10054
|
variant: "solid",
|
|
@@ -9859,7 +10060,7 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9859
10060
|
) })
|
|
9860
10061
|
}
|
|
9861
10062
|
),
|
|
9862
|
-
/* @__PURE__ */ (0,
|
|
10063
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9863
10064
|
AlertDialog,
|
|
9864
10065
|
{
|
|
9865
10066
|
isOpen: alertDialogOpen,
|
|
@@ -9871,7 +10072,7 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9871
10072
|
onSubmit: handleAlertSubmit
|
|
9872
10073
|
}
|
|
9873
10074
|
),
|
|
9874
|
-
/* @__PURE__ */ (0,
|
|
10075
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9875
10076
|
Modal_default,
|
|
9876
10077
|
{
|
|
9877
10078
|
isOpen: modalResultOpen,
|
|
@@ -9881,11 +10082,11 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9881
10082
|
closeOnEscape: false,
|
|
9882
10083
|
hideCloseButton: true,
|
|
9883
10084
|
size: "md",
|
|
9884
|
-
children: /* @__PURE__ */ (0,
|
|
9885
|
-
resultImageComponent ? /* @__PURE__ */ (0,
|
|
9886
|
-
/* @__PURE__ */ (0,
|
|
9887
|
-
/* @__PURE__ */ (0,
|
|
9888
|
-
/* @__PURE__ */ (0,
|
|
10085
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col w-full h-full items-center justify-center gap-4", children: [
|
|
10086
|
+
resultImageComponent ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-[282px] h-auto", children: resultImageComponent }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "w-[282px] h-[200px] bg-gray-100 rounded-md flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-gray-500 text-sm", children: "Imagem de resultado" }) }),
|
|
10087
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-2 text-center", children: [
|
|
10088
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h2", { className: "text-text-950 font-bold text-lg", children: "Voc\xEA concluiu o simulado!" }),
|
|
10089
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("p", { className: "text-text-500 font-sm", children: [
|
|
9889
10090
|
"Voc\xEA acertou",
|
|
9890
10091
|
" ",
|
|
9891
10092
|
getQuestionResultStatistics()?.correctAnswers ?? "--",
|
|
@@ -9895,8 +10096,8 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9895
10096
|
" quest\xF5es."
|
|
9896
10097
|
] })
|
|
9897
10098
|
] }),
|
|
9898
|
-
/* @__PURE__ */ (0,
|
|
9899
|
-
/* @__PURE__ */ (0,
|
|
10099
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "px-6 flex flex-row items-center gap-2 w-full", children: [
|
|
10100
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9900
10101
|
Button_default,
|
|
9901
10102
|
{
|
|
9902
10103
|
variant: "outline",
|
|
@@ -9906,38 +10107,38 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9906
10107
|
children: "Ir para simulados"
|
|
9907
10108
|
}
|
|
9908
10109
|
),
|
|
9909
|
-
/* @__PURE__ */ (0,
|
|
10110
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Button_default, { className: "w-full", onClick: onDetailResult, children: "Detalhar resultado" })
|
|
9910
10111
|
] })
|
|
9911
10112
|
] })
|
|
9912
10113
|
}
|
|
9913
10114
|
),
|
|
9914
|
-
/* @__PURE__ */ (0,
|
|
10115
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9915
10116
|
Modal_default,
|
|
9916
10117
|
{
|
|
9917
10118
|
isOpen: modalNavigateOpen,
|
|
9918
10119
|
onClose: () => setModalNavigateOpen(false),
|
|
9919
10120
|
title: "Quest\xF5es",
|
|
9920
10121
|
size: "lg",
|
|
9921
|
-
children: /* @__PURE__ */ (0,
|
|
9922
|
-
/* @__PURE__ */ (0,
|
|
9923
|
-
/* @__PURE__ */ (0,
|
|
9924
|
-
/* @__PURE__ */ (0,
|
|
9925
|
-
/* @__PURE__ */ (0,
|
|
10122
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col w-full not-lg:h-[calc(100vh-200px)] lg:max-h-[687px] lg:h-[687px]", children: [
|
|
10123
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-row justify-between items-center py-6 pt-6 pb-4 border-b border-border-200 flex-shrink-0", children: [
|
|
10124
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-950 font-bold text-lg", children: "Filtrar por" }),
|
|
10125
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "max-w-[266px]", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Select_default, { value: filterType, onValueChange: setFilterType, children: [
|
|
10126
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9926
10127
|
SelectTrigger,
|
|
9927
10128
|
{
|
|
9928
10129
|
variant: "rounded",
|
|
9929
10130
|
className: "max-w-[266px] min-w-[160px]",
|
|
9930
|
-
children: /* @__PURE__ */ (0,
|
|
10131
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectValue, { placeholder: "Selecione uma op\xE7\xE3o" })
|
|
9931
10132
|
}
|
|
9932
10133
|
),
|
|
9933
|
-
/* @__PURE__ */ (0,
|
|
9934
|
-
/* @__PURE__ */ (0,
|
|
9935
|
-
/* @__PURE__ */ (0,
|
|
9936
|
-
/* @__PURE__ */ (0,
|
|
10134
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(SelectContent, { children: [
|
|
10135
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectItem, { value: "all", children: "Todas" }),
|
|
10136
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectItem, { value: "unanswered", children: "Em branco" }),
|
|
10137
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(SelectItem, { value: "answered", children: "Respondidas" })
|
|
9937
10138
|
] })
|
|
9938
10139
|
] }) })
|
|
9939
10140
|
] }),
|
|
9940
|
-
/* @__PURE__ */ (0,
|
|
10141
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-col gap-2 flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9941
10142
|
QuizQuestionList,
|
|
9942
10143
|
{
|
|
9943
10144
|
filterType,
|
|
@@ -9947,7 +10148,7 @@ var QuizFooter = (0, import_react28.forwardRef)(
|
|
|
9947
10148
|
] })
|
|
9948
10149
|
}
|
|
9949
10150
|
),
|
|
9950
|
-
/* @__PURE__ */ (0,
|
|
10151
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
9951
10152
|
Modal_default,
|
|
9952
10153
|
{
|
|
9953
10154
|
isOpen: modalResolutionOpen,
|
|
@@ -9965,40 +10166,40 @@ var QuizBadge = ({
|
|
|
9965
10166
|
}) => {
|
|
9966
10167
|
switch (subtype) {
|
|
9967
10168
|
case "PROVA" /* PROVA */:
|
|
9968
|
-
return /* @__PURE__ */ (0,
|
|
10169
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge_default, { variant: "examsOutlined", action: "exam2", "data-testid": "quiz-badge", children: "Prova" });
|
|
9969
10170
|
case "ENEM_PROVA_1" /* ENEM_PROVA_1 */:
|
|
9970
10171
|
case "ENEM_PROVA_2" /* ENEM_PROVA_2 */:
|
|
9971
|
-
return /* @__PURE__ */ (0,
|
|
10172
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge_default, { variant: "examsOutlined", action: "exam1", "data-testid": "quiz-badge", children: "Enem" });
|
|
9972
10173
|
case "VESTIBULAR" /* VESTIBULAR */:
|
|
9973
|
-
return /* @__PURE__ */ (0,
|
|
10174
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge_default, { variant: "examsOutlined", action: "exam4", "data-testid": "quiz-badge", children: "Vestibular" });
|
|
9974
10175
|
case "SIMULADO" /* SIMULADO */:
|
|
9975
10176
|
case "SIMULADAO" /* SIMULADAO */:
|
|
9976
10177
|
case void 0:
|
|
9977
|
-
return /* @__PURE__ */ (0,
|
|
10178
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge_default, { variant: "examsOutlined", action: "exam3", "data-testid": "quiz-badge", children: "Simulad\xE3o" });
|
|
9978
10179
|
default:
|
|
9979
|
-
return /* @__PURE__ */ (0,
|
|
10180
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Badge_default, { variant: "solid", action: "info", "data-testid": "quiz-badge", children: subtype });
|
|
9980
10181
|
}
|
|
9981
10182
|
};
|
|
9982
|
-
var QuizResultHeaderTitle = (0,
|
|
10183
|
+
var QuizResultHeaderTitle = (0, import_react30.forwardRef)(({ className, ...props }, ref) => {
|
|
9983
10184
|
const { getActiveQuiz } = useQuizStore();
|
|
9984
10185
|
const activeQuiz = getActiveQuiz();
|
|
9985
|
-
return /* @__PURE__ */ (0,
|
|
10186
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
9986
10187
|
"div",
|
|
9987
10188
|
{
|
|
9988
10189
|
ref,
|
|
9989
10190
|
className: cn("flex flex-row pt-4 justify-between", className),
|
|
9990
10191
|
...props,
|
|
9991
10192
|
children: [
|
|
9992
|
-
/* @__PURE__ */ (0,
|
|
9993
|
-
/* @__PURE__ */ (0,
|
|
10193
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-950 font-bold text-2xl", children: "Resultado" }),
|
|
10194
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(QuizBadge, { subtype: activeQuiz?.quiz.subtype || void 0 })
|
|
9994
10195
|
]
|
|
9995
10196
|
}
|
|
9996
10197
|
);
|
|
9997
10198
|
});
|
|
9998
|
-
var QuizResultTitle = (0,
|
|
10199
|
+
var QuizResultTitle = (0, import_react30.forwardRef)(({ className, ...props }, ref) => {
|
|
9999
10200
|
const { getQuizTitle } = useQuizStore();
|
|
10000
10201
|
const quizTitle = getQuizTitle();
|
|
10001
|
-
return /* @__PURE__ */ (0,
|
|
10202
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
10002
10203
|
"p",
|
|
10003
10204
|
{
|
|
10004
10205
|
className: cn("pt-6 pb-4 text-text-950 font-bold text-lg", className),
|
|
@@ -10008,7 +10209,7 @@ var QuizResultTitle = (0, import_react28.forwardRef)(({ className, ...props }, r
|
|
|
10008
10209
|
}
|
|
10009
10210
|
);
|
|
10010
10211
|
});
|
|
10011
|
-
var QuizResultPerformance = (0,
|
|
10212
|
+
var QuizResultPerformance = (0, import_react30.forwardRef)(
|
|
10012
10213
|
({ ...props }, ref) => {
|
|
10013
10214
|
const {
|
|
10014
10215
|
getTotalQuestions,
|
|
@@ -10050,15 +10251,15 @@ var QuizResultPerformance = (0, import_react28.forwardRef)(
|
|
|
10050
10251
|
});
|
|
10051
10252
|
}
|
|
10052
10253
|
const percentage = totalQuestions > 0 ? Math.round(correctAnswers / totalQuestions * 100) : 0;
|
|
10053
|
-
return /* @__PURE__ */ (0,
|
|
10254
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
|
|
10054
10255
|
"div",
|
|
10055
10256
|
{
|
|
10056
10257
|
className: "flex flex-row gap-6 p-6 rounded-xl bg-background justify-between",
|
|
10057
10258
|
ref,
|
|
10058
10259
|
...props,
|
|
10059
10260
|
children: [
|
|
10060
|
-
/* @__PURE__ */ (0,
|
|
10061
|
-
/* @__PURE__ */ (0,
|
|
10261
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "relative", children: [
|
|
10262
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
10062
10263
|
ProgressCircle_default,
|
|
10063
10264
|
{
|
|
10064
10265
|
size: "medium",
|
|
@@ -10068,24 +10269,24 @@ var QuizResultPerformance = (0, import_react28.forwardRef)(
|
|
|
10068
10269
|
label: ""
|
|
10069
10270
|
}
|
|
10070
10271
|
),
|
|
10071
|
-
/* @__PURE__ */ (0,
|
|
10072
|
-
/* @__PURE__ */ (0,
|
|
10073
|
-
/* @__PURE__ */ (0,
|
|
10074
|
-
/* @__PURE__ */ (0,
|
|
10272
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
|
|
10273
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1 mb-1", children: [
|
|
10274
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_phosphor_react20.Clock, { size: 12, weight: "regular", className: "text-text-800" }),
|
|
10275
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-2xs font-medium text-text-800", children: formatTime2(
|
|
10075
10276
|
(getQuestionResultStatistics()?.timeSpent ?? 0) * 60
|
|
10076
10277
|
) })
|
|
10077
10278
|
] }),
|
|
10078
|
-
/* @__PURE__ */ (0,
|
|
10279
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "text-2xl font-medium text-text-800 leading-7", children: [
|
|
10079
10280
|
getQuestionResultStatistics()?.correctAnswers ?? "--",
|
|
10080
10281
|
" de",
|
|
10081
10282
|
" ",
|
|
10082
10283
|
totalQuestions
|
|
10083
10284
|
] }),
|
|
10084
|
-
/* @__PURE__ */ (0,
|
|
10285
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-2xs font-medium text-text-600 mt-1", children: "Corretas" })
|
|
10085
10286
|
] })
|
|
10086
10287
|
] }),
|
|
10087
|
-
/* @__PURE__ */ (0,
|
|
10088
|
-
/* @__PURE__ */ (0,
|
|
10288
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col gap-4 w-full", children: [
|
|
10289
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
10089
10290
|
ProgressBar_default,
|
|
10090
10291
|
{
|
|
10091
10292
|
className: "w-full",
|
|
@@ -10099,7 +10300,7 @@ var QuizResultPerformance = (0, import_react28.forwardRef)(
|
|
|
10099
10300
|
percentageClassName: "text-xs font-medium leading-[14px] text-right"
|
|
10100
10301
|
}
|
|
10101
10302
|
),
|
|
10102
|
-
/* @__PURE__ */ (0,
|
|
10303
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
10103
10304
|
ProgressBar_default,
|
|
10104
10305
|
{
|
|
10105
10306
|
className: "w-full",
|
|
@@ -10113,7 +10314,7 @@ var QuizResultPerformance = (0, import_react28.forwardRef)(
|
|
|
10113
10314
|
percentageClassName: "text-xs font-medium leading-[14px] text-right"
|
|
10114
10315
|
}
|
|
10115
10316
|
),
|
|
10116
|
-
/* @__PURE__ */ (0,
|
|
10317
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
10117
10318
|
ProgressBar_default,
|
|
10118
10319
|
{
|
|
10119
10320
|
className: "w-full",
|
|
@@ -10133,7 +10334,7 @@ var QuizResultPerformance = (0, import_react28.forwardRef)(
|
|
|
10133
10334
|
);
|
|
10134
10335
|
}
|
|
10135
10336
|
);
|
|
10136
|
-
var QuizListResult = (0,
|
|
10337
|
+
var QuizListResult = (0, import_react30.forwardRef)(({ className, onSubjectClick, ...props }, ref) => {
|
|
10137
10338
|
const { getQuestionsGroupedBySubject } = useQuizStore();
|
|
10138
10339
|
const groupedQuestions = getQuestionsGroupedBySubject();
|
|
10139
10340
|
const subjectsStats = Object.entries(groupedQuestions).map(
|
|
@@ -10160,9 +10361,9 @@ var QuizListResult = (0, import_react28.forwardRef)(({ className, onSubjectClick
|
|
|
10160
10361
|
};
|
|
10161
10362
|
}
|
|
10162
10363
|
);
|
|
10163
|
-
return /* @__PURE__ */ (0,
|
|
10164
|
-
/* @__PURE__ */ (0,
|
|
10165
|
-
/* @__PURE__ */ (0,
|
|
10364
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("section", { ref, className, ...props, children: [
|
|
10365
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "pt-6 pb-4 text-text-950 font-bold text-lg", children: "Mat\xE9rias" }),
|
|
10366
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "flex flex-col gap-2", children: subjectsStats.map((subject) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
10166
10367
|
CardResults,
|
|
10167
10368
|
{
|
|
10168
10369
|
onClick: () => onSubjectClick?.(subject.subject.id),
|
|
@@ -10184,16 +10385,16 @@ var QuizListResultByMateria = ({
|
|
|
10184
10385
|
const { getQuestionsGroupedBySubject, getQuestionIndex } = useQuizStore();
|
|
10185
10386
|
const groupedQuestions = getQuestionsGroupedBySubject();
|
|
10186
10387
|
const answeredQuestions = groupedQuestions[subject] || [];
|
|
10187
|
-
return /* @__PURE__ */ (0,
|
|
10188
|
-
/* @__PURE__ */ (0,
|
|
10189
|
-
/* @__PURE__ */ (0,
|
|
10190
|
-
/* @__PURE__ */ (0,
|
|
10191
|
-
/* @__PURE__ */ (0,
|
|
10388
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex flex-col", children: [
|
|
10389
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-row pt-4 justify-between", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "text-text-950 font-bold text-2xl", children: answeredQuestions?.[0]?.knowledgeMatrix?.[0]?.subject?.name ?? "Sem mat\xE9ria" }) }),
|
|
10390
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("section", { className: "flex flex-col ", children: [
|
|
10391
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "pt-6 pb-4 text-text-950 font-bold text-lg", children: "Resultado das quest\xF5es" }),
|
|
10392
|
+
/* @__PURE__ */ (0, import_jsx_runtime40.jsx)("ul", { className: "flex flex-col gap-2 pt-4", children: answeredQuestions.map((question) => {
|
|
10192
10393
|
const questionIndex = getQuestionIndex(
|
|
10193
10394
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
10194
10395
|
question.questionId ?? question.id
|
|
10195
10396
|
);
|
|
10196
|
-
return /* @__PURE__ */ (0,
|
|
10397
|
+
return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
|
|
10197
10398
|
CardStatus,
|
|
10198
10399
|
{
|
|
10199
10400
|
className: "max-w-full",
|
|
@@ -10216,12 +10417,12 @@ var QuizListResultByMateria = ({
|
|
|
10216
10417
|
};
|
|
10217
10418
|
|
|
10218
10419
|
// src/components/LoadingModal/loadingModal.tsx
|
|
10219
|
-
var
|
|
10220
|
-
var
|
|
10221
|
-
var LoadingModal = (0,
|
|
10420
|
+
var import_react31 = require("react");
|
|
10421
|
+
var import_jsx_runtime41 = require("react/jsx-runtime");
|
|
10422
|
+
var LoadingModal = (0, import_react31.forwardRef)(
|
|
10222
10423
|
({ open, title = "Titulo...", subtitle = "Subtitulo...", ...props }, ref) => {
|
|
10223
10424
|
if (!open) return null;
|
|
10224
|
-
return /* @__PURE__ */ (0,
|
|
10425
|
+
return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10225
10426
|
"div",
|
|
10226
10427
|
{
|
|
10227
10428
|
ref,
|
|
@@ -10230,8 +10431,8 @@ var LoadingModal = (0, import_react29.forwardRef)(
|
|
|
10230
10431
|
"aria-describedby": "loading-modal-subtitle",
|
|
10231
10432
|
className: "fixed inset-0 z-50 flex items-center justify-center bg-background/90 backdrop-blur-xs",
|
|
10232
10433
|
...props,
|
|
10233
|
-
children: /* @__PURE__ */ (0,
|
|
10234
|
-
/* @__PURE__ */ (0,
|
|
10434
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "w-full max-w-[364px] flex flex-col items-center justify-center gap-14", children: [
|
|
10435
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "animate-spin", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
10235
10436
|
"svg",
|
|
10236
10437
|
{
|
|
10237
10438
|
width: "102",
|
|
@@ -10242,14 +10443,14 @@ var LoadingModal = (0, import_react29.forwardRef)(
|
|
|
10242
10443
|
"aria-hidden": "true",
|
|
10243
10444
|
focusable: false,
|
|
10244
10445
|
children: [
|
|
10245
|
-
/* @__PURE__ */ (0,
|
|
10446
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10246
10447
|
"path",
|
|
10247
10448
|
{
|
|
10248
10449
|
d: "M101.5 51C101.5 78.8904 78.8904 101.5 51 101.5C23.1096 101.5 0.5 78.8904 0.5 51C0.5 23.1096 23.1096 0.5 51 0.5C78.8904 0.5 101.5 23.1096 101.5 51ZM8.62286 51C8.62286 74.4043 27.5957 93.3771 51 93.3771C74.4043 93.3771 93.3771 74.4043 93.3771 51C93.3771 27.5957 74.4043 8.62286 51 8.62286C27.5957 8.62286 8.62286 27.5957 8.62286 51Z",
|
|
10249
10450
|
className: "fill-primary-100"
|
|
10250
10451
|
}
|
|
10251
10452
|
),
|
|
10252
|
-
/* @__PURE__ */ (0,
|
|
10453
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
10253
10454
|
"path",
|
|
10254
10455
|
{
|
|
10255
10456
|
d: "M97.4386 51C99.6816 51 101.517 52.8213 101.337 55.0571C100.754 62.2833 98.6212 69.3162 95.0643 75.6696C90.8444 83.207 84.7616 89.536 77.3975 94.0514C70.0333 98.5668 61.6339 101.118 53.0024 101.46C44.371 101.803 35.7959 99.9255 28.0971 96.0078C20.3982 92.0902 13.833 86.2631 9.02917 79.0838C4.22529 71.9045 1.34332 63.6129 0.658804 55.0017C-0.0257159 46.3906 1.51009 37.7479 5.1194 29.8997C8.16173 23.2845 12.5915 17.4202 18.0904 12.6959C19.7917 11.2341 22.3444 11.6457 23.6647 13.459C24.9851 15.2723 24.5702 17.7988 22.8916 19.2866C18.5048 23.1747 14.9608 27.9413 12.4992 33.2937C9.47048 39.8794 8.1817 47.132 8.75612 54.3581C9.33053 61.5841 11.7489 68.542 15.7801 74.5666C19.8113 80.5911 25.3205 85.4809 31.781 88.7684C38.2414 92.0559 45.4372 93.6312 52.6804 93.3438C59.9235 93.0564 66.9718 90.9158 73.1515 87.1267C79.3311 83.3375 84.4355 78.0266 87.9766 71.7015C90.8546 66.561 92.6217 60.8903 93.1827 55.0553C93.3973 52.8225 95.1955 51 97.4386 51Z",
|
|
@@ -10259,9 +10460,9 @@ var LoadingModal = (0, import_react29.forwardRef)(
|
|
|
10259
10460
|
]
|
|
10260
10461
|
}
|
|
10261
10462
|
) }),
|
|
10262
|
-
/* @__PURE__ */ (0,
|
|
10263
|
-
/* @__PURE__ */ (0,
|
|
10264
|
-
/* @__PURE__ */ (0,
|
|
10463
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "flex flex-col gap-4 text-center", children: [
|
|
10464
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { id: "loading-modal-title", className: "text-text-950 text-lg", children: title }),
|
|
10465
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("p", { id: "loading-modal-subtitle", className: "text-text-600 text-lg", children: subtitle })
|
|
10265
10466
|
] })
|
|
10266
10467
|
] })
|
|
10267
10468
|
}
|
|
@@ -10272,7 +10473,7 @@ var loadingModal_default = LoadingModal;
|
|
|
10272
10473
|
|
|
10273
10474
|
// src/components/NotificationCard/NotificationCard.tsx
|
|
10274
10475
|
var import_phosphor_react21 = require("phosphor-react");
|
|
10275
|
-
var
|
|
10476
|
+
var import_react32 = require("react");
|
|
10276
10477
|
|
|
10277
10478
|
// src/store/notificationStore.ts
|
|
10278
10479
|
var import_zustand8 = require("zustand");
|
|
@@ -10515,14 +10716,14 @@ var createNotificationStore = (apiClient) => {
|
|
|
10515
10716
|
};
|
|
10516
10717
|
|
|
10517
10718
|
// src/components/NotificationCard/NotificationCard.tsx
|
|
10518
|
-
var
|
|
10719
|
+
var import_jsx_runtime42 = require("react/jsx-runtime");
|
|
10519
10720
|
var NotificationEmpty = ({
|
|
10520
10721
|
emptyStateImage,
|
|
10521
10722
|
emptyStateTitle = "Nenhuma notifica\xE7\xE3o no momento",
|
|
10522
10723
|
emptyStateDescription = "Voc\xEA est\xE1 em dia com todas as novidades. Volte depois para conferir atualiza\xE7\xF5es!"
|
|
10523
10724
|
}) => {
|
|
10524
|
-
return /* @__PURE__ */ (0,
|
|
10525
|
-
emptyStateImage && /* @__PURE__ */ (0,
|
|
10725
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: [
|
|
10726
|
+
emptyStateImage && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-20 h-20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10526
10727
|
"img",
|
|
10527
10728
|
{
|
|
10528
10729
|
src: emptyStateImage,
|
|
@@ -10532,17 +10733,17 @@ var NotificationEmpty = ({
|
|
|
10532
10733
|
className: "object-contain"
|
|
10533
10734
|
}
|
|
10534
10735
|
) }),
|
|
10535
|
-
/* @__PURE__ */ (0,
|
|
10536
|
-
/* @__PURE__ */ (0,
|
|
10736
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { className: "text-xl font-semibold text-text-950 text-center leading-[23px]", children: emptyStateTitle }),
|
|
10737
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm font-normal text-text-400 text-center max-w-[316px] leading-[21px]", children: emptyStateDescription })
|
|
10537
10738
|
] });
|
|
10538
10739
|
};
|
|
10539
10740
|
var NotificationHeader = ({
|
|
10540
10741
|
unreadCount,
|
|
10541
10742
|
variant = "modal"
|
|
10542
10743
|
}) => {
|
|
10543
|
-
return /* @__PURE__ */ (0,
|
|
10544
|
-
variant === "modal" ? /* @__PURE__ */ (0,
|
|
10545
|
-
unreadCount > 0 && /* @__PURE__ */ (0,
|
|
10744
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
10745
|
+
variant === "modal" ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Text_default, { size: "sm", weight: "bold", className: "text-text-950", children: "Notifica\xE7\xF5es" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { className: "text-sm font-semibold text-text-950", children: "Notifica\xE7\xF5es" }),
|
|
10746
|
+
unreadCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "px-2 py-1 bg-info-100 text-info-700 text-xs rounded-full", children: [
|
|
10546
10747
|
unreadCount,
|
|
10547
10748
|
" n\xE3o lidas"
|
|
10548
10749
|
] })
|
|
@@ -10577,7 +10778,7 @@ var SingleNotificationCard = ({
|
|
|
10577
10778
|
onNavigate();
|
|
10578
10779
|
}
|
|
10579
10780
|
};
|
|
10580
|
-
return /* @__PURE__ */ (0,
|
|
10781
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
|
|
10581
10782
|
"div",
|
|
10582
10783
|
{
|
|
10583
10784
|
className: cn(
|
|
@@ -10586,20 +10787,20 @@ var SingleNotificationCard = ({
|
|
|
10586
10787
|
className
|
|
10587
10788
|
),
|
|
10588
10789
|
children: [
|
|
10589
|
-
/* @__PURE__ */ (0,
|
|
10590
|
-
!isRead && /* @__PURE__ */ (0,
|
|
10591
|
-
/* @__PURE__ */ (0,
|
|
10592
|
-
/* @__PURE__ */ (0,
|
|
10593
|
-
/* @__PURE__ */ (0,
|
|
10790
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2 w-full", children: [
|
|
10791
|
+
!isRead && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-[7px] h-[7px] bg-info-300 rounded-full flex-shrink-0" }),
|
|
10792
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h3", { className: "font-bold text-sm leading-4 text-text-950 flex-grow", children: title }),
|
|
10793
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(DropdownMenu_default, { children: [
|
|
10794
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10594
10795
|
DropdownMenuTrigger,
|
|
10595
10796
|
{
|
|
10596
10797
|
className: "flex-shrink-0 inline-flex items-center justify-center font-medium bg-transparent text-text-950 cursor-pointer hover:bg-info-50 w-6 h-6 rounded-lg",
|
|
10597
10798
|
"aria-label": "Menu de a\xE7\xF5es",
|
|
10598
|
-
children: /* @__PURE__ */ (0,
|
|
10799
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_phosphor_react21.DotsThreeVertical, { size: 24 })
|
|
10599
10800
|
}
|
|
10600
10801
|
),
|
|
10601
|
-
/* @__PURE__ */ (0,
|
|
10602
|
-
!isRead && /* @__PURE__ */ (0,
|
|
10802
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
|
|
10803
|
+
!isRead && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10603
10804
|
DropdownMenuItem,
|
|
10604
10805
|
{
|
|
10605
10806
|
onClick: handleMarkAsRead,
|
|
@@ -10607,14 +10808,14 @@ var SingleNotificationCard = ({
|
|
|
10607
10808
|
children: "Marcar como lida"
|
|
10608
10809
|
}
|
|
10609
10810
|
),
|
|
10610
|
-
/* @__PURE__ */ (0,
|
|
10811
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuItem, { onClick: handleDelete, className: "text-error-600", children: "Deletar" })
|
|
10611
10812
|
] })
|
|
10612
10813
|
] })
|
|
10613
10814
|
] }),
|
|
10614
|
-
/* @__PURE__ */ (0,
|
|
10615
|
-
/* @__PURE__ */ (0,
|
|
10616
|
-
/* @__PURE__ */ (0,
|
|
10617
|
-
onNavigate && actionLabel && /* @__PURE__ */ (0,
|
|
10815
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm leading-[21px] text-text-800 w-full", children: message }),
|
|
10816
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between w-full", children: [
|
|
10817
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-sm font-medium text-text-400", children: time }),
|
|
10818
|
+
onNavigate && actionLabel && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10618
10819
|
"button",
|
|
10619
10820
|
{
|
|
10620
10821
|
type: "button",
|
|
@@ -10641,9 +10842,9 @@ var NotificationList = ({
|
|
|
10641
10842
|
className
|
|
10642
10843
|
}) => {
|
|
10643
10844
|
if (error) {
|
|
10644
|
-
return /* @__PURE__ */ (0,
|
|
10645
|
-
/* @__PURE__ */ (0,
|
|
10646
|
-
onRetry && /* @__PURE__ */ (0,
|
|
10845
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
|
|
10846
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm text-error-600", children: error }),
|
|
10847
|
+
onRetry && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10647
10848
|
"button",
|
|
10648
10849
|
{
|
|
10649
10850
|
type: "button",
|
|
@@ -10655,8 +10856,8 @@ var NotificationList = ({
|
|
|
10655
10856
|
] });
|
|
10656
10857
|
}
|
|
10657
10858
|
if (loading) {
|
|
10658
|
-
return /* @__PURE__ */ (0,
|
|
10659
|
-
(skeletonId) => /* @__PURE__ */ (0,
|
|
10859
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-col gap-0 w-full", children: ["skeleton-first", "skeleton-second", "skeleton-third"].map(
|
|
10860
|
+
(skeletonId) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10660
10861
|
SkeletonCard,
|
|
10661
10862
|
{
|
|
10662
10863
|
className: "p-4 border-b border-border-200"
|
|
@@ -10666,11 +10867,11 @@ var NotificationList = ({
|
|
|
10666
10867
|
) });
|
|
10667
10868
|
}
|
|
10668
10869
|
if (!groupedNotifications || groupedNotifications.length === 0) {
|
|
10669
|
-
return renderEmpty ? /* @__PURE__ */ (0,
|
|
10870
|
+
return renderEmpty ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NotificationEmpty, {});
|
|
10670
10871
|
}
|
|
10671
|
-
return /* @__PURE__ */ (0,
|
|
10672
|
-
/* @__PURE__ */ (0,
|
|
10673
|
-
group.notifications.map((notification) => /* @__PURE__ */ (0,
|
|
10872
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col", children: [
|
|
10873
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
|
|
10874
|
+
group.notifications.map((notification) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10674
10875
|
SingleNotificationCard,
|
|
10675
10876
|
{
|
|
10676
10877
|
title: notification.title,
|
|
@@ -10711,7 +10912,7 @@ var NotificationCenter = ({
|
|
|
10711
10912
|
className
|
|
10712
10913
|
}) => {
|
|
10713
10914
|
const { isMobile } = useMobile();
|
|
10714
|
-
const [isModalOpen, setIsModalOpen] = (0,
|
|
10915
|
+
const [isModalOpen, setIsModalOpen] = (0, import_react32.useState)(false);
|
|
10715
10916
|
const handleMobileClick = () => {
|
|
10716
10917
|
setIsModalOpen(true);
|
|
10717
10918
|
onFetchNotifications?.();
|
|
@@ -10719,7 +10920,7 @@ var NotificationCenter = ({
|
|
|
10719
10920
|
const handleDesktopClick = () => {
|
|
10720
10921
|
onToggleActive?.();
|
|
10721
10922
|
};
|
|
10722
|
-
(0,
|
|
10923
|
+
(0, import_react32.useEffect)(() => {
|
|
10723
10924
|
if (isActive) {
|
|
10724
10925
|
onFetchNotifications?.();
|
|
10725
10926
|
}
|
|
@@ -10728,7 +10929,7 @@ var NotificationCenter = ({
|
|
|
10728
10929
|
onCleanup?.();
|
|
10729
10930
|
onNavigateById?.(entityType, entityId);
|
|
10730
10931
|
};
|
|
10731
|
-
const renderEmptyState = () => /* @__PURE__ */ (0,
|
|
10932
|
+
const renderEmptyState = () => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10732
10933
|
NotificationEmpty,
|
|
10733
10934
|
{
|
|
10734
10935
|
emptyStateImage,
|
|
@@ -10737,17 +10938,17 @@ var NotificationCenter = ({
|
|
|
10737
10938
|
}
|
|
10738
10939
|
);
|
|
10739
10940
|
if (isMobile) {
|
|
10740
|
-
return /* @__PURE__ */ (0,
|
|
10741
|
-
/* @__PURE__ */ (0,
|
|
10941
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_jsx_runtime42.Fragment, { children: [
|
|
10942
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10742
10943
|
IconButton_default,
|
|
10743
10944
|
{
|
|
10744
10945
|
active: isModalOpen,
|
|
10745
10946
|
onClick: handleMobileClick,
|
|
10746
|
-
icon: /* @__PURE__ */ (0,
|
|
10947
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_phosphor_react21.Bell, { size: 24, className: "text-primary" }),
|
|
10747
10948
|
className
|
|
10748
10949
|
}
|
|
10749
10950
|
),
|
|
10750
|
-
/* @__PURE__ */ (0,
|
|
10951
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10751
10952
|
Modal_default,
|
|
10752
10953
|
{
|
|
10753
10954
|
isOpen: isModalOpen,
|
|
@@ -10757,10 +10958,10 @@ var NotificationCenter = ({
|
|
|
10757
10958
|
hideCloseButton: false,
|
|
10758
10959
|
closeOnBackdropClick: true,
|
|
10759
10960
|
closeOnEscape: true,
|
|
10760
|
-
children: /* @__PURE__ */ (0,
|
|
10761
|
-
/* @__PURE__ */ (0,
|
|
10762
|
-
/* @__PURE__ */ (0,
|
|
10763
|
-
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0,
|
|
10961
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col h-full max-h-[80vh]", children: [
|
|
10962
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "px-0 pb-3 border-b border-border-200", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
10963
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NotificationHeader, { unreadCount, variant: "modal" }),
|
|
10964
|
+
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10764
10965
|
"button",
|
|
10765
10966
|
{
|
|
10766
10967
|
type: "button",
|
|
@@ -10770,7 +10971,7 @@ var NotificationCenter = ({
|
|
|
10770
10971
|
}
|
|
10771
10972
|
)
|
|
10772
10973
|
] }) }),
|
|
10773
|
-
/* @__PURE__ */ (0,
|
|
10974
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10774
10975
|
NotificationList,
|
|
10775
10976
|
{
|
|
10776
10977
|
groupedNotifications,
|
|
@@ -10793,13 +10994,13 @@ var NotificationCenter = ({
|
|
|
10793
10994
|
)
|
|
10794
10995
|
] });
|
|
10795
10996
|
}
|
|
10796
|
-
return /* @__PURE__ */ (0,
|
|
10797
|
-
/* @__PURE__ */ (0,
|
|
10997
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(DropdownMenu_default, { children: [
|
|
10998
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10798
10999
|
IconButton_default,
|
|
10799
11000
|
{
|
|
10800
11001
|
active: isActive,
|
|
10801
11002
|
onClick: handleDesktopClick,
|
|
10802
|
-
icon: /* @__PURE__ */ (0,
|
|
11003
|
+
icon: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10803
11004
|
import_phosphor_react21.Bell,
|
|
10804
11005
|
{
|
|
10805
11006
|
size: 24,
|
|
@@ -10809,22 +11010,22 @@ var NotificationCenter = ({
|
|
|
10809
11010
|
className
|
|
10810
11011
|
}
|
|
10811
11012
|
) }),
|
|
10812
|
-
/* @__PURE__ */ (0,
|
|
11013
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10813
11014
|
DropdownMenuContent,
|
|
10814
11015
|
{
|
|
10815
11016
|
className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
|
|
10816
11017
|
side: "bottom",
|
|
10817
11018
|
align: "end",
|
|
10818
|
-
children: /* @__PURE__ */ (0,
|
|
10819
|
-
/* @__PURE__ */ (0,
|
|
10820
|
-
/* @__PURE__ */ (0,
|
|
11019
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex flex-col", children: [
|
|
11020
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "px-4 py-3 border-b border-border-200", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between", children: [
|
|
11021
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10821
11022
|
NotificationHeader,
|
|
10822
11023
|
{
|
|
10823
11024
|
unreadCount,
|
|
10824
11025
|
variant: "dropdown"
|
|
10825
11026
|
}
|
|
10826
11027
|
),
|
|
10827
|
-
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0,
|
|
11028
|
+
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10828
11029
|
"button",
|
|
10829
11030
|
{
|
|
10830
11031
|
type: "button",
|
|
@@ -10834,7 +11035,7 @@ var NotificationCenter = ({
|
|
|
10834
11035
|
}
|
|
10835
11036
|
)
|
|
10836
11037
|
] }) }),
|
|
10837
|
-
/* @__PURE__ */ (0,
|
|
11038
|
+
/* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10838
11039
|
NotificationList,
|
|
10839
11040
|
{
|
|
10840
11041
|
groupedNotifications,
|
|
@@ -10856,7 +11057,7 @@ var NotificationCenter = ({
|
|
|
10856
11057
|
var NotificationCard = (props) => {
|
|
10857
11058
|
switch (props.mode) {
|
|
10858
11059
|
case "single":
|
|
10859
|
-
return /* @__PURE__ */ (0,
|
|
11060
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10860
11061
|
SingleNotificationCard,
|
|
10861
11062
|
{
|
|
10862
11063
|
title: props.title,
|
|
@@ -10871,7 +11072,7 @@ var NotificationCard = (props) => {
|
|
|
10871
11072
|
}
|
|
10872
11073
|
);
|
|
10873
11074
|
case "list":
|
|
10874
|
-
return /* @__PURE__ */ (0,
|
|
11075
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
|
|
10875
11076
|
NotificationList,
|
|
10876
11077
|
{
|
|
10877
11078
|
groupedNotifications: props.groupedNotifications ?? (props.notifications ? [
|
|
@@ -10892,9 +11093,9 @@ var NotificationCard = (props) => {
|
|
|
10892
11093
|
}
|
|
10893
11094
|
);
|
|
10894
11095
|
case "center":
|
|
10895
|
-
return /* @__PURE__ */ (0,
|
|
11096
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(NotificationCenter, { ...props });
|
|
10896
11097
|
default:
|
|
10897
|
-
return /* @__PURE__ */ (0,
|
|
11098
|
+
return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "text-sm text-text-600", children: "Modo de notifica\xE7\xE3o n\xE3o reconhecido" }) });
|
|
10898
11099
|
}
|
|
10899
11100
|
};
|
|
10900
11101
|
var NotificationCard_default = NotificationCard;
|
|
@@ -10905,7 +11106,7 @@ var createUseNotificationStore = (apiClient) => {
|
|
|
10905
11106
|
};
|
|
10906
11107
|
|
|
10907
11108
|
// src/hooks/useNotifications.ts
|
|
10908
|
-
var
|
|
11109
|
+
var import_react33 = require("react");
|
|
10909
11110
|
var createUseNotifications = (apiClient) => {
|
|
10910
11111
|
const useNotificationStore = createUseNotificationStore(apiClient);
|
|
10911
11112
|
return () => {
|
|
@@ -10924,7 +11125,7 @@ var createUseNotifications = (apiClient) => {
|
|
|
10924
11125
|
resetError,
|
|
10925
11126
|
getGroupedNotifications
|
|
10926
11127
|
} = useNotificationStore();
|
|
10927
|
-
const handleNavigate = (0,
|
|
11128
|
+
const handleNavigate = (0, import_react33.useCallback)(
|
|
10928
11129
|
(entityType, entityId, onAfterNavigate) => {
|
|
10929
11130
|
if (entityType && entityId) {
|
|
10930
11131
|
switch (entityType.toUpperCase()) {
|
|
@@ -10942,7 +11143,7 @@ var createUseNotifications = (apiClient) => {
|
|
|
10942
11143
|
},
|
|
10943
11144
|
[]
|
|
10944
11145
|
);
|
|
10945
|
-
const getActionLabel = (0,
|
|
11146
|
+
const getActionLabel = (0, import_react33.useCallback)(
|
|
10946
11147
|
(entityType) => {
|
|
10947
11148
|
if (!entityType) return void 0;
|
|
10948
11149
|
switch (entityType.toUpperCase()) {
|
|
@@ -10956,7 +11157,7 @@ var createUseNotifications = (apiClient) => {
|
|
|
10956
11157
|
},
|
|
10957
11158
|
[]
|
|
10958
11159
|
);
|
|
10959
|
-
const markAsReadAndNavigate = (0,
|
|
11160
|
+
const markAsReadAndNavigate = (0, import_react33.useCallback)(
|
|
10960
11161
|
async (id, entityType, entityId, onAfterNavigate) => {
|
|
10961
11162
|
await markAsRead(id);
|
|
10962
11163
|
if (entityType && entityId) {
|
|
@@ -10965,11 +11166,11 @@ var createUseNotifications = (apiClient) => {
|
|
|
10965
11166
|
},
|
|
10966
11167
|
[markAsRead, handleNavigate]
|
|
10967
11168
|
);
|
|
10968
|
-
const refreshNotifications = (0,
|
|
11169
|
+
const refreshNotifications = (0, import_react33.useCallback)(async () => {
|
|
10969
11170
|
resetError();
|
|
10970
11171
|
await fetchNotifications();
|
|
10971
11172
|
}, [resetError, fetchNotifications]);
|
|
10972
|
-
const formatNotification = (0,
|
|
11173
|
+
const formatNotification = (0, import_react33.useCallback)(
|
|
10973
11174
|
(notification) => ({
|
|
10974
11175
|
...notification,
|
|
10975
11176
|
time: formatTimeAgo(notification.createdAt),
|
|
@@ -10978,7 +11179,7 @@ var createUseNotifications = (apiClient) => {
|
|
|
10978
11179
|
}),
|
|
10979
11180
|
[]
|
|
10980
11181
|
);
|
|
10981
|
-
const getFormattedGroupedNotifications = (0,
|
|
11182
|
+
const getFormattedGroupedNotifications = (0, import_react33.useCallback)(() => {
|
|
10982
11183
|
const groups = getGroupedNotifications();
|
|
10983
11184
|
return groups.map((group) => ({
|
|
10984
11185
|
...group,
|
|
@@ -11114,6 +11315,7 @@ var createNotificationsHook = (apiClient) => {
|
|
|
11114
11315
|
Table,
|
|
11115
11316
|
Text,
|
|
11116
11317
|
TextArea,
|
|
11318
|
+
ThemeToggle,
|
|
11117
11319
|
Toast,
|
|
11118
11320
|
Toaster,
|
|
11119
11321
|
VideoPlayer,
|
|
@@ -11133,6 +11335,7 @@ var createNotificationsHook = (apiClient) => {
|
|
|
11133
11335
|
useMobile,
|
|
11134
11336
|
useQuizStore,
|
|
11135
11337
|
useRouteAuth,
|
|
11338
|
+
useTheme,
|
|
11136
11339
|
useToastStore,
|
|
11137
11340
|
useUrlAuthentication,
|
|
11138
11341
|
withAuth
|