analytica-frontend-lib 1.1.49 → 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 +9 -4
- package/dist/hooks/useTheme/index.d.ts +9 -4
- package/dist/hooks/useTheme/index.js +73 -11
- package/dist/hooks/useTheme/index.js.map +1 -1
- package/dist/hooks/useTheme/index.mjs +74 -12
- package/dist/hooks/useTheme/index.mjs.map +1 -1
- package/dist/index.css +39 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +698 -521
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +667 -491
- 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.mjs
CHANGED
|
@@ -5987,42 +5987,217 @@ var useMobile = () => {
|
|
|
5987
5987
|
};
|
|
5988
5988
|
|
|
5989
5989
|
// src/hooks/useTheme.ts
|
|
5990
|
-
import { useEffect as useEffect10 } from "react";
|
|
5990
|
+
import { useEffect as useEffect10, useState as useState13, useCallback, useRef as useRef7 } from "react";
|
|
5991
5991
|
var useTheme = () => {
|
|
5992
|
-
|
|
5992
|
+
const [themeMode, setThemeMode] = useState13("system");
|
|
5993
|
+
const [isDark, setIsDark] = useState13(false);
|
|
5994
|
+
const themeModeRef = useRef7("system");
|
|
5995
|
+
const applyTheme = useCallback((mode) => {
|
|
5993
5996
|
const htmlElement = document.documentElement;
|
|
5994
|
-
const
|
|
5995
|
-
if (
|
|
5996
|
-
htmlElement.setAttribute("data-
|
|
5997
|
-
|
|
5998
|
-
|
|
5999
|
-
|
|
5997
|
+
const originalTheme = htmlElement.getAttribute("data-original-theme");
|
|
5998
|
+
if (mode === "dark") {
|
|
5999
|
+
htmlElement.setAttribute("data-theme", "dark");
|
|
6000
|
+
setIsDark(true);
|
|
6001
|
+
} else if (mode === "light") {
|
|
6002
|
+
if (originalTheme) {
|
|
6003
|
+
htmlElement.setAttribute("data-theme", originalTheme);
|
|
6004
|
+
}
|
|
6005
|
+
setIsDark(false);
|
|
6006
|
+
} else if (mode === "system") {
|
|
6007
|
+
const isSystemDark = window.matchMedia(
|
|
6000
6008
|
"(prefers-color-scheme: dark)"
|
|
6001
6009
|
).matches;
|
|
6002
|
-
|
|
6003
|
-
if (isDarkMode) {
|
|
6010
|
+
if (isSystemDark) {
|
|
6004
6011
|
htmlElement.setAttribute("data-theme", "dark");
|
|
6012
|
+
setIsDark(true);
|
|
6005
6013
|
} else if (originalTheme) {
|
|
6006
6014
|
htmlElement.setAttribute("data-theme", originalTheme);
|
|
6015
|
+
setIsDark(false);
|
|
6007
6016
|
}
|
|
6008
|
-
}
|
|
6009
|
-
applyTheme();
|
|
6017
|
+
}
|
|
6010
6018
|
}, []);
|
|
6019
|
+
const toggleTheme = useCallback(() => {
|
|
6020
|
+
let newMode;
|
|
6021
|
+
if (themeMode === "light") {
|
|
6022
|
+
newMode = "dark";
|
|
6023
|
+
} else if (themeMode === "dark") {
|
|
6024
|
+
newMode = "light";
|
|
6025
|
+
} else {
|
|
6026
|
+
newMode = "dark";
|
|
6027
|
+
}
|
|
6028
|
+
setThemeMode(newMode);
|
|
6029
|
+
themeModeRef.current = newMode;
|
|
6030
|
+
applyTheme(newMode);
|
|
6031
|
+
localStorage.setItem("theme-mode", newMode);
|
|
6032
|
+
}, [themeMode, applyTheme]);
|
|
6033
|
+
const setTheme = useCallback(
|
|
6034
|
+
(mode) => {
|
|
6035
|
+
setThemeMode(mode);
|
|
6036
|
+
themeModeRef.current = mode;
|
|
6037
|
+
applyTheme(mode);
|
|
6038
|
+
localStorage.setItem("theme-mode", mode);
|
|
6039
|
+
},
|
|
6040
|
+
[applyTheme]
|
|
6041
|
+
);
|
|
6042
|
+
useEffect10(() => {
|
|
6043
|
+
const htmlElement = document.documentElement;
|
|
6044
|
+
const currentTheme = htmlElement.getAttribute("data-theme");
|
|
6045
|
+
if (currentTheme && !htmlElement.getAttribute("data-original-theme")) {
|
|
6046
|
+
htmlElement.setAttribute("data-original-theme", currentTheme);
|
|
6047
|
+
}
|
|
6048
|
+
const savedThemeMode = localStorage.getItem("theme-mode");
|
|
6049
|
+
const initialMode = savedThemeMode || "system";
|
|
6050
|
+
if (!savedThemeMode) {
|
|
6051
|
+
localStorage.setItem("theme-mode", "system");
|
|
6052
|
+
}
|
|
6053
|
+
setThemeMode(initialMode);
|
|
6054
|
+
themeModeRef.current = initialMode;
|
|
6055
|
+
applyTheme(initialMode);
|
|
6056
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
6057
|
+
const handleSystemThemeChange = () => {
|
|
6058
|
+
if (themeModeRef.current === "system") {
|
|
6059
|
+
applyTheme("system");
|
|
6060
|
+
}
|
|
6061
|
+
};
|
|
6062
|
+
mediaQuery.addEventListener("change", handleSystemThemeChange);
|
|
6063
|
+
return () => {
|
|
6064
|
+
mediaQuery.removeEventListener("change", handleSystemThemeChange);
|
|
6065
|
+
};
|
|
6066
|
+
}, [applyTheme]);
|
|
6067
|
+
return {
|
|
6068
|
+
themeMode,
|
|
6069
|
+
isDark,
|
|
6070
|
+
toggleTheme,
|
|
6071
|
+
setTheme
|
|
6072
|
+
};
|
|
6011
6073
|
};
|
|
6012
6074
|
|
|
6075
|
+
// src/components/ThemeToggle/ThemeToggle.tsx
|
|
6076
|
+
import { forwardRef as forwardRef16 } from "react";
|
|
6077
|
+
import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
6078
|
+
var ThemeToggle = forwardRef16(
|
|
6079
|
+
({
|
|
6080
|
+
variant = "simple",
|
|
6081
|
+
size = "md",
|
|
6082
|
+
showIcons = true,
|
|
6083
|
+
showLabels = true,
|
|
6084
|
+
className,
|
|
6085
|
+
children,
|
|
6086
|
+
...props
|
|
6087
|
+
}, ref) => {
|
|
6088
|
+
const { themeMode, isDark, toggleTheme, setTheme } = useTheme();
|
|
6089
|
+
const sizeClasses = {
|
|
6090
|
+
sm: "text-sm px-3 py-1.5",
|
|
6091
|
+
md: "text-md px-4 py-2",
|
|
6092
|
+
lg: "text-lg px-5 py-2.5"
|
|
6093
|
+
};
|
|
6094
|
+
const activeClasses = "bg-primary-500 text-white";
|
|
6095
|
+
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";
|
|
6096
|
+
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";
|
|
6097
|
+
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";
|
|
6098
|
+
const renderThemeButton = (theme, icon, label, isActive, buttonSize) => {
|
|
6099
|
+
const buttonClasses = buttonSize ? cn(baseButtonClasses, sizeClasses[buttonSize]) : smallButtonClasses;
|
|
6100
|
+
const stateClasses = isActive ? activeClasses : inactiveClasses;
|
|
6101
|
+
return /* @__PURE__ */ jsxs26(
|
|
6102
|
+
"button",
|
|
6103
|
+
{
|
|
6104
|
+
type: "button",
|
|
6105
|
+
onClick: () => setTheme(theme),
|
|
6106
|
+
className: cn(buttonClasses, stateClasses),
|
|
6107
|
+
...buttonSize ? props : {},
|
|
6108
|
+
children: [
|
|
6109
|
+
showIcons && icon,
|
|
6110
|
+
showLabels && label
|
|
6111
|
+
]
|
|
6112
|
+
}
|
|
6113
|
+
);
|
|
6114
|
+
};
|
|
6115
|
+
if (variant === "simple") {
|
|
6116
|
+
return /* @__PURE__ */ jsx32(
|
|
6117
|
+
"button",
|
|
6118
|
+
{
|
|
6119
|
+
type: "button",
|
|
6120
|
+
ref,
|
|
6121
|
+
onClick: toggleTheme,
|
|
6122
|
+
className: cn(
|
|
6123
|
+
"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",
|
|
6124
|
+
sizeClasses[size],
|
|
6125
|
+
className
|
|
6126
|
+
),
|
|
6127
|
+
...props,
|
|
6128
|
+
children: children || /* @__PURE__ */ jsxs26(Fragment6, { children: [
|
|
6129
|
+
showIcons && (isDark ? "\u2600\uFE0F" : "\u{1F319}"),
|
|
6130
|
+
showLabels && (isDark ? "Claro" : "Escuro")
|
|
6131
|
+
] })
|
|
6132
|
+
}
|
|
6133
|
+
);
|
|
6134
|
+
}
|
|
6135
|
+
if (variant === "detailed") {
|
|
6136
|
+
const getLabel = () => {
|
|
6137
|
+
if (themeMode === "system") return "Sistema";
|
|
6138
|
+
if (isDark) return "Escuro";
|
|
6139
|
+
return "Claro";
|
|
6140
|
+
};
|
|
6141
|
+
return /* @__PURE__ */ jsxs26("div", { className: cn("flex flex-col gap-2", className), children: [
|
|
6142
|
+
/* @__PURE__ */ jsxs26("div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: [
|
|
6143
|
+
"Tema: ",
|
|
6144
|
+
getLabel()
|
|
6145
|
+
] }),
|
|
6146
|
+
/* @__PURE__ */ jsxs26("div", { className: "flex gap-1", children: [
|
|
6147
|
+
renderThemeButton("light", "\u2600\uFE0F ", "Claro", themeMode === "light"),
|
|
6148
|
+
renderThemeButton("dark", "\u{1F319} ", "Escuro", themeMode === "dark"),
|
|
6149
|
+
renderThemeButton(
|
|
6150
|
+
"system",
|
|
6151
|
+
"\u2699\uFE0F ",
|
|
6152
|
+
"Sistema",
|
|
6153
|
+
themeMode === "system"
|
|
6154
|
+
)
|
|
6155
|
+
] })
|
|
6156
|
+
] });
|
|
6157
|
+
}
|
|
6158
|
+
if (variant === "buttons") {
|
|
6159
|
+
return /* @__PURE__ */ jsxs26("div", { className: cn("flex gap-2", className), children: [
|
|
6160
|
+
renderThemeButton(
|
|
6161
|
+
"light",
|
|
6162
|
+
"\u2600\uFE0F",
|
|
6163
|
+
"Claro",
|
|
6164
|
+
themeMode === "light",
|
|
6165
|
+
size
|
|
6166
|
+
),
|
|
6167
|
+
renderThemeButton(
|
|
6168
|
+
"dark",
|
|
6169
|
+
"\u{1F319}",
|
|
6170
|
+
"Escuro",
|
|
6171
|
+
themeMode === "dark",
|
|
6172
|
+
size
|
|
6173
|
+
),
|
|
6174
|
+
renderThemeButton(
|
|
6175
|
+
"system",
|
|
6176
|
+
"\u2699\uFE0F",
|
|
6177
|
+
"Sistema",
|
|
6178
|
+
themeMode === "system",
|
|
6179
|
+
size
|
|
6180
|
+
)
|
|
6181
|
+
] });
|
|
6182
|
+
}
|
|
6183
|
+
return null;
|
|
6184
|
+
}
|
|
6185
|
+
);
|
|
6186
|
+
ThemeToggle.displayName = "ThemeToggle";
|
|
6187
|
+
|
|
6013
6188
|
// src/components/Select/Select.tsx
|
|
6014
6189
|
import { create as create5, useStore as useStore4 } from "zustand";
|
|
6015
6190
|
import {
|
|
6016
6191
|
useEffect as useEffect11,
|
|
6017
|
-
useRef as
|
|
6018
|
-
forwardRef as
|
|
6192
|
+
useRef as useRef8,
|
|
6193
|
+
forwardRef as forwardRef17,
|
|
6019
6194
|
isValidElement as isValidElement4,
|
|
6020
6195
|
Children as Children4,
|
|
6021
6196
|
cloneElement as cloneElement4,
|
|
6022
6197
|
useId as useId9
|
|
6023
6198
|
} from "react";
|
|
6024
6199
|
import { CaretDown, Check as Check5, WarningCircle as WarningCircle5 } from "phosphor-react";
|
|
6025
|
-
import { Fragment as
|
|
6200
|
+
import { Fragment as Fragment7, jsx as jsx33, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
6026
6201
|
var VARIANT_CLASSES4 = {
|
|
6027
6202
|
outlined: "border-2 rounded-lg focus:border-primary-950",
|
|
6028
6203
|
underlined: "border-b-2 focus:border-primary-950",
|
|
@@ -6082,7 +6257,7 @@ function getLabelAsNode(children) {
|
|
|
6082
6257
|
}
|
|
6083
6258
|
const flattened = Children4.toArray(children);
|
|
6084
6259
|
if (flattened.length === 1) return flattened[0];
|
|
6085
|
-
return /* @__PURE__ */
|
|
6260
|
+
return /* @__PURE__ */ jsx33(Fragment7, { children: flattened });
|
|
6086
6261
|
}
|
|
6087
6262
|
var injectStore4 = (children, store, size, selectId) => {
|
|
6088
6263
|
return Children4.map(children, (child) => {
|
|
@@ -6120,10 +6295,10 @@ var Select = ({
|
|
|
6120
6295
|
errorMessage,
|
|
6121
6296
|
id
|
|
6122
6297
|
}) => {
|
|
6123
|
-
const storeRef =
|
|
6298
|
+
const storeRef = useRef8(null);
|
|
6124
6299
|
storeRef.current ??= createSelectStore(onValueChange);
|
|
6125
6300
|
const store = storeRef.current;
|
|
6126
|
-
const selectRef =
|
|
6301
|
+
const selectRef = useRef8(null);
|
|
6127
6302
|
const { open, setOpen, setValue, selectedLabel } = useStore4(store, (s) => s);
|
|
6128
6303
|
const generatedId = useId9();
|
|
6129
6304
|
const selectId = id ?? `select-${generatedId}`;
|
|
@@ -6193,8 +6368,8 @@ var Select = ({
|
|
|
6193
6368
|
}
|
|
6194
6369
|
}, [propValue]);
|
|
6195
6370
|
const sizeClasses = SIZE_CLASSES12[size];
|
|
6196
|
-
return /* @__PURE__ */
|
|
6197
|
-
label && /* @__PURE__ */
|
|
6371
|
+
return /* @__PURE__ */ jsxs27("div", { className: cn("w-full", className), children: [
|
|
6372
|
+
label && /* @__PURE__ */ jsx33(
|
|
6198
6373
|
"label",
|
|
6199
6374
|
{
|
|
6200
6375
|
htmlFor: selectId,
|
|
@@ -6202,11 +6377,11 @@ var Select = ({
|
|
|
6202
6377
|
children: label
|
|
6203
6378
|
}
|
|
6204
6379
|
),
|
|
6205
|
-
/* @__PURE__ */
|
|
6206
|
-
(helperText || errorMessage) && /* @__PURE__ */
|
|
6207
|
-
helperText && /* @__PURE__ */
|
|
6208
|
-
errorMessage && /* @__PURE__ */
|
|
6209
|
-
/* @__PURE__ */
|
|
6380
|
+
/* @__PURE__ */ jsx33("div", { className: cn("relative w-full"), ref: selectRef, children: injectStore4(children, store, size, selectId) }),
|
|
6381
|
+
(helperText || errorMessage) && /* @__PURE__ */ jsxs27("div", { className: "mt-1.5 gap-1.5", children: [
|
|
6382
|
+
helperText && /* @__PURE__ */ jsx33("p", { className: "text-sm text-text-500", children: helperText }),
|
|
6383
|
+
errorMessage && /* @__PURE__ */ jsxs27("p", { className: "flex gap-1 items-center text-sm text-indicator-error", children: [
|
|
6384
|
+
/* @__PURE__ */ jsx33(WarningCircle5, { size: 16 }),
|
|
6210
6385
|
" ",
|
|
6211
6386
|
errorMessage
|
|
6212
6387
|
] })
|
|
@@ -6220,9 +6395,9 @@ var SelectValue = ({
|
|
|
6220
6395
|
const store = useSelectStore(externalStore);
|
|
6221
6396
|
const selectedLabel = useStore4(store, (s) => s.selectedLabel);
|
|
6222
6397
|
const value = useStore4(store, (s) => s.value);
|
|
6223
|
-
return /* @__PURE__ */
|
|
6398
|
+
return /* @__PURE__ */ jsx33("span", { className: "text-inherit flex gap-2 items-center", children: selectedLabel || placeholder || value });
|
|
6224
6399
|
};
|
|
6225
|
-
var SelectTrigger =
|
|
6400
|
+
var SelectTrigger = forwardRef17(
|
|
6226
6401
|
({
|
|
6227
6402
|
className,
|
|
6228
6403
|
invalid = false,
|
|
@@ -6239,7 +6414,7 @@ var SelectTrigger = forwardRef16(
|
|
|
6239
6414
|
const variantClasses = VARIANT_CLASSES4[variant];
|
|
6240
6415
|
const heightClasses = HEIGHT_CLASSES[size];
|
|
6241
6416
|
const paddingClasses = PADDING_CLASSES[size];
|
|
6242
|
-
return /* @__PURE__ */
|
|
6417
|
+
return /* @__PURE__ */ jsxs27(
|
|
6243
6418
|
"button",
|
|
6244
6419
|
{
|
|
6245
6420
|
ref,
|
|
@@ -6261,7 +6436,7 @@ var SelectTrigger = forwardRef16(
|
|
|
6261
6436
|
...props,
|
|
6262
6437
|
children: [
|
|
6263
6438
|
props.children,
|
|
6264
|
-
/* @__PURE__ */
|
|
6439
|
+
/* @__PURE__ */ jsx33(
|
|
6265
6440
|
CaretDown,
|
|
6266
6441
|
{
|
|
6267
6442
|
className: cn(
|
|
@@ -6276,7 +6451,7 @@ var SelectTrigger = forwardRef16(
|
|
|
6276
6451
|
}
|
|
6277
6452
|
);
|
|
6278
6453
|
SelectTrigger.displayName = "SelectTrigger";
|
|
6279
|
-
var SelectContent =
|
|
6454
|
+
var SelectContent = forwardRef17(
|
|
6280
6455
|
({
|
|
6281
6456
|
children,
|
|
6282
6457
|
className,
|
|
@@ -6289,7 +6464,7 @@ var SelectContent = forwardRef16(
|
|
|
6289
6464
|
const open = useStore4(store, (s) => s.open);
|
|
6290
6465
|
if (!open) return null;
|
|
6291
6466
|
const getPositionClasses = () => `w-full min-w-full absolute ${SIDE_CLASSES2[side]} ${ALIGN_CLASSES2[align]}`;
|
|
6292
|
-
return /* @__PURE__ */
|
|
6467
|
+
return /* @__PURE__ */ jsx33(
|
|
6293
6468
|
"div",
|
|
6294
6469
|
{
|
|
6295
6470
|
role: "menu",
|
|
@@ -6306,7 +6481,7 @@ var SelectContent = forwardRef16(
|
|
|
6306
6481
|
}
|
|
6307
6482
|
);
|
|
6308
6483
|
SelectContent.displayName = "SelectContent";
|
|
6309
|
-
var SelectItem =
|
|
6484
|
+
var SelectItem = forwardRef17(
|
|
6310
6485
|
({
|
|
6311
6486
|
className,
|
|
6312
6487
|
children,
|
|
@@ -6333,7 +6508,7 @@ var SelectItem = forwardRef16(
|
|
|
6333
6508
|
}
|
|
6334
6509
|
props.onClick?.(e);
|
|
6335
6510
|
};
|
|
6336
|
-
return /* @__PURE__ */
|
|
6511
|
+
return /* @__PURE__ */ jsxs27(
|
|
6337
6512
|
"div",
|
|
6338
6513
|
{
|
|
6339
6514
|
role: "menuitem",
|
|
@@ -6353,7 +6528,7 @@ var SelectItem = forwardRef16(
|
|
|
6353
6528
|
tabIndex: disabled ? -1 : 0,
|
|
6354
6529
|
...props,
|
|
6355
6530
|
children: [
|
|
6356
|
-
/* @__PURE__ */
|
|
6531
|
+
/* @__PURE__ */ jsx33("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: selectedValue === value && /* @__PURE__ */ jsx33(Check5, { className: "" }) }),
|
|
6357
6532
|
children
|
|
6358
6533
|
]
|
|
6359
6534
|
}
|
|
@@ -6367,15 +6542,15 @@ var Select_default = Select;
|
|
|
6367
6542
|
import { create as create6, useStore as useStore5 } from "zustand";
|
|
6368
6543
|
import {
|
|
6369
6544
|
useEffect as useEffect12,
|
|
6370
|
-
useRef as
|
|
6371
|
-
forwardRef as
|
|
6545
|
+
useRef as useRef9,
|
|
6546
|
+
forwardRef as forwardRef18,
|
|
6372
6547
|
isValidElement as isValidElement5,
|
|
6373
6548
|
Children as Children5,
|
|
6374
6549
|
cloneElement as cloneElement5,
|
|
6375
|
-
useState as
|
|
6550
|
+
useState as useState14
|
|
6376
6551
|
} from "react";
|
|
6377
6552
|
import { CaretLeft as CaretLeft2, CaretRight as CaretRight3 } from "phosphor-react";
|
|
6378
|
-
import { jsx as
|
|
6553
|
+
import { jsx as jsx34, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
6379
6554
|
var createMenuStore = (onValueChange) => create6((set) => ({
|
|
6380
6555
|
value: "",
|
|
6381
6556
|
setValue: (value) => {
|
|
@@ -6394,7 +6569,7 @@ var VARIANT_CLASSES5 = {
|
|
|
6394
6569
|
"menu-overflow": "",
|
|
6395
6570
|
breadcrumb: "bg-transparent shadow-none !px-0"
|
|
6396
6571
|
};
|
|
6397
|
-
var Menu =
|
|
6572
|
+
var Menu = forwardRef18(
|
|
6398
6573
|
({
|
|
6399
6574
|
className,
|
|
6400
6575
|
children,
|
|
@@ -6404,7 +6579,7 @@ var Menu = forwardRef17(
|
|
|
6404
6579
|
onValueChange,
|
|
6405
6580
|
...props
|
|
6406
6581
|
}, ref) => {
|
|
6407
|
-
const storeRef =
|
|
6582
|
+
const storeRef = useRef9(null);
|
|
6408
6583
|
storeRef.current ??= createMenuStore(onValueChange);
|
|
6409
6584
|
const store = storeRef.current;
|
|
6410
6585
|
const { setValue } = useStore5(store, (s) => s);
|
|
@@ -6413,7 +6588,7 @@ var Menu = forwardRef17(
|
|
|
6413
6588
|
}, [defaultValue, propValue, setValue]);
|
|
6414
6589
|
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";
|
|
6415
6590
|
const variantClasses = VARIANT_CLASSES5[variant];
|
|
6416
|
-
return /* @__PURE__ */
|
|
6591
|
+
return /* @__PURE__ */ jsx34(
|
|
6417
6592
|
"div",
|
|
6418
6593
|
{
|
|
6419
6594
|
ref,
|
|
@@ -6429,11 +6604,11 @@ var Menu = forwardRef17(
|
|
|
6429
6604
|
}
|
|
6430
6605
|
);
|
|
6431
6606
|
Menu.displayName = "Menu";
|
|
6432
|
-
var MenuContent =
|
|
6607
|
+
var MenuContent = forwardRef18(
|
|
6433
6608
|
({ className, children, variant = "menu", ...props }, ref) => {
|
|
6434
6609
|
const baseClasses = "w-full flex flex-row items-center gap-2";
|
|
6435
6610
|
const variantClasses = variant === "menu2" || variant === "menu-overflow" ? "overflow-x-auto scroll-smooth" : "";
|
|
6436
|
-
return /* @__PURE__ */
|
|
6611
|
+
return /* @__PURE__ */ jsx34(
|
|
6437
6612
|
"ul",
|
|
6438
6613
|
{
|
|
6439
6614
|
ref,
|
|
@@ -6451,7 +6626,7 @@ var MenuContent = forwardRef17(
|
|
|
6451
6626
|
}
|
|
6452
6627
|
);
|
|
6453
6628
|
MenuContent.displayName = "MenuContent";
|
|
6454
|
-
var MenuItem =
|
|
6629
|
+
var MenuItem = forwardRef18(
|
|
6455
6630
|
({
|
|
6456
6631
|
className,
|
|
6457
6632
|
children,
|
|
@@ -6485,7 +6660,7 @@ var MenuItem = forwardRef17(
|
|
|
6485
6660
|
...props
|
|
6486
6661
|
};
|
|
6487
6662
|
const variants = {
|
|
6488
|
-
menu: /* @__PURE__ */
|
|
6663
|
+
menu: /* @__PURE__ */ jsx34(
|
|
6489
6664
|
"li",
|
|
6490
6665
|
{
|
|
6491
6666
|
"data-variant": "menu",
|
|
@@ -6500,7 +6675,7 @@ var MenuItem = forwardRef17(
|
|
|
6500
6675
|
children
|
|
6501
6676
|
}
|
|
6502
6677
|
),
|
|
6503
|
-
menu2: /* @__PURE__ */
|
|
6678
|
+
menu2: /* @__PURE__ */ jsxs28(
|
|
6504
6679
|
"li",
|
|
6505
6680
|
{
|
|
6506
6681
|
"data-variant": "menu2",
|
|
@@ -6511,7 +6686,7 @@ var MenuItem = forwardRef17(
|
|
|
6511
6686
|
`,
|
|
6512
6687
|
...commonProps,
|
|
6513
6688
|
children: [
|
|
6514
|
-
/* @__PURE__ */
|
|
6689
|
+
/* @__PURE__ */ jsx34(
|
|
6515
6690
|
"span",
|
|
6516
6691
|
{
|
|
6517
6692
|
className: cn(
|
|
@@ -6521,11 +6696,11 @@ var MenuItem = forwardRef17(
|
|
|
6521
6696
|
children
|
|
6522
6697
|
}
|
|
6523
6698
|
),
|
|
6524
|
-
selectedValue === value && /* @__PURE__ */
|
|
6699
|
+
selectedValue === value && /* @__PURE__ */ jsx34("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
|
|
6525
6700
|
]
|
|
6526
6701
|
}
|
|
6527
6702
|
),
|
|
6528
|
-
"menu-overflow": /* @__PURE__ */
|
|
6703
|
+
"menu-overflow": /* @__PURE__ */ jsxs28(
|
|
6529
6704
|
"li",
|
|
6530
6705
|
{
|
|
6531
6706
|
"data-variant": "menu-overflow",
|
|
@@ -6536,7 +6711,7 @@ var MenuItem = forwardRef17(
|
|
|
6536
6711
|
`,
|
|
6537
6712
|
...commonProps,
|
|
6538
6713
|
children: [
|
|
6539
|
-
/* @__PURE__ */
|
|
6714
|
+
/* @__PURE__ */ jsx34(
|
|
6540
6715
|
"span",
|
|
6541
6716
|
{
|
|
6542
6717
|
className: cn(
|
|
@@ -6546,11 +6721,11 @@ var MenuItem = forwardRef17(
|
|
|
6546
6721
|
children
|
|
6547
6722
|
}
|
|
6548
6723
|
),
|
|
6549
|
-
selectedValue === value && /* @__PURE__ */
|
|
6724
|
+
selectedValue === value && /* @__PURE__ */ jsx34("div", { className: "h-1 w-full bg-primary-950 rounded-lg" })
|
|
6550
6725
|
]
|
|
6551
6726
|
}
|
|
6552
6727
|
),
|
|
6553
|
-
breadcrumb: /* @__PURE__ */
|
|
6728
|
+
breadcrumb: /* @__PURE__ */ jsxs28(
|
|
6554
6729
|
"li",
|
|
6555
6730
|
{
|
|
6556
6731
|
"data-variant": "breadcrumb",
|
|
@@ -6562,7 +6737,7 @@ var MenuItem = forwardRef17(
|
|
|
6562
6737
|
`,
|
|
6563
6738
|
...commonProps,
|
|
6564
6739
|
children: [
|
|
6565
|
-
/* @__PURE__ */
|
|
6740
|
+
/* @__PURE__ */ jsx34(
|
|
6566
6741
|
"span",
|
|
6567
6742
|
{
|
|
6568
6743
|
className: cn(
|
|
@@ -6572,7 +6747,7 @@ var MenuItem = forwardRef17(
|
|
|
6572
6747
|
children
|
|
6573
6748
|
}
|
|
6574
6749
|
),
|
|
6575
|
-
separator && /* @__PURE__ */
|
|
6750
|
+
separator && /* @__PURE__ */ jsx34(
|
|
6576
6751
|
CaretRight3,
|
|
6577
6752
|
{
|
|
6578
6753
|
size: 16,
|
|
@@ -6609,9 +6784,9 @@ var MenuOverflow = ({
|
|
|
6609
6784
|
onValueChange,
|
|
6610
6785
|
...props
|
|
6611
6786
|
}) => {
|
|
6612
|
-
const containerRef =
|
|
6613
|
-
const [showLeftArrow, setShowLeftArrow] =
|
|
6614
|
-
const [showRightArrow, setShowRightArrow] =
|
|
6787
|
+
const containerRef = useRef9(null);
|
|
6788
|
+
const [showLeftArrow, setShowLeftArrow] = useState14(false);
|
|
6789
|
+
const [showRightArrow, setShowRightArrow] = useState14(false);
|
|
6615
6790
|
useEffect12(() => {
|
|
6616
6791
|
const checkScroll = () => internalCheckScroll(
|
|
6617
6792
|
containerRef.current,
|
|
@@ -6627,25 +6802,25 @@ var MenuOverflow = ({
|
|
|
6627
6802
|
window.removeEventListener("resize", checkScroll);
|
|
6628
6803
|
};
|
|
6629
6804
|
}, []);
|
|
6630
|
-
return /* @__PURE__ */
|
|
6805
|
+
return /* @__PURE__ */ jsxs28(
|
|
6631
6806
|
"div",
|
|
6632
6807
|
{
|
|
6633
6808
|
"data-testid": "menu-overflow-wrapper",
|
|
6634
6809
|
className: cn("relative w-full overflow-hidden", className),
|
|
6635
6810
|
children: [
|
|
6636
|
-
showLeftArrow && /* @__PURE__ */
|
|
6811
|
+
showLeftArrow && /* @__PURE__ */ jsxs28(
|
|
6637
6812
|
"button",
|
|
6638
6813
|
{
|
|
6639
6814
|
onClick: () => internalScroll(containerRef.current, "left"),
|
|
6640
6815
|
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",
|
|
6641
6816
|
"data-testid": "scroll-left-button",
|
|
6642
6817
|
children: [
|
|
6643
|
-
/* @__PURE__ */
|
|
6644
|
-
/* @__PURE__ */
|
|
6818
|
+
/* @__PURE__ */ jsx34(CaretLeft2, { size: 16 }),
|
|
6819
|
+
/* @__PURE__ */ jsx34("span", { className: "sr-only", children: "Scroll left" })
|
|
6645
6820
|
]
|
|
6646
6821
|
}
|
|
6647
6822
|
),
|
|
6648
|
-
/* @__PURE__ */
|
|
6823
|
+
/* @__PURE__ */ jsx34(
|
|
6649
6824
|
Menu,
|
|
6650
6825
|
{
|
|
6651
6826
|
defaultValue,
|
|
@@ -6653,18 +6828,18 @@ var MenuOverflow = ({
|
|
|
6653
6828
|
value,
|
|
6654
6829
|
variant: "menu2",
|
|
6655
6830
|
...props,
|
|
6656
|
-
children: /* @__PURE__ */
|
|
6831
|
+
children: /* @__PURE__ */ jsx34(MenuContent, { ref: containerRef, variant: "menu2", children })
|
|
6657
6832
|
}
|
|
6658
6833
|
),
|
|
6659
|
-
showRightArrow && /* @__PURE__ */
|
|
6834
|
+
showRightArrow && /* @__PURE__ */ jsxs28(
|
|
6660
6835
|
"button",
|
|
6661
6836
|
{
|
|
6662
6837
|
onClick: () => internalScroll(containerRef.current, "right"),
|
|
6663
6838
|
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",
|
|
6664
6839
|
"data-testid": "scroll-right-button",
|
|
6665
6840
|
children: [
|
|
6666
|
-
/* @__PURE__ */
|
|
6667
|
-
/* @__PURE__ */
|
|
6841
|
+
/* @__PURE__ */ jsx34(CaretRight3, { size: 16 }),
|
|
6842
|
+
/* @__PURE__ */ jsx34("span", { className: "sr-only", children: "Scroll right" })
|
|
6668
6843
|
]
|
|
6669
6844
|
}
|
|
6670
6845
|
)
|
|
@@ -6684,8 +6859,8 @@ var injectStore5 = (children, store) => Children5.map(children, (child) => {
|
|
|
6684
6859
|
var Menu_default = Menu;
|
|
6685
6860
|
|
|
6686
6861
|
// src/components/Skeleton/Skeleton.tsx
|
|
6687
|
-
import { forwardRef as
|
|
6688
|
-
import { jsx as
|
|
6862
|
+
import { forwardRef as forwardRef19 } from "react";
|
|
6863
|
+
import { jsx as jsx35, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
6689
6864
|
var SKELETON_ANIMATION_CLASSES = {
|
|
6690
6865
|
pulse: "animate-pulse",
|
|
6691
6866
|
none: ""
|
|
@@ -6702,7 +6877,7 @@ var SPACING_CLASSES = {
|
|
|
6702
6877
|
medium: "space-y-2",
|
|
6703
6878
|
large: "space-y-3"
|
|
6704
6879
|
};
|
|
6705
|
-
var Skeleton =
|
|
6880
|
+
var Skeleton = forwardRef19(
|
|
6706
6881
|
({
|
|
6707
6882
|
variant = "text",
|
|
6708
6883
|
width,
|
|
@@ -6722,13 +6897,13 @@ var Skeleton = forwardRef18(
|
|
|
6722
6897
|
height: typeof height === "number" ? `${height}px` : height
|
|
6723
6898
|
};
|
|
6724
6899
|
if (variant === "text" && lines > 1) {
|
|
6725
|
-
return /* @__PURE__ */
|
|
6900
|
+
return /* @__PURE__ */ jsx35(
|
|
6726
6901
|
"div",
|
|
6727
6902
|
{
|
|
6728
6903
|
ref,
|
|
6729
6904
|
className: cn("flex flex-col", spacingClass, className),
|
|
6730
6905
|
...props,
|
|
6731
|
-
children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */
|
|
6906
|
+
children: Array.from({ length: lines }, (_, index) => /* @__PURE__ */ jsx35(
|
|
6732
6907
|
"div",
|
|
6733
6908
|
{
|
|
6734
6909
|
className: cn(variantClass, animationClass),
|
|
@@ -6739,7 +6914,7 @@ var Skeleton = forwardRef18(
|
|
|
6739
6914
|
}
|
|
6740
6915
|
);
|
|
6741
6916
|
}
|
|
6742
|
-
return /* @__PURE__ */
|
|
6917
|
+
return /* @__PURE__ */ jsx35(
|
|
6743
6918
|
"div",
|
|
6744
6919
|
{
|
|
6745
6920
|
ref,
|
|
@@ -6751,13 +6926,13 @@ var Skeleton = forwardRef18(
|
|
|
6751
6926
|
);
|
|
6752
6927
|
}
|
|
6753
6928
|
);
|
|
6754
|
-
var SkeletonText =
|
|
6755
|
-
(props, ref) => /* @__PURE__ */
|
|
6929
|
+
var SkeletonText = forwardRef19(
|
|
6930
|
+
(props, ref) => /* @__PURE__ */ jsx35(Skeleton, { ref, variant: "text", ...props })
|
|
6756
6931
|
);
|
|
6757
|
-
var SkeletonCircle =
|
|
6758
|
-
var SkeletonRectangle =
|
|
6759
|
-
var SkeletonRounded =
|
|
6760
|
-
var SkeletonCard =
|
|
6932
|
+
var SkeletonCircle = forwardRef19((props, ref) => /* @__PURE__ */ jsx35(Skeleton, { ref, variant: "circular", ...props }));
|
|
6933
|
+
var SkeletonRectangle = forwardRef19((props, ref) => /* @__PURE__ */ jsx35(Skeleton, { ref, variant: "rectangular", ...props }));
|
|
6934
|
+
var SkeletonRounded = forwardRef19((props, ref) => /* @__PURE__ */ jsx35(Skeleton, { ref, variant: "rounded", ...props }));
|
|
6935
|
+
var SkeletonCard = forwardRef19(
|
|
6761
6936
|
({
|
|
6762
6937
|
showAvatar = true,
|
|
6763
6938
|
showTitle = true,
|
|
@@ -6767,7 +6942,7 @@ var SkeletonCard = forwardRef18(
|
|
|
6767
6942
|
className = "",
|
|
6768
6943
|
...props
|
|
6769
6944
|
}, ref) => {
|
|
6770
|
-
return /* @__PURE__ */
|
|
6945
|
+
return /* @__PURE__ */ jsxs29(
|
|
6771
6946
|
"div",
|
|
6772
6947
|
{
|
|
6773
6948
|
ref,
|
|
@@ -6777,23 +6952,23 @@ var SkeletonCard = forwardRef18(
|
|
|
6777
6952
|
),
|
|
6778
6953
|
...props,
|
|
6779
6954
|
children: [
|
|
6780
|
-
/* @__PURE__ */
|
|
6781
|
-
showAvatar && /* @__PURE__ */
|
|
6782
|
-
/* @__PURE__ */
|
|
6783
|
-
showTitle && /* @__PURE__ */
|
|
6784
|
-
showDescription && /* @__PURE__ */
|
|
6955
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex items-start space-x-3", children: [
|
|
6956
|
+
showAvatar && /* @__PURE__ */ jsx35(SkeletonCircle, { width: 40, height: 40 }),
|
|
6957
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 space-y-2", children: [
|
|
6958
|
+
showTitle && /* @__PURE__ */ jsx35(SkeletonText, { width: "60%", height: 20 }),
|
|
6959
|
+
showDescription && /* @__PURE__ */ jsx35(SkeletonText, { lines, spacing: "small" })
|
|
6785
6960
|
] })
|
|
6786
6961
|
] }),
|
|
6787
|
-
showActions && /* @__PURE__ */
|
|
6788
|
-
/* @__PURE__ */
|
|
6789
|
-
/* @__PURE__ */
|
|
6962
|
+
showActions && /* @__PURE__ */ jsxs29("div", { className: "flex justify-end space-x-2 mt-4", children: [
|
|
6963
|
+
/* @__PURE__ */ jsx35(SkeletonRectangle, { width: 80, height: 32 }),
|
|
6964
|
+
/* @__PURE__ */ jsx35(SkeletonRectangle, { width: 80, height: 32 })
|
|
6790
6965
|
] })
|
|
6791
6966
|
]
|
|
6792
6967
|
}
|
|
6793
6968
|
);
|
|
6794
6969
|
}
|
|
6795
6970
|
);
|
|
6796
|
-
var SkeletonList =
|
|
6971
|
+
var SkeletonList = forwardRef19(
|
|
6797
6972
|
({
|
|
6798
6973
|
items = 3,
|
|
6799
6974
|
showAvatar = true,
|
|
@@ -6803,19 +6978,19 @@ var SkeletonList = forwardRef18(
|
|
|
6803
6978
|
className = "",
|
|
6804
6979
|
...props
|
|
6805
6980
|
}, ref) => {
|
|
6806
|
-
return /* @__PURE__ */
|
|
6807
|
-
showAvatar && /* @__PURE__ */
|
|
6808
|
-
/* @__PURE__ */
|
|
6809
|
-
showTitle && /* @__PURE__ */
|
|
6810
|
-
showDescription && /* @__PURE__ */
|
|
6981
|
+
return /* @__PURE__ */ jsx35("div", { ref, className: cn("space-y-3", className), ...props, children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs29("div", { className: "flex items-start space-x-3 p-3", children: [
|
|
6982
|
+
showAvatar && /* @__PURE__ */ jsx35(SkeletonCircle, { width: 32, height: 32 }),
|
|
6983
|
+
/* @__PURE__ */ jsxs29("div", { className: "flex-1 space-y-2", children: [
|
|
6984
|
+
showTitle && /* @__PURE__ */ jsx35(SkeletonText, { width: "40%", height: 16 }),
|
|
6985
|
+
showDescription && /* @__PURE__ */ jsx35(SkeletonText, { lines, spacing: "small" })
|
|
6811
6986
|
] })
|
|
6812
6987
|
] }, index)) });
|
|
6813
6988
|
}
|
|
6814
6989
|
);
|
|
6815
|
-
var SkeletonTable =
|
|
6990
|
+
var SkeletonTable = forwardRef19(
|
|
6816
6991
|
({ rows = 5, columns = 4, showHeader = true, className = "", ...props }, ref) => {
|
|
6817
|
-
return /* @__PURE__ */
|
|
6818
|
-
showHeader && /* @__PURE__ */
|
|
6992
|
+
return /* @__PURE__ */ jsxs29("div", { ref, className: cn("w-full", className), ...props, children: [
|
|
6993
|
+
showHeader && /* @__PURE__ */ jsx35("div", { className: "flex space-x-2 mb-3", children: Array.from({ length: columns }, (_, index) => /* @__PURE__ */ jsx35(
|
|
6819
6994
|
SkeletonText,
|
|
6820
6995
|
{
|
|
6821
6996
|
width: `${100 / columns}%`,
|
|
@@ -6823,7 +6998,7 @@ var SkeletonTable = forwardRef18(
|
|
|
6823
6998
|
},
|
|
6824
6999
|
index
|
|
6825
7000
|
)) }),
|
|
6826
|
-
/* @__PURE__ */
|
|
7001
|
+
/* @__PURE__ */ jsx35("div", { className: "space-y-2", children: Array.from({ length: rows }, (_, rowIndex) => /* @__PURE__ */ jsx35("div", { className: "flex space-x-2", children: Array.from({ length: columns }, (_2, colIndex) => /* @__PURE__ */ jsx35(
|
|
6827
7002
|
SkeletonText,
|
|
6828
7003
|
{
|
|
6829
7004
|
width: `${100 / columns}%`,
|
|
@@ -6836,7 +7011,7 @@ var SkeletonTable = forwardRef18(
|
|
|
6836
7011
|
);
|
|
6837
7012
|
|
|
6838
7013
|
// src/components/NotFound/NotFound.tsx
|
|
6839
|
-
import { jsx as
|
|
7014
|
+
import { jsx as jsx36, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
6840
7015
|
var NotFound = ({
|
|
6841
7016
|
title,
|
|
6842
7017
|
description,
|
|
@@ -6879,22 +7054,22 @@ var NotFound = ({
|
|
|
6879
7054
|
const errorTitle = title || getDefaultTitle();
|
|
6880
7055
|
const errorDescription = description || getDefaultDescription();
|
|
6881
7056
|
const errorCode = getErrorCode();
|
|
6882
|
-
return /* @__PURE__ */
|
|
7057
|
+
return /* @__PURE__ */ jsx36(
|
|
6883
7058
|
"div",
|
|
6884
7059
|
{
|
|
6885
7060
|
className: cn(
|
|
6886
7061
|
"flex flex-col w-full h-screen items-center justify-center bg-background-50 px-4",
|
|
6887
7062
|
className
|
|
6888
7063
|
),
|
|
6889
|
-
children: /* @__PURE__ */
|
|
7064
|
+
children: /* @__PURE__ */ jsx36(
|
|
6890
7065
|
"main",
|
|
6891
7066
|
{
|
|
6892
7067
|
role: "main",
|
|
6893
7068
|
"aria-labelledby": "error-title",
|
|
6894
7069
|
"aria-describedby": "error-description",
|
|
6895
7070
|
className: "flex flex-col items-center text-center max-w-md space-y-6",
|
|
6896
|
-
children: /* @__PURE__ */
|
|
6897
|
-
/* @__PURE__ */
|
|
7071
|
+
children: /* @__PURE__ */ jsxs30("section", { "aria-label": `Erro ${errorCode}`, children: [
|
|
7072
|
+
/* @__PURE__ */ jsx36(
|
|
6898
7073
|
"div",
|
|
6899
7074
|
{
|
|
6900
7075
|
className: "text-8xl font-bold text-primary-300 select-none",
|
|
@@ -6902,8 +7077,8 @@ var NotFound = ({
|
|
|
6902
7077
|
children: errorCode
|
|
6903
7078
|
}
|
|
6904
7079
|
),
|
|
6905
|
-
/* @__PURE__ */
|
|
6906
|
-
/* @__PURE__ */
|
|
7080
|
+
/* @__PURE__ */ jsxs30("header", { className: "space-y-2", children: [
|
|
7081
|
+
/* @__PURE__ */ jsx36(
|
|
6907
7082
|
Text_default,
|
|
6908
7083
|
{
|
|
6909
7084
|
size: "xl",
|
|
@@ -6914,9 +7089,9 @@ var NotFound = ({
|
|
|
6914
7089
|
children: errorTitle
|
|
6915
7090
|
}
|
|
6916
7091
|
),
|
|
6917
|
-
/* @__PURE__ */
|
|
7092
|
+
/* @__PURE__ */ jsx36(Text_default, { size: "md", className: "text-text-600", id: "error-description", children: errorDescription })
|
|
6918
7093
|
] }),
|
|
6919
|
-
onButtonClick && /* @__PURE__ */
|
|
7094
|
+
onButtonClick && /* @__PURE__ */ jsx36("nav", { "aria-label": "Navega\xE7\xE3o de erro", children: /* @__PURE__ */ jsx36(
|
|
6920
7095
|
Button_default,
|
|
6921
7096
|
{
|
|
6922
7097
|
onClick: handleButtonClick,
|
|
@@ -6938,10 +7113,10 @@ var NotFound_default = NotFound;
|
|
|
6938
7113
|
|
|
6939
7114
|
// src/components/VideoPlayer/VideoPlayer.tsx
|
|
6940
7115
|
import {
|
|
6941
|
-
useRef as
|
|
6942
|
-
useState as
|
|
7116
|
+
useRef as useRef10,
|
|
7117
|
+
useState as useState15,
|
|
6943
7118
|
useEffect as useEffect13,
|
|
6944
|
-
useCallback
|
|
7119
|
+
useCallback as useCallback2
|
|
6945
7120
|
} from "react";
|
|
6946
7121
|
import {
|
|
6947
7122
|
Play as Play2,
|
|
@@ -6953,7 +7128,7 @@ import {
|
|
|
6953
7128
|
ClosedCaptioning,
|
|
6954
7129
|
DotsThreeVertical as DotsThreeVertical2
|
|
6955
7130
|
} from "phosphor-react";
|
|
6956
|
-
import { jsx as
|
|
7131
|
+
import { jsx as jsx37, jsxs as jsxs31 } from "react/jsx-runtime";
|
|
6957
7132
|
var CONTROLS_HIDE_TIMEOUT = 3e3;
|
|
6958
7133
|
var LEAVE_HIDE_TIMEOUT = 1e3;
|
|
6959
7134
|
var INIT_DELAY = 100;
|
|
@@ -6968,7 +7143,7 @@ var ProgressBar2 = ({
|
|
|
6968
7143
|
duration,
|
|
6969
7144
|
progressPercentage,
|
|
6970
7145
|
onSeek
|
|
6971
|
-
}) => /* @__PURE__ */
|
|
7146
|
+
}) => /* @__PURE__ */ jsx37("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx37(
|
|
6972
7147
|
"input",
|
|
6973
7148
|
{
|
|
6974
7149
|
type: "range",
|
|
@@ -6988,17 +7163,17 @@ var VolumeControls = ({
|
|
|
6988
7163
|
isMuted,
|
|
6989
7164
|
onVolumeChange,
|
|
6990
7165
|
onToggleMute
|
|
6991
|
-
}) => /* @__PURE__ */
|
|
6992
|
-
/* @__PURE__ */
|
|
7166
|
+
}) => /* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-2", children: [
|
|
7167
|
+
/* @__PURE__ */ jsx37(
|
|
6993
7168
|
IconButton_default,
|
|
6994
7169
|
{
|
|
6995
|
-
icon: isMuted ? /* @__PURE__ */
|
|
7170
|
+
icon: isMuted ? /* @__PURE__ */ jsx37(SpeakerSlash, { size: 24 }) : /* @__PURE__ */ jsx37(SpeakerHigh2, { size: 24 }),
|
|
6996
7171
|
onClick: onToggleMute,
|
|
6997
7172
|
"aria-label": isMuted ? "Unmute" : "Mute",
|
|
6998
7173
|
className: "!bg-transparent !text-white hover:!bg-white/20"
|
|
6999
7174
|
}
|
|
7000
7175
|
),
|
|
7001
|
-
/* @__PURE__ */
|
|
7176
|
+
/* @__PURE__ */ jsx37(
|
|
7002
7177
|
"input",
|
|
7003
7178
|
{
|
|
7004
7179
|
type: "range",
|
|
@@ -7019,17 +7194,17 @@ var SpeedMenu = ({
|
|
|
7019
7194
|
playbackRate,
|
|
7020
7195
|
onToggleMenu,
|
|
7021
7196
|
onSpeedChange
|
|
7022
|
-
}) => /* @__PURE__ */
|
|
7023
|
-
/* @__PURE__ */
|
|
7197
|
+
}) => /* @__PURE__ */ jsxs31("div", { className: "relative", children: [
|
|
7198
|
+
/* @__PURE__ */ jsx37(
|
|
7024
7199
|
IconButton_default,
|
|
7025
7200
|
{
|
|
7026
|
-
icon: /* @__PURE__ */
|
|
7201
|
+
icon: /* @__PURE__ */ jsx37(DotsThreeVertical2, { size: 24 }),
|
|
7027
7202
|
onClick: onToggleMenu,
|
|
7028
7203
|
"aria-label": "Playback speed",
|
|
7029
7204
|
className: "!bg-transparent !text-white hover:!bg-white/20"
|
|
7030
7205
|
}
|
|
7031
7206
|
),
|
|
7032
|
-
showSpeedMenu && /* @__PURE__ */
|
|
7207
|
+
showSpeedMenu && /* @__PURE__ */ jsx37("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__ */ jsxs31(
|
|
7033
7208
|
"button",
|
|
7034
7209
|
{
|
|
7035
7210
|
onClick: () => onSpeedChange(speed),
|
|
@@ -7056,26 +7231,26 @@ var VideoPlayer = ({
|
|
|
7056
7231
|
autoSave = true,
|
|
7057
7232
|
storageKey = "video-progress"
|
|
7058
7233
|
}) => {
|
|
7059
|
-
const videoRef =
|
|
7060
|
-
const [isPlaying, setIsPlaying] =
|
|
7061
|
-
const [currentTime, setCurrentTime] =
|
|
7062
|
-
const [duration, setDuration] =
|
|
7063
|
-
const [isMuted, setIsMuted] =
|
|
7064
|
-
const [volume, setVolume] =
|
|
7065
|
-
const [isFullscreen, setIsFullscreen] =
|
|
7066
|
-
const [showControls, setShowControls] =
|
|
7067
|
-
const [hasCompleted, setHasCompleted] =
|
|
7068
|
-
const [showCaptions, setShowCaptions] =
|
|
7234
|
+
const videoRef = useRef10(null);
|
|
7235
|
+
const [isPlaying, setIsPlaying] = useState15(false);
|
|
7236
|
+
const [currentTime, setCurrentTime] = useState15(0);
|
|
7237
|
+
const [duration, setDuration] = useState15(0);
|
|
7238
|
+
const [isMuted, setIsMuted] = useState15(false);
|
|
7239
|
+
const [volume, setVolume] = useState15(1);
|
|
7240
|
+
const [isFullscreen, setIsFullscreen] = useState15(false);
|
|
7241
|
+
const [showControls, setShowControls] = useState15(true);
|
|
7242
|
+
const [hasCompleted, setHasCompleted] = useState15(false);
|
|
7243
|
+
const [showCaptions, setShowCaptions] = useState15(false);
|
|
7069
7244
|
useEffect13(() => {
|
|
7070
7245
|
setHasCompleted(false);
|
|
7071
7246
|
}, [src]);
|
|
7072
|
-
const [playbackRate, setPlaybackRate] =
|
|
7073
|
-
const [showSpeedMenu, setShowSpeedMenu] =
|
|
7074
|
-
const lastSaveTimeRef =
|
|
7075
|
-
const trackRef =
|
|
7076
|
-
const controlsTimeoutRef =
|
|
7077
|
-
const lastMousePositionRef =
|
|
7078
|
-
const isUserInteracting =
|
|
7247
|
+
const [playbackRate, setPlaybackRate] = useState15(1);
|
|
7248
|
+
const [showSpeedMenu, setShowSpeedMenu] = useState15(false);
|
|
7249
|
+
const lastSaveTimeRef = useRef10(0);
|
|
7250
|
+
const trackRef = useRef10(null);
|
|
7251
|
+
const controlsTimeoutRef = useRef10(null);
|
|
7252
|
+
const lastMousePositionRef = useRef10({ x: 0, y: 0 });
|
|
7253
|
+
const isUserInteracting = useCallback2(() => {
|
|
7079
7254
|
if (showSpeedMenu) {
|
|
7080
7255
|
return true;
|
|
7081
7256
|
}
|
|
@@ -7092,13 +7267,13 @@ var VideoPlayer = ({
|
|
|
7092
7267
|
}
|
|
7093
7268
|
return false;
|
|
7094
7269
|
}, [showSpeedMenu]);
|
|
7095
|
-
const clearControlsTimeout =
|
|
7270
|
+
const clearControlsTimeout = useCallback2(() => {
|
|
7096
7271
|
if (controlsTimeoutRef.current) {
|
|
7097
7272
|
clearTimeout(controlsTimeoutRef.current);
|
|
7098
7273
|
controlsTimeoutRef.current = null;
|
|
7099
7274
|
}
|
|
7100
7275
|
}, []);
|
|
7101
|
-
const showControlsWithTimer =
|
|
7276
|
+
const showControlsWithTimer = useCallback2(() => {
|
|
7102
7277
|
setShowControls(true);
|
|
7103
7278
|
clearControlsTimeout();
|
|
7104
7279
|
if (isFullscreen) {
|
|
@@ -7113,7 +7288,7 @@ var VideoPlayer = ({
|
|
|
7113
7288
|
}, CONTROLS_HIDE_TIMEOUT);
|
|
7114
7289
|
}
|
|
7115
7290
|
}, [isFullscreen, isPlaying, clearControlsTimeout]);
|
|
7116
|
-
const handleMouseMove =
|
|
7291
|
+
const handleMouseMove = useCallback2(
|
|
7117
7292
|
(event) => {
|
|
7118
7293
|
const currentX = event.clientX;
|
|
7119
7294
|
const currentY = event.clientY;
|
|
@@ -7126,10 +7301,10 @@ var VideoPlayer = ({
|
|
|
7126
7301
|
},
|
|
7127
7302
|
[showControlsWithTimer]
|
|
7128
7303
|
);
|
|
7129
|
-
const handleMouseEnter =
|
|
7304
|
+
const handleMouseEnter = useCallback2(() => {
|
|
7130
7305
|
showControlsWithTimer();
|
|
7131
7306
|
}, [showControlsWithTimer]);
|
|
7132
|
-
const handleMouseLeave =
|
|
7307
|
+
const handleMouseLeave = useCallback2(() => {
|
|
7133
7308
|
const userInteracting = isUserInteracting();
|
|
7134
7309
|
clearControlsTimeout();
|
|
7135
7310
|
if (!isFullscreen && !userInteracting) {
|
|
@@ -7206,7 +7381,7 @@ var VideoPlayer = ({
|
|
|
7206
7381
|
};
|
|
7207
7382
|
}
|
|
7208
7383
|
}, []);
|
|
7209
|
-
const getInitialTime =
|
|
7384
|
+
const getInitialTime = useCallback2(() => {
|
|
7210
7385
|
if (!autoSave || !storageKey) {
|
|
7211
7386
|
return Number.isFinite(initialTime) && initialTime >= 0 ? initialTime : void 0;
|
|
7212
7387
|
}
|
|
@@ -7224,7 +7399,7 @@ var VideoPlayer = ({
|
|
|
7224
7399
|
setCurrentTime(start);
|
|
7225
7400
|
}
|
|
7226
7401
|
}, [getInitialTime]);
|
|
7227
|
-
const saveProgress =
|
|
7402
|
+
const saveProgress = useCallback2(
|
|
7228
7403
|
(time) => {
|
|
7229
7404
|
if (!autoSave || !storageKey) return;
|
|
7230
7405
|
const now = Date.now();
|
|
@@ -7235,7 +7410,7 @@ var VideoPlayer = ({
|
|
|
7235
7410
|
},
|
|
7236
7411
|
[autoSave, storageKey, src]
|
|
7237
7412
|
);
|
|
7238
|
-
const togglePlayPause =
|
|
7413
|
+
const togglePlayPause = useCallback2(async () => {
|
|
7239
7414
|
const video = videoRef.current;
|
|
7240
7415
|
if (!video) return;
|
|
7241
7416
|
if (!video.paused) {
|
|
@@ -7247,7 +7422,7 @@ var VideoPlayer = ({
|
|
|
7247
7422
|
} catch {
|
|
7248
7423
|
}
|
|
7249
7424
|
}, []);
|
|
7250
|
-
const handleVolumeChange =
|
|
7425
|
+
const handleVolumeChange = useCallback2(
|
|
7251
7426
|
(newVolume) => {
|
|
7252
7427
|
const video = videoRef.current;
|
|
7253
7428
|
if (!video) return;
|
|
@@ -7266,7 +7441,7 @@ var VideoPlayer = ({
|
|
|
7266
7441
|
},
|
|
7267
7442
|
[isMuted]
|
|
7268
7443
|
);
|
|
7269
|
-
const toggleMute =
|
|
7444
|
+
const toggleMute = useCallback2(() => {
|
|
7270
7445
|
const video = videoRef.current;
|
|
7271
7446
|
if (!video) return;
|
|
7272
7447
|
if (isMuted) {
|
|
@@ -7280,13 +7455,13 @@ var VideoPlayer = ({
|
|
|
7280
7455
|
setIsMuted(true);
|
|
7281
7456
|
}
|
|
7282
7457
|
}, [isMuted, volume]);
|
|
7283
|
-
const handleSeek =
|
|
7458
|
+
const handleSeek = useCallback2((newTime) => {
|
|
7284
7459
|
const video = videoRef.current;
|
|
7285
7460
|
if (video) {
|
|
7286
7461
|
video.currentTime = newTime;
|
|
7287
7462
|
}
|
|
7288
7463
|
}, []);
|
|
7289
|
-
const toggleFullscreen =
|
|
7464
|
+
const toggleFullscreen = useCallback2(() => {
|
|
7290
7465
|
const container = videoRef.current?.parentElement;
|
|
7291
7466
|
if (!container) return;
|
|
7292
7467
|
if (!isFullscreen && container.requestFullscreen) {
|
|
@@ -7295,23 +7470,23 @@ var VideoPlayer = ({
|
|
|
7295
7470
|
document.exitFullscreen();
|
|
7296
7471
|
}
|
|
7297
7472
|
}, [isFullscreen]);
|
|
7298
|
-
const handleSpeedChange =
|
|
7473
|
+
const handleSpeedChange = useCallback2((speed) => {
|
|
7299
7474
|
if (videoRef.current) {
|
|
7300
7475
|
videoRef.current.playbackRate = speed;
|
|
7301
7476
|
setPlaybackRate(speed);
|
|
7302
7477
|
setShowSpeedMenu(false);
|
|
7303
7478
|
}
|
|
7304
7479
|
}, []);
|
|
7305
|
-
const toggleSpeedMenu =
|
|
7480
|
+
const toggleSpeedMenu = useCallback2(() => {
|
|
7306
7481
|
setShowSpeedMenu(!showSpeedMenu);
|
|
7307
7482
|
}, [showSpeedMenu]);
|
|
7308
|
-
const toggleCaptions =
|
|
7483
|
+
const toggleCaptions = useCallback2(() => {
|
|
7309
7484
|
if (!trackRef.current?.track || !subtitles) return;
|
|
7310
7485
|
const newShowCaptions = !showCaptions;
|
|
7311
7486
|
setShowCaptions(newShowCaptions);
|
|
7312
7487
|
trackRef.current.track.mode = newShowCaptions && subtitles ? "showing" : "hidden";
|
|
7313
7488
|
}, [showCaptions, subtitles]);
|
|
7314
|
-
const checkVideoCompletion =
|
|
7489
|
+
const checkVideoCompletion = useCallback2(
|
|
7315
7490
|
(progressPercent) => {
|
|
7316
7491
|
if (progressPercent >= 95 && !hasCompleted) {
|
|
7317
7492
|
setHasCompleted(true);
|
|
@@ -7320,7 +7495,7 @@ var VideoPlayer = ({
|
|
|
7320
7495
|
},
|
|
7321
7496
|
[hasCompleted, onVideoComplete]
|
|
7322
7497
|
);
|
|
7323
|
-
const handleTimeUpdate =
|
|
7498
|
+
const handleTimeUpdate = useCallback2(() => {
|
|
7324
7499
|
const video = videoRef.current;
|
|
7325
7500
|
if (!video) return;
|
|
7326
7501
|
const current = video.currentTime;
|
|
@@ -7333,7 +7508,7 @@ var VideoPlayer = ({
|
|
|
7333
7508
|
checkVideoCompletion(progressPercent);
|
|
7334
7509
|
}
|
|
7335
7510
|
}, [duration, saveProgress, onTimeUpdate, onProgress, checkVideoCompletion]);
|
|
7336
|
-
const handleLoadedMetadata =
|
|
7511
|
+
const handleLoadedMetadata = useCallback2(() => {
|
|
7337
7512
|
if (videoRef.current) {
|
|
7338
7513
|
setDuration(videoRef.current.duration);
|
|
7339
7514
|
}
|
|
@@ -7365,13 +7540,13 @@ var VideoPlayer = ({
|
|
|
7365
7540
|
};
|
|
7366
7541
|
}, [isPlaying, clearControlsTimeout]);
|
|
7367
7542
|
const progressPercentage = duration > 0 ? currentTime / duration * 100 : 0;
|
|
7368
|
-
const getTopControlsOpacity =
|
|
7543
|
+
const getTopControlsOpacity = useCallback2(() => {
|
|
7369
7544
|
return showControls ? "opacity-100" : "opacity-0";
|
|
7370
7545
|
}, [showControls]);
|
|
7371
|
-
const getBottomControlsOpacity =
|
|
7546
|
+
const getBottomControlsOpacity = useCallback2(() => {
|
|
7372
7547
|
return showControls ? "opacity-100" : "opacity-0";
|
|
7373
7548
|
}, [showControls]);
|
|
7374
|
-
const handleVideoKeyDown =
|
|
7549
|
+
const handleVideoKeyDown = useCallback2(
|
|
7375
7550
|
(e) => {
|
|
7376
7551
|
if (e.key) {
|
|
7377
7552
|
e.stopPropagation();
|
|
@@ -7426,9 +7601,9 @@ var VideoPlayer = ({
|
|
|
7426
7601
|
toggleFullscreen
|
|
7427
7602
|
]
|
|
7428
7603
|
);
|
|
7429
|
-
return /* @__PURE__ */
|
|
7430
|
-
(title || subtitleText) && /* @__PURE__ */
|
|
7431
|
-
title && /* @__PURE__ */
|
|
7604
|
+
return /* @__PURE__ */ jsxs31("div", { className: cn("flex flex-col", className), children: [
|
|
7605
|
+
(title || subtitleText) && /* @__PURE__ */ jsx37("div", { className: "bg-subject-1 px-8 py-4 flex items-end justify-between min-h-20", children: /* @__PURE__ */ jsxs31("div", { className: "flex flex-col gap-1", children: [
|
|
7606
|
+
title && /* @__PURE__ */ jsx37(
|
|
7432
7607
|
Text_default,
|
|
7433
7608
|
{
|
|
7434
7609
|
as: "h2",
|
|
@@ -7439,7 +7614,7 @@ var VideoPlayer = ({
|
|
|
7439
7614
|
children: title
|
|
7440
7615
|
}
|
|
7441
7616
|
),
|
|
7442
|
-
subtitleText && /* @__PURE__ */
|
|
7617
|
+
subtitleText && /* @__PURE__ */ jsx37(
|
|
7443
7618
|
Text_default,
|
|
7444
7619
|
{
|
|
7445
7620
|
as: "p",
|
|
@@ -7451,7 +7626,7 @@ var VideoPlayer = ({
|
|
|
7451
7626
|
}
|
|
7452
7627
|
)
|
|
7453
7628
|
] }) }),
|
|
7454
|
-
/* @__PURE__ */
|
|
7629
|
+
/* @__PURE__ */ jsxs31(
|
|
7455
7630
|
"section",
|
|
7456
7631
|
{
|
|
7457
7632
|
className: cn(
|
|
@@ -7466,7 +7641,7 @@ var VideoPlayer = ({
|
|
|
7466
7641
|
onTouchStart: handleMouseEnter,
|
|
7467
7642
|
onMouseLeave: handleMouseLeave,
|
|
7468
7643
|
children: [
|
|
7469
|
-
/* @__PURE__ */
|
|
7644
|
+
/* @__PURE__ */ jsx37(
|
|
7470
7645
|
"video",
|
|
7471
7646
|
{
|
|
7472
7647
|
ref: videoRef,
|
|
@@ -7480,7 +7655,7 @@ var VideoPlayer = ({
|
|
|
7480
7655
|
onKeyDown: handleVideoKeyDown,
|
|
7481
7656
|
tabIndex: 0,
|
|
7482
7657
|
"aria-label": title ? `Video: ${title}` : "Video player",
|
|
7483
|
-
children: /* @__PURE__ */
|
|
7658
|
+
children: /* @__PURE__ */ jsx37(
|
|
7484
7659
|
"track",
|
|
7485
7660
|
{
|
|
7486
7661
|
ref: trackRef,
|
|
@@ -7493,26 +7668,26 @@ var VideoPlayer = ({
|
|
|
7493
7668
|
)
|
|
7494
7669
|
}
|
|
7495
7670
|
),
|
|
7496
|
-
!isPlaying && /* @__PURE__ */
|
|
7671
|
+
!isPlaying && /* @__PURE__ */ jsx37("div", { className: "absolute inset-0 flex items-center justify-center bg-black/30 transition-opacity", children: /* @__PURE__ */ jsx37(
|
|
7497
7672
|
IconButton_default,
|
|
7498
7673
|
{
|
|
7499
|
-
icon: /* @__PURE__ */
|
|
7674
|
+
icon: /* @__PURE__ */ jsx37(Play2, { size: 32, weight: "regular", className: "ml-1" }),
|
|
7500
7675
|
onClick: togglePlayPause,
|
|
7501
7676
|
"aria-label": "Play video",
|
|
7502
7677
|
className: "!bg-transparent !text-white !w-auto !h-auto hover:!bg-transparent hover:!text-gray-200"
|
|
7503
7678
|
}
|
|
7504
7679
|
) }),
|
|
7505
|
-
/* @__PURE__ */
|
|
7680
|
+
/* @__PURE__ */ jsx37(
|
|
7506
7681
|
"div",
|
|
7507
7682
|
{
|
|
7508
7683
|
className: cn(
|
|
7509
7684
|
"absolute top-0 left-0 right-0 p-4 bg-gradient-to-b from-black/70 to-transparent transition-opacity",
|
|
7510
7685
|
getTopControlsOpacity()
|
|
7511
7686
|
),
|
|
7512
|
-
children: /* @__PURE__ */
|
|
7687
|
+
children: /* @__PURE__ */ jsx37("div", { className: "flex justify-start", children: /* @__PURE__ */ jsx37(
|
|
7513
7688
|
IconButton_default,
|
|
7514
7689
|
{
|
|
7515
|
-
icon: isFullscreen ? /* @__PURE__ */
|
|
7690
|
+
icon: isFullscreen ? /* @__PURE__ */ jsx37(ArrowsInSimple, { size: 24 }) : /* @__PURE__ */ jsx37(ArrowsOutSimple, { size: 24 }),
|
|
7516
7691
|
onClick: toggleFullscreen,
|
|
7517
7692
|
"aria-label": isFullscreen ? "Exit fullscreen" : "Enter fullscreen",
|
|
7518
7693
|
className: "!bg-transparent !text-white hover:!bg-white/20"
|
|
@@ -7520,7 +7695,7 @@ var VideoPlayer = ({
|
|
|
7520
7695
|
) })
|
|
7521
7696
|
}
|
|
7522
7697
|
),
|
|
7523
|
-
/* @__PURE__ */
|
|
7698
|
+
/* @__PURE__ */ jsxs31(
|
|
7524
7699
|
"div",
|
|
7525
7700
|
{
|
|
7526
7701
|
className: cn(
|
|
@@ -7528,7 +7703,7 @@ var VideoPlayer = ({
|
|
|
7528
7703
|
getBottomControlsOpacity()
|
|
7529
7704
|
),
|
|
7530
7705
|
children: [
|
|
7531
|
-
/* @__PURE__ */
|
|
7706
|
+
/* @__PURE__ */ jsx37(
|
|
7532
7707
|
ProgressBar2,
|
|
7533
7708
|
{
|
|
7534
7709
|
currentTime,
|
|
@@ -7537,18 +7712,18 @@ var VideoPlayer = ({
|
|
|
7537
7712
|
onSeek: handleSeek
|
|
7538
7713
|
}
|
|
7539
7714
|
),
|
|
7540
|
-
/* @__PURE__ */
|
|
7541
|
-
/* @__PURE__ */
|
|
7542
|
-
/* @__PURE__ */
|
|
7715
|
+
/* @__PURE__ */ jsxs31("div", { className: "flex items-center justify-between px-4 pb-4", children: [
|
|
7716
|
+
/* @__PURE__ */ jsxs31("div", { className: "flex items-center gap-4", children: [
|
|
7717
|
+
/* @__PURE__ */ jsx37(
|
|
7543
7718
|
IconButton_default,
|
|
7544
7719
|
{
|
|
7545
|
-
icon: isPlaying ? /* @__PURE__ */
|
|
7720
|
+
icon: isPlaying ? /* @__PURE__ */ jsx37(Pause, { size: 24 }) : /* @__PURE__ */ jsx37(Play2, { size: 24 }),
|
|
7546
7721
|
onClick: togglePlayPause,
|
|
7547
7722
|
"aria-label": isPlaying ? "Pause" : "Play",
|
|
7548
7723
|
className: "!bg-transparent !text-white hover:!bg-white/20"
|
|
7549
7724
|
}
|
|
7550
7725
|
),
|
|
7551
|
-
/* @__PURE__ */
|
|
7726
|
+
/* @__PURE__ */ jsx37(
|
|
7552
7727
|
VolumeControls,
|
|
7553
7728
|
{
|
|
7554
7729
|
volume,
|
|
@@ -7557,10 +7732,10 @@ var VideoPlayer = ({
|
|
|
7557
7732
|
onToggleMute: toggleMute
|
|
7558
7733
|
}
|
|
7559
7734
|
),
|
|
7560
|
-
subtitles && /* @__PURE__ */
|
|
7735
|
+
subtitles && /* @__PURE__ */ jsx37(
|
|
7561
7736
|
IconButton_default,
|
|
7562
7737
|
{
|
|
7563
|
-
icon: /* @__PURE__ */
|
|
7738
|
+
icon: /* @__PURE__ */ jsx37(ClosedCaptioning, { size: 24 }),
|
|
7564
7739
|
onClick: toggleCaptions,
|
|
7565
7740
|
"aria-label": showCaptions ? "Hide captions" : "Show captions",
|
|
7566
7741
|
className: cn(
|
|
@@ -7569,13 +7744,13 @@ var VideoPlayer = ({
|
|
|
7569
7744
|
)
|
|
7570
7745
|
}
|
|
7571
7746
|
),
|
|
7572
|
-
/* @__PURE__ */
|
|
7747
|
+
/* @__PURE__ */ jsxs31(Text_default, { size: "sm", weight: "medium", color: "text-white", children: [
|
|
7573
7748
|
formatTime(currentTime),
|
|
7574
7749
|
" / ",
|
|
7575
7750
|
formatTime(duration)
|
|
7576
7751
|
] })
|
|
7577
7752
|
] }),
|
|
7578
|
-
/* @__PURE__ */
|
|
7753
|
+
/* @__PURE__ */ jsx37("div", { className: "flex items-center gap-4", children: /* @__PURE__ */ jsx37(
|
|
7579
7754
|
SpeedMenu,
|
|
7580
7755
|
{
|
|
7581
7756
|
showSpeedMenu,
|
|
@@ -7596,9 +7771,9 @@ var VideoPlayer = ({
|
|
|
7596
7771
|
var VideoPlayer_default = VideoPlayer;
|
|
7597
7772
|
|
|
7598
7773
|
// src/components/Whiteboard/Whiteboard.tsx
|
|
7599
|
-
import { useCallback as
|
|
7774
|
+
import { useCallback as useCallback3, useState as useState16 } from "react";
|
|
7600
7775
|
import { ArrowsOut } from "phosphor-react";
|
|
7601
|
-
import { Fragment as
|
|
7776
|
+
import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
7602
7777
|
var IMAGE_WIDTH = 225;
|
|
7603
7778
|
var IMAGE_HEIGHT = 90;
|
|
7604
7779
|
var Whiteboard = ({
|
|
@@ -7609,8 +7784,8 @@ var Whiteboard = ({
|
|
|
7609
7784
|
imagesPerRow = 2,
|
|
7610
7785
|
...rest
|
|
7611
7786
|
}) => {
|
|
7612
|
-
const [imageErrors, setImageErrors] =
|
|
7613
|
-
const handleDownload =
|
|
7787
|
+
const [imageErrors, setImageErrors] = useState16(/* @__PURE__ */ new Set());
|
|
7788
|
+
const handleDownload = useCallback3(
|
|
7614
7789
|
(image) => {
|
|
7615
7790
|
if (onDownload) {
|
|
7616
7791
|
onDownload(image);
|
|
@@ -7627,7 +7802,7 @@ var Whiteboard = ({
|
|
|
7627
7802
|
},
|
|
7628
7803
|
[onDownload]
|
|
7629
7804
|
);
|
|
7630
|
-
const handleImageError =
|
|
7805
|
+
const handleImageError = useCallback3((imageId) => {
|
|
7631
7806
|
setImageErrors((prev) => new Set(prev).add(imageId));
|
|
7632
7807
|
}, []);
|
|
7633
7808
|
const gridColsClass = images?.length === 1 ? "grid-cols-1" : {
|
|
@@ -7636,7 +7811,7 @@ var Whiteboard = ({
|
|
|
7636
7811
|
4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
|
|
7637
7812
|
}[imagesPerRow];
|
|
7638
7813
|
if (!images || images.length === 0) {
|
|
7639
|
-
return /* @__PURE__ */
|
|
7814
|
+
return /* @__PURE__ */ jsx38(
|
|
7640
7815
|
"div",
|
|
7641
7816
|
{
|
|
7642
7817
|
className: cn(
|
|
@@ -7644,11 +7819,11 @@ var Whiteboard = ({
|
|
|
7644
7819
|
className
|
|
7645
7820
|
),
|
|
7646
7821
|
...rest,
|
|
7647
|
-
children: /* @__PURE__ */
|
|
7822
|
+
children: /* @__PURE__ */ jsx38("p", { className: "text-gray-400 text-sm", children: "Nenhuma imagem dispon\xEDvel" })
|
|
7648
7823
|
}
|
|
7649
7824
|
);
|
|
7650
7825
|
}
|
|
7651
|
-
return /* @__PURE__ */
|
|
7826
|
+
return /* @__PURE__ */ jsx38(
|
|
7652
7827
|
"div",
|
|
7653
7828
|
{
|
|
7654
7829
|
className: cn(
|
|
@@ -7656,7 +7831,7 @@ var Whiteboard = ({
|
|
|
7656
7831
|
className
|
|
7657
7832
|
),
|
|
7658
7833
|
...rest,
|
|
7659
|
-
children: /* @__PURE__ */
|
|
7834
|
+
children: /* @__PURE__ */ jsx38("div", { className: cn("grid gap-4", gridColsClass), children: images.map((image) => /* @__PURE__ */ jsxs32(
|
|
7660
7835
|
"div",
|
|
7661
7836
|
{
|
|
7662
7837
|
className: "relative group overflow-hidden bg-gray-100 rounded-lg",
|
|
@@ -7664,7 +7839,7 @@ var Whiteboard = ({
|
|
|
7664
7839
|
width: `${IMAGE_WIDTH}px`
|
|
7665
7840
|
},
|
|
7666
7841
|
children: [
|
|
7667
|
-
/* @__PURE__ */
|
|
7842
|
+
/* @__PURE__ */ jsx38(
|
|
7668
7843
|
"div",
|
|
7669
7844
|
{
|
|
7670
7845
|
className: "relative",
|
|
@@ -7672,8 +7847,8 @@ var Whiteboard = ({
|
|
|
7672
7847
|
width: `${IMAGE_WIDTH}px`,
|
|
7673
7848
|
height: `${IMAGE_HEIGHT}px`
|
|
7674
7849
|
},
|
|
7675
|
-
children: imageErrors.has(image.id) ? /* @__PURE__ */
|
|
7676
|
-
/* @__PURE__ */
|
|
7850
|
+
children: imageErrors.has(image.id) ? /* @__PURE__ */ jsx38("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-200", children: /* @__PURE__ */ jsx38("p", { className: "text-gray-500 text-sm text-center px-2", children: "Imagem indispon\xEDvel" }) }) : /* @__PURE__ */ jsxs32(Fragment8, { children: [
|
|
7851
|
+
/* @__PURE__ */ jsx38(
|
|
7677
7852
|
"img",
|
|
7678
7853
|
{
|
|
7679
7854
|
src: image.imageUrl,
|
|
@@ -7683,18 +7858,18 @@ var Whiteboard = ({
|
|
|
7683
7858
|
onError: () => handleImageError(image.id)
|
|
7684
7859
|
}
|
|
7685
7860
|
),
|
|
7686
|
-
/* @__PURE__ */
|
|
7861
|
+
/* @__PURE__ */ jsx38("div", { className: "absolute inset-0 bg-gradient-to-t from-black/20 to-transparent" })
|
|
7687
7862
|
] })
|
|
7688
7863
|
}
|
|
7689
7864
|
),
|
|
7690
|
-
showDownload && /* @__PURE__ */
|
|
7865
|
+
showDownload && /* @__PURE__ */ jsx38(
|
|
7691
7866
|
"button",
|
|
7692
7867
|
{
|
|
7693
7868
|
type: "button",
|
|
7694
7869
|
onClick: () => handleDownload(image),
|
|
7695
7870
|
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",
|
|
7696
7871
|
"aria-label": `Download ${image.title || "imagem"}`,
|
|
7697
|
-
children: /* @__PURE__ */
|
|
7872
|
+
children: /* @__PURE__ */ jsx38(
|
|
7698
7873
|
ArrowsOut,
|
|
7699
7874
|
{
|
|
7700
7875
|
size: 24,
|
|
@@ -7718,12 +7893,12 @@ import {
|
|
|
7718
7893
|
createContext,
|
|
7719
7894
|
useContext,
|
|
7720
7895
|
useEffect as useEffect14,
|
|
7721
|
-
useState as
|
|
7722
|
-
useCallback as
|
|
7896
|
+
useState as useState17,
|
|
7897
|
+
useCallback as useCallback4,
|
|
7723
7898
|
useMemo as useMemo4
|
|
7724
7899
|
} from "react";
|
|
7725
7900
|
import { useLocation, Navigate } from "react-router-dom";
|
|
7726
|
-
import { Fragment as
|
|
7901
|
+
import { Fragment as Fragment9, jsx as jsx39 } from "react/jsx-runtime";
|
|
7727
7902
|
var AuthContext = createContext(void 0);
|
|
7728
7903
|
var AuthProvider = ({
|
|
7729
7904
|
children,
|
|
@@ -7734,12 +7909,12 @@ var AuthProvider = ({
|
|
|
7734
7909
|
getSessionFn,
|
|
7735
7910
|
getTokensFn
|
|
7736
7911
|
}) => {
|
|
7737
|
-
const [authState, setAuthState] =
|
|
7912
|
+
const [authState, setAuthState] = useState17({
|
|
7738
7913
|
isAuthenticated: false,
|
|
7739
7914
|
isLoading: true,
|
|
7740
7915
|
...initialAuthState
|
|
7741
7916
|
});
|
|
7742
|
-
const checkAuth =
|
|
7917
|
+
const checkAuth = useCallback4(async () => {
|
|
7743
7918
|
try {
|
|
7744
7919
|
setAuthState((prev) => ({ ...prev, isLoading: true }));
|
|
7745
7920
|
if (!checkAuthFn) {
|
|
@@ -7770,7 +7945,7 @@ var AuthProvider = ({
|
|
|
7770
7945
|
return false;
|
|
7771
7946
|
}
|
|
7772
7947
|
}, [checkAuthFn, getUserFn, getSessionFn, getTokensFn]);
|
|
7773
|
-
const signOut =
|
|
7948
|
+
const signOut = useCallback4(() => {
|
|
7774
7949
|
if (signOutFn) {
|
|
7775
7950
|
signOutFn();
|
|
7776
7951
|
}
|
|
@@ -7793,7 +7968,7 @@ var AuthProvider = ({
|
|
|
7793
7968
|
}),
|
|
7794
7969
|
[authState, checkAuth, signOut]
|
|
7795
7970
|
);
|
|
7796
|
-
return /* @__PURE__ */
|
|
7971
|
+
return /* @__PURE__ */ jsx39(AuthContext.Provider, { value: contextValue, children });
|
|
7797
7972
|
};
|
|
7798
7973
|
var useAuth = () => {
|
|
7799
7974
|
const context = useContext(AuthContext);
|
|
@@ -7809,9 +7984,9 @@ var ProtectedRoute = ({
|
|
|
7809
7984
|
additionalCheck
|
|
7810
7985
|
}) => {
|
|
7811
7986
|
const { isAuthenticated, isLoading, ...authState } = useAuth();
|
|
7812
|
-
const defaultLoadingComponent = /* @__PURE__ */
|
|
7987
|
+
const defaultLoadingComponent = /* @__PURE__ */ jsx39("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx39("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
|
|
7813
7988
|
if (isLoading) {
|
|
7814
|
-
return /* @__PURE__ */
|
|
7989
|
+
return /* @__PURE__ */ jsx39(Fragment9, { children: loadingComponent || defaultLoadingComponent });
|
|
7815
7990
|
}
|
|
7816
7991
|
if (!isAuthenticated) {
|
|
7817
7992
|
if (typeof window !== "undefined") {
|
|
@@ -7822,12 +7997,12 @@ var ProtectedRoute = ({
|
|
|
7822
7997
|
return null;
|
|
7823
7998
|
}
|
|
7824
7999
|
}
|
|
7825
|
-
return /* @__PURE__ */
|
|
8000
|
+
return /* @__PURE__ */ jsx39(Navigate, { to: redirectTo, replace: true });
|
|
7826
8001
|
}
|
|
7827
8002
|
if (additionalCheck && !additionalCheck({ isAuthenticated, isLoading, ...authState })) {
|
|
7828
|
-
return /* @__PURE__ */
|
|
8003
|
+
return /* @__PURE__ */ jsx39(Navigate, { to: redirectTo, replace: true });
|
|
7829
8004
|
}
|
|
7830
|
-
return /* @__PURE__ */
|
|
8005
|
+
return /* @__PURE__ */ jsx39(Fragment9, { children });
|
|
7831
8006
|
};
|
|
7832
8007
|
var PublicRoute = ({
|
|
7833
8008
|
children,
|
|
@@ -7837,15 +8012,15 @@ var PublicRoute = ({
|
|
|
7837
8012
|
}) => {
|
|
7838
8013
|
const { isAuthenticated, isLoading } = useAuth();
|
|
7839
8014
|
if (checkAuthBeforeRender && isLoading) {
|
|
7840
|
-
return /* @__PURE__ */
|
|
8015
|
+
return /* @__PURE__ */ jsx39("div", { className: "flex items-center justify-center min-h-screen", children: /* @__PURE__ */ jsx39("div", { className: "text-text-950 text-lg", children: "Carregando..." }) });
|
|
7841
8016
|
}
|
|
7842
8017
|
if (isAuthenticated && redirectIfAuthenticated) {
|
|
7843
|
-
return /* @__PURE__ */
|
|
8018
|
+
return /* @__PURE__ */ jsx39(Navigate, { to: redirectTo, replace: true });
|
|
7844
8019
|
}
|
|
7845
|
-
return /* @__PURE__ */
|
|
8020
|
+
return /* @__PURE__ */ jsx39(Fragment9, { children });
|
|
7846
8021
|
};
|
|
7847
8022
|
var withAuth = (Component, options = {}) => {
|
|
7848
|
-
return (props) => /* @__PURE__ */
|
|
8023
|
+
return (props) => /* @__PURE__ */ jsx39(ProtectedRoute, { ...options, children: /* @__PURE__ */ jsx39(Component, { ...props }) });
|
|
7849
8024
|
};
|
|
7850
8025
|
var useAuthGuard = (options = {}) => {
|
|
7851
8026
|
const authState = useAuth();
|
|
@@ -7860,7 +8035,7 @@ var useAuthGuard = (options = {}) => {
|
|
|
7860
8035
|
var useRouteAuth = (fallbackPath = "/") => {
|
|
7861
8036
|
const { isAuthenticated, isLoading } = useAuth();
|
|
7862
8037
|
const location = useLocation();
|
|
7863
|
-
const redirectToLogin = () => /* @__PURE__ */
|
|
8038
|
+
const redirectToLogin = () => /* @__PURE__ */ jsx39(Navigate, { to: fallbackPath, state: { from: location }, replace: true });
|
|
7864
8039
|
return {
|
|
7865
8040
|
isAuthenticated,
|
|
7866
8041
|
isLoading,
|
|
@@ -7936,7 +8111,7 @@ function createZustandAuthAdapter(useAuthStore) {
|
|
|
7936
8111
|
}
|
|
7937
8112
|
|
|
7938
8113
|
// src/components/Auth/useUrlAuthentication.ts
|
|
7939
|
-
import { useEffect as useEffect15, useRef as
|
|
8114
|
+
import { useEffect as useEffect15, useRef as useRef11 } from "react";
|
|
7940
8115
|
import { useLocation as useLocation2 } from "react-router-dom";
|
|
7941
8116
|
var getAuthParams = (location, extractParams) => {
|
|
7942
8117
|
const searchParams = new URLSearchParams(location.search);
|
|
@@ -7984,7 +8159,7 @@ var handleUserData = (responseData, setUser) => {
|
|
|
7984
8159
|
};
|
|
7985
8160
|
function useUrlAuthentication(options) {
|
|
7986
8161
|
const location = useLocation2();
|
|
7987
|
-
const processedRef =
|
|
8162
|
+
const processedRef = useRef11(false);
|
|
7988
8163
|
useEffect15(() => {
|
|
7989
8164
|
const handleAuthentication = async () => {
|
|
7990
8165
|
if (processedRef.current) {
|
|
@@ -8077,13 +8252,13 @@ import {
|
|
|
8077
8252
|
XCircle as XCircle5
|
|
8078
8253
|
} from "phosphor-react";
|
|
8079
8254
|
import {
|
|
8080
|
-
forwardRef as
|
|
8255
|
+
forwardRef as forwardRef20,
|
|
8081
8256
|
useEffect as useEffect16,
|
|
8082
8257
|
useMemo as useMemo6,
|
|
8083
8258
|
useId as useId10,
|
|
8084
|
-
useState as
|
|
8085
|
-
useCallback as
|
|
8086
|
-
useRef as
|
|
8259
|
+
useState as useState18,
|
|
8260
|
+
useCallback as useCallback5,
|
|
8261
|
+
useRef as useRef12
|
|
8087
8262
|
} from "react";
|
|
8088
8263
|
|
|
8089
8264
|
// src/components/Quiz/useQuizStore.ts
|
|
@@ -8720,13 +8895,13 @@ var useQuizStore = create7()(
|
|
|
8720
8895
|
var mock_image_question_default = "./mock-image-question-HEZCLFDL.png";
|
|
8721
8896
|
|
|
8722
8897
|
// src/components/Quiz/Quiz.tsx
|
|
8723
|
-
import { Fragment as
|
|
8898
|
+
import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
8724
8899
|
var getStatusBadge = (status) => {
|
|
8725
8900
|
switch (status) {
|
|
8726
8901
|
case "correct":
|
|
8727
|
-
return /* @__PURE__ */
|
|
8902
|
+
return /* @__PURE__ */ jsx40(Badge_default, { variant: "solid", action: "success", iconLeft: /* @__PURE__ */ jsx40(CheckCircle6, {}), children: "Resposta correta" });
|
|
8728
8903
|
case "incorrect":
|
|
8729
|
-
return /* @__PURE__ */
|
|
8904
|
+
return /* @__PURE__ */ jsx40(Badge_default, { variant: "solid", action: "error", iconLeft: /* @__PURE__ */ jsx40(XCircle5, {}), children: "Resposta incorreta" });
|
|
8730
8905
|
default:
|
|
8731
8906
|
return null;
|
|
8732
8907
|
}
|
|
@@ -8739,17 +8914,17 @@ var getStatusStyles = (variantCorrect) => {
|
|
|
8739
8914
|
return "bg-error-background border-error-300";
|
|
8740
8915
|
}
|
|
8741
8916
|
};
|
|
8742
|
-
var Quiz =
|
|
8917
|
+
var Quiz = forwardRef20(({ children, className, variant = "default", ...props }, ref) => {
|
|
8743
8918
|
const { setVariant } = useQuizStore();
|
|
8744
8919
|
useEffect16(() => {
|
|
8745
8920
|
setVariant(variant);
|
|
8746
8921
|
}, [variant, setVariant]);
|
|
8747
|
-
return /* @__PURE__ */
|
|
8922
|
+
return /* @__PURE__ */ jsx40("div", { ref, className: cn("flex flex-col", className), ...props, children });
|
|
8748
8923
|
});
|
|
8749
|
-
var QuizHeaderResult =
|
|
8924
|
+
var QuizHeaderResult = forwardRef20(
|
|
8750
8925
|
({ className, ...props }, ref) => {
|
|
8751
8926
|
const { getQuestionResultByQuestionId, getCurrentQuestion } = useQuizStore();
|
|
8752
|
-
const [status, setStatus] =
|
|
8927
|
+
const [status, setStatus] = useState18(void 0);
|
|
8753
8928
|
useEffect16(() => {
|
|
8754
8929
|
const cq = getCurrentQuestion();
|
|
8755
8930
|
if (!cq) {
|
|
@@ -8785,7 +8960,7 @@ var QuizHeaderResult = forwardRef19(
|
|
|
8785
8960
|
return "N\xE3o foi dessa vez...voc\xEA deixou a resposta em branco";
|
|
8786
8961
|
}
|
|
8787
8962
|
};
|
|
8788
|
-
return /* @__PURE__ */
|
|
8963
|
+
return /* @__PURE__ */ jsxs33(
|
|
8789
8964
|
"div",
|
|
8790
8965
|
{
|
|
8791
8966
|
ref,
|
|
@@ -8796,14 +8971,14 @@ var QuizHeaderResult = forwardRef19(
|
|
|
8796
8971
|
),
|
|
8797
8972
|
...props,
|
|
8798
8973
|
children: [
|
|
8799
|
-
/* @__PURE__ */
|
|
8800
|
-
/* @__PURE__ */
|
|
8974
|
+
/* @__PURE__ */ jsx40("p", { className: "text-text-950 font-bold text-lg", children: "Resultado" }),
|
|
8975
|
+
/* @__PURE__ */ jsx40("p", { className: "text-text-700 text-md", children: getLabelByAnswersStatus() })
|
|
8801
8976
|
]
|
|
8802
8977
|
}
|
|
8803
8978
|
);
|
|
8804
8979
|
}
|
|
8805
8980
|
);
|
|
8806
|
-
var QuizTitle =
|
|
8981
|
+
var QuizTitle = forwardRef20(
|
|
8807
8982
|
({ className, ...props }, ref) => {
|
|
8808
8983
|
const {
|
|
8809
8984
|
currentQuestionIndex,
|
|
@@ -8813,7 +8988,7 @@ var QuizTitle = forwardRef19(
|
|
|
8813
8988
|
formatTime: formatTime2,
|
|
8814
8989
|
isStarted
|
|
8815
8990
|
} = useQuizStore();
|
|
8816
|
-
const [showExitConfirmation, setShowExitConfirmation] =
|
|
8991
|
+
const [showExitConfirmation, setShowExitConfirmation] = useState18(false);
|
|
8817
8992
|
const totalQuestions = getTotalQuestions();
|
|
8818
8993
|
const quizTitle = getQuizTitle();
|
|
8819
8994
|
const handleBackClick = () => {
|
|
@@ -8830,8 +9005,8 @@ var QuizTitle = forwardRef19(
|
|
|
8830
9005
|
const handleCancelExit = () => {
|
|
8831
9006
|
setShowExitConfirmation(false);
|
|
8832
9007
|
};
|
|
8833
|
-
return /* @__PURE__ */
|
|
8834
|
-
/* @__PURE__ */
|
|
9008
|
+
return /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9009
|
+
/* @__PURE__ */ jsxs33(
|
|
8835
9010
|
"div",
|
|
8836
9011
|
{
|
|
8837
9012
|
ref,
|
|
@@ -8841,24 +9016,24 @@ var QuizTitle = forwardRef19(
|
|
|
8841
9016
|
),
|
|
8842
9017
|
...props,
|
|
8843
9018
|
children: [
|
|
8844
|
-
/* @__PURE__ */
|
|
9019
|
+
/* @__PURE__ */ jsx40(
|
|
8845
9020
|
IconButton_default,
|
|
8846
9021
|
{
|
|
8847
|
-
icon: /* @__PURE__ */
|
|
9022
|
+
icon: /* @__PURE__ */ jsx40(CaretLeft3, { size: 24 }),
|
|
8848
9023
|
size: "md",
|
|
8849
9024
|
"aria-label": "Voltar",
|
|
8850
9025
|
onClick: handleBackClick
|
|
8851
9026
|
}
|
|
8852
9027
|
),
|
|
8853
|
-
/* @__PURE__ */
|
|
8854
|
-
/* @__PURE__ */
|
|
8855
|
-
/* @__PURE__ */
|
|
9028
|
+
/* @__PURE__ */ jsxs33("span", { className: "flex flex-col gap-2 text-center", children: [
|
|
9029
|
+
/* @__PURE__ */ jsx40("p", { className: "text-text-950 font-bold text-md", children: quizTitle }),
|
|
9030
|
+
/* @__PURE__ */ jsx40("p", { className: "text-text-600 text-xs", children: totalQuestions > 0 ? `${currentQuestionIndex + 1} de ${totalQuestions}` : "0 de 0" })
|
|
8856
9031
|
] }),
|
|
8857
|
-
/* @__PURE__ */
|
|
9032
|
+
/* @__PURE__ */ jsx40("span", { className: "flex flex-row items-center justify-center", children: /* @__PURE__ */ jsx40(Badge_default, { variant: "outlined", action: "info", iconLeft: /* @__PURE__ */ jsx40(Clock2, {}), children: isStarted ? formatTime2(timeElapsed) : "00:00" }) })
|
|
8858
9033
|
]
|
|
8859
9034
|
}
|
|
8860
9035
|
),
|
|
8861
|
-
/* @__PURE__ */
|
|
9036
|
+
/* @__PURE__ */ jsx40(
|
|
8862
9037
|
AlertDialog,
|
|
8863
9038
|
{
|
|
8864
9039
|
isOpen: showExitConfirmation,
|
|
@@ -8874,15 +9049,15 @@ var QuizTitle = forwardRef19(
|
|
|
8874
9049
|
] });
|
|
8875
9050
|
}
|
|
8876
9051
|
);
|
|
8877
|
-
var QuizSubTitle =
|
|
9052
|
+
var QuizSubTitle = forwardRef20(
|
|
8878
9053
|
({ subTitle, ...props }, ref) => {
|
|
8879
|
-
return /* @__PURE__ */
|
|
9054
|
+
return /* @__PURE__ */ jsx40("div", { className: "px-4 pb-2 pt-6", ...props, ref, children: /* @__PURE__ */ jsx40("p", { className: "font-bold text-lg text-text-950", children: subTitle }) });
|
|
8880
9055
|
}
|
|
8881
9056
|
);
|
|
8882
9057
|
var QuizHeader = () => {
|
|
8883
9058
|
const { getCurrentQuestion, currentQuestionIndex } = useQuizStore();
|
|
8884
9059
|
const currentQuestion = getCurrentQuestion();
|
|
8885
|
-
return /* @__PURE__ */
|
|
9060
|
+
return /* @__PURE__ */ jsx40(
|
|
8886
9061
|
HeaderAlternative,
|
|
8887
9062
|
{
|
|
8888
9063
|
title: currentQuestion ? `Quest\xE3o ${currentQuestionIndex + 1}` : "Quest\xE3o",
|
|
@@ -8891,8 +9066,8 @@ var QuizHeader = () => {
|
|
|
8891
9066
|
}
|
|
8892
9067
|
);
|
|
8893
9068
|
};
|
|
8894
|
-
var QuizContainer =
|
|
8895
|
-
return /* @__PURE__ */
|
|
9069
|
+
var QuizContainer = forwardRef20(({ children, className, ...props }, ref) => {
|
|
9070
|
+
return /* @__PURE__ */ jsx40(
|
|
8896
9071
|
"div",
|
|
8897
9072
|
{
|
|
8898
9073
|
ref,
|
|
@@ -8905,7 +9080,7 @@ var QuizContainer = forwardRef19(({ children, className, ...props }, ref) => {
|
|
|
8905
9080
|
}
|
|
8906
9081
|
);
|
|
8907
9082
|
});
|
|
8908
|
-
var QuizContent =
|
|
9083
|
+
var QuizContent = forwardRef20(({ paddingBottom }) => {
|
|
8909
9084
|
const { getCurrentQuestion } = useQuizStore();
|
|
8910
9085
|
const currentQuestion = getCurrentQuestion();
|
|
8911
9086
|
const questionComponents = {
|
|
@@ -8918,7 +9093,7 @@ var QuizContent = forwardRef19(({ paddingBottom }) => {
|
|
|
8918
9093
|
["IMAGEM" /* IMAGEM */]: QuizImageQuestion
|
|
8919
9094
|
};
|
|
8920
9095
|
const QuestionComponent = currentQuestion ? questionComponents[currentQuestion.questionType] : null;
|
|
8921
|
-
return QuestionComponent ? /* @__PURE__ */
|
|
9096
|
+
return QuestionComponent ? /* @__PURE__ */ jsx40(QuestionComponent, { paddingBottom }) : null;
|
|
8922
9097
|
});
|
|
8923
9098
|
var QuizAlternative = ({ paddingBottom }) => {
|
|
8924
9099
|
const {
|
|
@@ -8955,10 +9130,10 @@ var QuizAlternative = ({ paddingBottom }) => {
|
|
|
8955
9130
|
};
|
|
8956
9131
|
});
|
|
8957
9132
|
if (!alternatives)
|
|
8958
|
-
return /* @__PURE__ */
|
|
8959
|
-
return /* @__PURE__ */
|
|
8960
|
-
/* @__PURE__ */
|
|
8961
|
-
/* @__PURE__ */
|
|
9133
|
+
return /* @__PURE__ */ jsx40("div", { children: /* @__PURE__ */ jsx40("p", { children: "N\xE3o h\xE1 Alternativas" }) });
|
|
9134
|
+
return /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9135
|
+
/* @__PURE__ */ jsx40(QuizSubTitle, { subTitle: "Alternativas" }),
|
|
9136
|
+
/* @__PURE__ */ jsx40(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ jsx40("div", { className: "space-y-4", children: /* @__PURE__ */ jsx40(
|
|
8962
9137
|
AlternativesList,
|
|
8963
9138
|
{
|
|
8964
9139
|
mode: variant === "default" ? "interactive" : "readonly",
|
|
@@ -8990,8 +9165,8 @@ var QuizMultipleChoice = ({ paddingBottom }) => {
|
|
|
8990
9165
|
const currentQuestionResult = getQuestionResultByQuestionId(
|
|
8991
9166
|
currentQuestion?.id || ""
|
|
8992
9167
|
);
|
|
8993
|
-
const prevSelectedValuesRef =
|
|
8994
|
-
const prevQuestionIdRef =
|
|
9168
|
+
const prevSelectedValuesRef = useRef12([]);
|
|
9169
|
+
const prevQuestionIdRef = useRef12("");
|
|
8995
9170
|
const allCurrentAnswerIds = useMemo6(() => {
|
|
8996
9171
|
return allCurrentAnswers?.map((answer) => answer.optionId) || [];
|
|
8997
9172
|
}, [allCurrentAnswers]);
|
|
@@ -9022,7 +9197,7 @@ var QuizMultipleChoice = ({ paddingBottom }) => {
|
|
|
9022
9197
|
variant,
|
|
9023
9198
|
currentQuestionResult?.selectedOptions
|
|
9024
9199
|
]);
|
|
9025
|
-
const handleSelectedValues =
|
|
9200
|
+
const handleSelectedValues = useCallback5(
|
|
9026
9201
|
(values) => {
|
|
9027
9202
|
if (currentQuestion) {
|
|
9028
9203
|
selectMultipleAnswer(currentQuestion.id, values);
|
|
@@ -9056,10 +9231,10 @@ var QuizMultipleChoice = ({ paddingBottom }) => {
|
|
|
9056
9231
|
};
|
|
9057
9232
|
});
|
|
9058
9233
|
if (!choices)
|
|
9059
|
-
return /* @__PURE__ */
|
|
9060
|
-
return /* @__PURE__ */
|
|
9061
|
-
/* @__PURE__ */
|
|
9062
|
-
/* @__PURE__ */
|
|
9234
|
+
return /* @__PURE__ */ jsx40("div", { children: /* @__PURE__ */ jsx40("p", { children: "N\xE3o h\xE1 Escolhas Multiplas" }) });
|
|
9235
|
+
return /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9236
|
+
/* @__PURE__ */ jsx40(QuizSubTitle, { subTitle: "Alternativas" }),
|
|
9237
|
+
/* @__PURE__ */ jsx40(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ jsx40("div", { className: "space-y-4", children: /* @__PURE__ */ jsx40(
|
|
9063
9238
|
MultipleChoiceList,
|
|
9064
9239
|
{
|
|
9065
9240
|
choices,
|
|
@@ -9085,13 +9260,13 @@ var QuizDissertative = ({ paddingBottom }) => {
|
|
|
9085
9260
|
currentQuestion?.id || ""
|
|
9086
9261
|
);
|
|
9087
9262
|
const currentAnswer = getCurrentAnswer();
|
|
9088
|
-
const textareaRef =
|
|
9263
|
+
const textareaRef = useRef12(null);
|
|
9089
9264
|
const handleAnswerChange = (value) => {
|
|
9090
9265
|
if (currentQuestion) {
|
|
9091
9266
|
selectDissertativeAnswer(currentQuestion.id, value);
|
|
9092
9267
|
}
|
|
9093
9268
|
};
|
|
9094
|
-
const adjustTextareaHeight =
|
|
9269
|
+
const adjustTextareaHeight = useCallback5(() => {
|
|
9095
9270
|
if (textareaRef.current) {
|
|
9096
9271
|
textareaRef.current.style.height = "auto";
|
|
9097
9272
|
const scrollHeight = textareaRef.current.scrollHeight;
|
|
@@ -9105,12 +9280,12 @@ var QuizDissertative = ({ paddingBottom }) => {
|
|
|
9105
9280
|
adjustTextareaHeight();
|
|
9106
9281
|
}, [currentAnswer, adjustTextareaHeight]);
|
|
9107
9282
|
if (!currentQuestion) {
|
|
9108
|
-
return /* @__PURE__ */
|
|
9283
|
+
return /* @__PURE__ */ jsx40("div", { className: "space-y-4", children: /* @__PURE__ */ jsx40("p", { className: "text-text-600 text-md", children: "Nenhuma quest\xE3o dispon\xEDvel" }) });
|
|
9109
9284
|
}
|
|
9110
9285
|
const localAnswer = (variant == "result" ? currentQuestionResult?.answer : currentAnswer?.answer) || "";
|
|
9111
|
-
return /* @__PURE__ */
|
|
9112
|
-
/* @__PURE__ */
|
|
9113
|
-
/* @__PURE__ */
|
|
9286
|
+
return /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9287
|
+
/* @__PURE__ */ jsx40(QuizSubTitle, { subTitle: "Resposta" }),
|
|
9288
|
+
/* @__PURE__ */ jsx40(QuizContainer, { className: cn(variant != "result" && paddingBottom), children: /* @__PURE__ */ jsx40("div", { className: "space-y-4 max-h-[600px] overflow-y-auto", children: variant === "default" ? /* @__PURE__ */ jsx40("div", { className: "space-y-4", children: /* @__PURE__ */ jsx40(
|
|
9114
9289
|
TextArea_default,
|
|
9115
9290
|
{
|
|
9116
9291
|
ref: textareaRef,
|
|
@@ -9120,10 +9295,10 @@ var QuizDissertative = ({ paddingBottom }) => {
|
|
|
9120
9295
|
rows: 4,
|
|
9121
9296
|
className: "min-h-[120px] max-h-[400px] resize-none overflow-y-auto"
|
|
9122
9297
|
}
|
|
9123
|
-
) }) : /* @__PURE__ */
|
|
9124
|
-
variant === "result" && currentQuestionResult?.answerStatus == "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */ && /* @__PURE__ */
|
|
9125
|
-
/* @__PURE__ */
|
|
9126
|
-
/* @__PURE__ */
|
|
9298
|
+
) }) : /* @__PURE__ */ jsx40("div", { className: "space-y-4", children: /* @__PURE__ */ jsx40("p", { className: "text-text-600 text-md whitespace-pre-wrap", children: localAnswer || "Nenhuma resposta fornecida" }) }) }) }),
|
|
9299
|
+
variant === "result" && currentQuestionResult?.answerStatus == "RESPOSTA_INCORRETA" /* RESPOSTA_INCORRETA */ && /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9300
|
+
/* @__PURE__ */ jsx40(QuizSubTitle, { subTitle: "Observa\xE7\xE3o do professor" }),
|
|
9301
|
+
/* @__PURE__ */ jsx40(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ jsx40("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." }) })
|
|
9127
9302
|
] })
|
|
9128
9303
|
] });
|
|
9129
9304
|
};
|
|
@@ -9149,16 +9324,16 @@ var QuizTrueOrFalse = ({ paddingBottom }) => {
|
|
|
9149
9324
|
];
|
|
9150
9325
|
const getLetterByIndex = (index) => String.fromCharCode(97 + index);
|
|
9151
9326
|
const isDefaultVariant = variant == "default";
|
|
9152
|
-
return /* @__PURE__ */
|
|
9153
|
-
/* @__PURE__ */
|
|
9154
|
-
/* @__PURE__ */
|
|
9327
|
+
return /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9328
|
+
/* @__PURE__ */ jsx40(QuizSubTitle, { subTitle: "Alternativas" }),
|
|
9329
|
+
/* @__PURE__ */ jsx40(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ jsx40("div", { className: "flex flex-col gap-3.5", children: options.map((option, index) => {
|
|
9155
9330
|
const variantCorrect = option.isCorrect ? "correct" : "incorrect";
|
|
9156
|
-
return /* @__PURE__ */
|
|
9331
|
+
return /* @__PURE__ */ jsxs33(
|
|
9157
9332
|
"section",
|
|
9158
9333
|
{
|
|
9159
9334
|
className: "flex flex-col gap-2",
|
|
9160
9335
|
children: [
|
|
9161
|
-
/* @__PURE__ */
|
|
9336
|
+
/* @__PURE__ */ jsxs33(
|
|
9162
9337
|
"div",
|
|
9163
9338
|
{
|
|
9164
9339
|
className: cn(
|
|
@@ -9166,20 +9341,20 @@ var QuizTrueOrFalse = ({ paddingBottom }) => {
|
|
|
9166
9341
|
!isDefaultVariant ? getStatusStyles(variantCorrect) : ""
|
|
9167
9342
|
),
|
|
9168
9343
|
children: [
|
|
9169
|
-
/* @__PURE__ */
|
|
9170
|
-
isDefaultVariant ? /* @__PURE__ */
|
|
9171
|
-
/* @__PURE__ */
|
|
9172
|
-
/* @__PURE__ */
|
|
9173
|
-
/* @__PURE__ */
|
|
9174
|
-
/* @__PURE__ */
|
|
9344
|
+
/* @__PURE__ */ jsx40("p", { className: "text-text-900 text-sm", children: getLetterByIndex(index).concat(") ").concat(option.label) }),
|
|
9345
|
+
isDefaultVariant ? /* @__PURE__ */ jsxs33(Select_default, { size: "medium", children: [
|
|
9346
|
+
/* @__PURE__ */ jsx40(SelectTrigger, { className: "w-[180px]", children: /* @__PURE__ */ jsx40(SelectValue, { placeholder: "Selecione opc\xE3o" }) }),
|
|
9347
|
+
/* @__PURE__ */ jsxs33(SelectContent, { children: [
|
|
9348
|
+
/* @__PURE__ */ jsx40(SelectItem, { value: "V", children: "Verdadeiro" }),
|
|
9349
|
+
/* @__PURE__ */ jsx40(SelectItem, { value: "F", children: "Falso" })
|
|
9175
9350
|
] })
|
|
9176
|
-
] }) : /* @__PURE__ */
|
|
9351
|
+
] }) : /* @__PURE__ */ jsx40("div", { className: "flex-shrink-0", children: getStatusBadge(variantCorrect) })
|
|
9177
9352
|
]
|
|
9178
9353
|
}
|
|
9179
9354
|
),
|
|
9180
|
-
!isDefaultVariant && /* @__PURE__ */
|
|
9181
|
-
/* @__PURE__ */
|
|
9182
|
-
!option.isCorrect && /* @__PURE__ */
|
|
9355
|
+
!isDefaultVariant && /* @__PURE__ */ jsxs33("span", { className: "flex flex-row gap-2 items-center", children: [
|
|
9356
|
+
/* @__PURE__ */ jsx40("p", { className: "text-text-800 text-2xs", children: "Resposta selecionada: V" }),
|
|
9357
|
+
!option.isCorrect && /* @__PURE__ */ jsx40("p", { className: "text-text-800 text-2xs", children: "Resposta correta: F" })
|
|
9183
9358
|
] })
|
|
9184
9359
|
]
|
|
9185
9360
|
},
|
|
@@ -9240,7 +9415,7 @@ var QuizConnectDots = ({ paddingBottom }) => {
|
|
|
9240
9415
|
isCorrect: false
|
|
9241
9416
|
}
|
|
9242
9417
|
];
|
|
9243
|
-
const [userAnswers, setUserAnswers] =
|
|
9418
|
+
const [userAnswers, setUserAnswers] = useState18(() => {
|
|
9244
9419
|
if (variant === "result") {
|
|
9245
9420
|
return mockUserAnswers;
|
|
9246
9421
|
}
|
|
@@ -9269,13 +9444,13 @@ var QuizConnectDots = ({ paddingBottom }) => {
|
|
|
9269
9444
|
const assignedDots = new Set(
|
|
9270
9445
|
userAnswers.map((a) => a.dotOption).filter(Boolean)
|
|
9271
9446
|
);
|
|
9272
|
-
return /* @__PURE__ */
|
|
9273
|
-
/* @__PURE__ */
|
|
9274
|
-
/* @__PURE__ */
|
|
9447
|
+
return /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9448
|
+
/* @__PURE__ */ jsx40(QuizSubTitle, { subTitle: "Alternativas" }),
|
|
9449
|
+
/* @__PURE__ */ jsx40(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ jsx40("div", { className: "flex flex-col gap-3.5", children: options.map((option, index) => {
|
|
9275
9450
|
const answer = userAnswers[index];
|
|
9276
9451
|
const variantCorrect = answer.isCorrect ? "correct" : "incorrect";
|
|
9277
|
-
return /* @__PURE__ */
|
|
9278
|
-
/* @__PURE__ */
|
|
9452
|
+
return /* @__PURE__ */ jsxs33("section", { className: "flex flex-col gap-2", children: [
|
|
9453
|
+
/* @__PURE__ */ jsxs33(
|
|
9279
9454
|
"div",
|
|
9280
9455
|
{
|
|
9281
9456
|
className: cn(
|
|
@@ -9283,30 +9458,30 @@ var QuizConnectDots = ({ paddingBottom }) => {
|
|
|
9283
9458
|
!isDefaultVariant ? getStatusStyles(variantCorrect) : ""
|
|
9284
9459
|
),
|
|
9285
9460
|
children: [
|
|
9286
|
-
/* @__PURE__ */
|
|
9287
|
-
isDefaultVariant ? /* @__PURE__ */
|
|
9461
|
+
/* @__PURE__ */ jsx40("p", { className: "text-text-900 text-sm", children: getLetterByIndex(index) + ") " + option.label }),
|
|
9462
|
+
isDefaultVariant ? /* @__PURE__ */ jsxs33(
|
|
9288
9463
|
Select_default,
|
|
9289
9464
|
{
|
|
9290
9465
|
size: "medium",
|
|
9291
9466
|
value: answer.dotOption || void 0,
|
|
9292
9467
|
onValueChange: (value) => handleSelectDot(index, value),
|
|
9293
9468
|
children: [
|
|
9294
|
-
/* @__PURE__ */
|
|
9295
|
-
/* @__PURE__ */
|
|
9469
|
+
/* @__PURE__ */ jsx40(SelectTrigger, { className: "w-[180px]", children: /* @__PURE__ */ jsx40(SelectValue, { placeholder: "Selecione op\xE7\xE3o" }) }),
|
|
9470
|
+
/* @__PURE__ */ jsx40(SelectContent, { children: dotsOptions.filter(
|
|
9296
9471
|
(dot) => !assignedDots.has(dot.label) || answer.dotOption === dot.label
|
|
9297
|
-
).map((dot) => /* @__PURE__ */
|
|
9472
|
+
).map((dot) => /* @__PURE__ */ jsx40(SelectItem, { value: dot.label, children: dot.label }, dot.label)) })
|
|
9298
9473
|
]
|
|
9299
9474
|
}
|
|
9300
|
-
) : /* @__PURE__ */
|
|
9475
|
+
) : /* @__PURE__ */ jsx40("div", { className: "flex-shrink-0", children: answer.isCorrect === null ? null : getStatusBadge(variantCorrect) })
|
|
9301
9476
|
]
|
|
9302
9477
|
}
|
|
9303
9478
|
),
|
|
9304
|
-
!isDefaultVariant && /* @__PURE__ */
|
|
9305
|
-
/* @__PURE__ */
|
|
9479
|
+
!isDefaultVariant && /* @__PURE__ */ jsxs33("span", { className: "flex flex-row gap-2 items-center", children: [
|
|
9480
|
+
/* @__PURE__ */ jsxs33("p", { className: "text-text-800 text-2xs", children: [
|
|
9306
9481
|
"Resposta selecionada: ",
|
|
9307
9482
|
answer.dotOption || "Nenhuma"
|
|
9308
9483
|
] }),
|
|
9309
|
-
!answer.isCorrect && /* @__PURE__ */
|
|
9484
|
+
!answer.isCorrect && /* @__PURE__ */ jsxs33("p", { className: "text-text-800 text-2xs", children: [
|
|
9310
9485
|
"Resposta correta: ",
|
|
9311
9486
|
answer.correctOption
|
|
9312
9487
|
] })
|
|
@@ -9359,7 +9534,7 @@ var QuizFill = ({ paddingBottom }) => {
|
|
|
9359
9534
|
isCorrect: true
|
|
9360
9535
|
}
|
|
9361
9536
|
];
|
|
9362
|
-
const [answers, setAnswers] =
|
|
9537
|
+
const [answers, setAnswers] = useState18({});
|
|
9363
9538
|
const baseId = useId10();
|
|
9364
9539
|
const getAvailableOptionsForSelect = (selectId) => {
|
|
9365
9540
|
const usedOptions = Object.entries(answers).filter(([key]) => key !== selectId).map(([, value]) => value);
|
|
@@ -9373,18 +9548,18 @@ var QuizFill = ({ paddingBottom }) => {
|
|
|
9373
9548
|
const mockAnswer = mockUserAnswers.find(
|
|
9374
9549
|
(answer) => answer.selectId === selectId
|
|
9375
9550
|
);
|
|
9376
|
-
return /* @__PURE__ */
|
|
9551
|
+
return /* @__PURE__ */ jsx40("p", { className: "inline-flex mb-2.5 text-success-600 font-semibold text-md border-b-2 border-success-600", children: mockAnswer?.correctAnswer });
|
|
9377
9552
|
};
|
|
9378
9553
|
const renderDefaultElement = (selectId, startIndex, selectedValue, availableOptionsForThisSelect) => {
|
|
9379
|
-
return /* @__PURE__ */
|
|
9554
|
+
return /* @__PURE__ */ jsxs33(
|
|
9380
9555
|
Select_default,
|
|
9381
9556
|
{
|
|
9382
9557
|
value: selectedValue,
|
|
9383
9558
|
onValueChange: (value) => handleSelectChange(selectId, value),
|
|
9384
9559
|
className: "inline-flex mb-2.5",
|
|
9385
9560
|
children: [
|
|
9386
|
-
/* @__PURE__ */
|
|
9387
|
-
/* @__PURE__ */
|
|
9561
|
+
/* @__PURE__ */ jsx40(SelectTrigger, { className: "inline-flex w-auto min-w-[140px] h-8 mx-1 bg-white border-gray-300", children: /* @__PURE__ */ jsx40(SelectValue, { placeholder: "Selecione op\xE7\xE3o" }) }),
|
|
9562
|
+
/* @__PURE__ */ jsx40(SelectContent, { children: availableOptionsForThisSelect.map((option, index) => /* @__PURE__ */ jsx40(SelectItem, { value: option, children: option }, `${option}-${index}`)) })
|
|
9388
9563
|
]
|
|
9389
9564
|
},
|
|
9390
9565
|
`${selectId}-${startIndex}`
|
|
@@ -9396,8 +9571,8 @@ var QuizFill = ({ paddingBottom }) => {
|
|
|
9396
9571
|
);
|
|
9397
9572
|
if (!mockAnswer) return null;
|
|
9398
9573
|
const action = mockAnswer.isCorrect ? "success" : "error";
|
|
9399
|
-
const icon = mockAnswer.isCorrect ? /* @__PURE__ */
|
|
9400
|
-
return /* @__PURE__ */
|
|
9574
|
+
const icon = mockAnswer.isCorrect ? /* @__PURE__ */ jsx40(CheckCircle6, {}) : /* @__PURE__ */ jsx40(XCircle5, {});
|
|
9575
|
+
return /* @__PURE__ */ jsx40(
|
|
9401
9576
|
Badge_default,
|
|
9402
9577
|
{
|
|
9403
9578
|
variant: "solid",
|
|
@@ -9405,7 +9580,7 @@ var QuizFill = ({ paddingBottom }) => {
|
|
|
9405
9580
|
iconRight: icon,
|
|
9406
9581
|
size: "large",
|
|
9407
9582
|
className: "py-3 w-[180px] justify-between mb-2.5",
|
|
9408
|
-
children: /* @__PURE__ */
|
|
9583
|
+
children: /* @__PURE__ */ jsx40("span", { className: "text-text-900", children: mockAnswer.userAnswer })
|
|
9409
9584
|
},
|
|
9410
9585
|
selectId
|
|
9411
9586
|
);
|
|
@@ -9461,25 +9636,25 @@ var QuizFill = ({ paddingBottom }) => {
|
|
|
9461
9636
|
}
|
|
9462
9637
|
return elements;
|
|
9463
9638
|
};
|
|
9464
|
-
return /* @__PURE__ */
|
|
9465
|
-
/* @__PURE__ */
|
|
9466
|
-
/* @__PURE__ */
|
|
9639
|
+
return /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9640
|
+
/* @__PURE__ */ jsx40(QuizSubTitle, { subTitle: "Alternativas" }),
|
|
9641
|
+
/* @__PURE__ */ jsx40(QuizContainer, { className: "h-auto pb-0", children: /* @__PURE__ */ jsx40("div", { className: "space-y-6 px-4 h-auto", children: /* @__PURE__ */ jsx40(
|
|
9467
9642
|
"div",
|
|
9468
9643
|
{
|
|
9469
9644
|
className: cn(
|
|
9470
9645
|
"text-lg text-text-900 leading-8 h-auto",
|
|
9471
9646
|
variant != "result" && paddingBottom
|
|
9472
9647
|
),
|
|
9473
|
-
children: renderTextWithSelects(exampleText).map((element) => /* @__PURE__ */
|
|
9648
|
+
children: renderTextWithSelects(exampleText).map((element) => /* @__PURE__ */ jsx40("span", { children: element.element }, element.id))
|
|
9474
9649
|
}
|
|
9475
9650
|
) }) }),
|
|
9476
|
-
variant === "result" && /* @__PURE__ */
|
|
9477
|
-
/* @__PURE__ */
|
|
9478
|
-
/* @__PURE__ */
|
|
9651
|
+
variant === "result" && /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9652
|
+
/* @__PURE__ */ jsx40(QuizSubTitle, { subTitle: "Resultado" }),
|
|
9653
|
+
/* @__PURE__ */ jsx40(QuizContainer, { className: "h-auto pb-0", children: /* @__PURE__ */ jsx40("div", { className: "space-y-6 px-4", children: /* @__PURE__ */ jsx40(
|
|
9479
9654
|
"div",
|
|
9480
9655
|
{
|
|
9481
9656
|
className: cn("text-lg text-text-900 leading-8", paddingBottom),
|
|
9482
|
-
children: renderTextWithSelects(exampleText, true).map((element) => /* @__PURE__ */
|
|
9657
|
+
children: renderTextWithSelects(exampleText, true).map((element) => /* @__PURE__ */ jsx40("span", { children: element.element }, element.id))
|
|
9483
9658
|
}
|
|
9484
9659
|
) }) })
|
|
9485
9660
|
] })
|
|
@@ -9497,7 +9672,7 @@ var QuizImageQuestion = ({ paddingBottom }) => {
|
|
|
9497
9672
|
};
|
|
9498
9673
|
const correctRadiusRelative = calculateCorrectRadiusRelative();
|
|
9499
9674
|
const mockUserAnswerRelative = { x: 0.72, y: 0.348 };
|
|
9500
|
-
const [clickPositionRelative, setClickPositionRelative] =
|
|
9675
|
+
const [clickPositionRelative, setClickPositionRelative] = useState18(variant == "result" ? mockUserAnswerRelative : null);
|
|
9501
9676
|
const convertToRelativeCoordinates = (x, y, rect) => {
|
|
9502
9677
|
const safeWidth = Math.max(rect.width, 1e-3);
|
|
9503
9678
|
const safeHeight = Math.max(rect.height, 1e-3);
|
|
@@ -9533,36 +9708,36 @@ var QuizImageQuestion = ({ paddingBottom }) => {
|
|
|
9533
9708
|
}
|
|
9534
9709
|
return "bg-success-600/70 border-white";
|
|
9535
9710
|
};
|
|
9536
|
-
return /* @__PURE__ */
|
|
9537
|
-
/* @__PURE__ */
|
|
9538
|
-
/* @__PURE__ */
|
|
9711
|
+
return /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9712
|
+
/* @__PURE__ */ jsx40(QuizSubTitle, { subTitle: "Clique na \xE1rea correta" }),
|
|
9713
|
+
/* @__PURE__ */ jsx40(QuizContainer, { className: cn("", paddingBottom), children: /* @__PURE__ */ jsxs33(
|
|
9539
9714
|
"div",
|
|
9540
9715
|
{
|
|
9541
9716
|
"data-testid": "quiz-image-container",
|
|
9542
9717
|
className: "space-y-6 p-3 relative inline-block",
|
|
9543
9718
|
children: [
|
|
9544
|
-
variant == "result" && /* @__PURE__ */
|
|
9719
|
+
variant == "result" && /* @__PURE__ */ jsxs33(
|
|
9545
9720
|
"div",
|
|
9546
9721
|
{
|
|
9547
9722
|
"data-testid": "quiz-legend",
|
|
9548
9723
|
className: "flex items-center gap-4 text-xs",
|
|
9549
9724
|
children: [
|
|
9550
|
-
/* @__PURE__ */
|
|
9551
|
-
/* @__PURE__ */
|
|
9552
|
-
/* @__PURE__ */
|
|
9725
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
|
|
9726
|
+
/* @__PURE__ */ jsx40("div", { className: "w-3 h-3 rounded-full bg-indicator-primary/70 border border-[#F8CC2E]" }),
|
|
9727
|
+
/* @__PURE__ */ jsx40("span", { className: "text-text-600 font-medium text-sm", children: "\xC1rea correta" })
|
|
9553
9728
|
] }),
|
|
9554
|
-
/* @__PURE__ */
|
|
9555
|
-
/* @__PURE__ */
|
|
9556
|
-
/* @__PURE__ */
|
|
9729
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
|
|
9730
|
+
/* @__PURE__ */ jsx40("div", { className: "w-3 h-3 rounded-full bg-success-600/70 border border-white" }),
|
|
9731
|
+
/* @__PURE__ */ jsx40("span", { className: "text-text-600 font-medium text-sm", children: "Resposta correta" })
|
|
9557
9732
|
] }),
|
|
9558
|
-
/* @__PURE__ */
|
|
9559
|
-
/* @__PURE__ */
|
|
9560
|
-
/* @__PURE__ */
|
|
9733
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-2", children: [
|
|
9734
|
+
/* @__PURE__ */ jsx40("div", { className: "w-3 h-3 rounded-full bg-indicator-error/70 border border-white" }),
|
|
9735
|
+
/* @__PURE__ */ jsx40("span", { className: "text-text-600 font-medium text-sm", children: "Resposta incorreta" })
|
|
9561
9736
|
] })
|
|
9562
9737
|
]
|
|
9563
9738
|
}
|
|
9564
9739
|
),
|
|
9565
|
-
/* @__PURE__ */
|
|
9740
|
+
/* @__PURE__ */ jsxs33(
|
|
9566
9741
|
"button",
|
|
9567
9742
|
{
|
|
9568
9743
|
"data-testid": "quiz-image-button",
|
|
@@ -9577,7 +9752,7 @@ var QuizImageQuestion = ({ paddingBottom }) => {
|
|
|
9577
9752
|
},
|
|
9578
9753
|
"aria-label": "\xC1rea da imagem interativa",
|
|
9579
9754
|
children: [
|
|
9580
|
-
/* @__PURE__ */
|
|
9755
|
+
/* @__PURE__ */ jsx40(
|
|
9581
9756
|
"img",
|
|
9582
9757
|
{
|
|
9583
9758
|
"data-testid": "quiz-image",
|
|
@@ -9586,7 +9761,7 @@ var QuizImageQuestion = ({ paddingBottom }) => {
|
|
|
9586
9761
|
className: "w-full h-auto rounded-md"
|
|
9587
9762
|
}
|
|
9588
9763
|
),
|
|
9589
|
-
variant === "result" && /* @__PURE__ */
|
|
9764
|
+
variant === "result" && /* @__PURE__ */ jsx40(
|
|
9590
9765
|
"div",
|
|
9591
9766
|
{
|
|
9592
9767
|
"data-testid": "quiz-correct-circle",
|
|
@@ -9601,7 +9776,7 @@ var QuizImageQuestion = ({ paddingBottom }) => {
|
|
|
9601
9776
|
}
|
|
9602
9777
|
}
|
|
9603
9778
|
),
|
|
9604
|
-
clickPositionRelative && /* @__PURE__ */
|
|
9779
|
+
clickPositionRelative && /* @__PURE__ */ jsx40(
|
|
9605
9780
|
"div",
|
|
9606
9781
|
{
|
|
9607
9782
|
"data-testid": "quiz-user-circle",
|
|
@@ -9669,18 +9844,18 @@ var QuizQuestionList = ({
|
|
|
9669
9844
|
return "Em branco";
|
|
9670
9845
|
}
|
|
9671
9846
|
};
|
|
9672
|
-
return /* @__PURE__ */
|
|
9673
|
-
Object.entries(filteredGroupedQuestions).length == 0 && /* @__PURE__ */
|
|
9847
|
+
return /* @__PURE__ */ jsxs33("div", { className: "space-y-6 px-4 h-full", children: [
|
|
9848
|
+
Object.entries(filteredGroupedQuestions).length == 0 && /* @__PURE__ */ jsx40("div", { className: "flex items-center justify-center text-gray-500 py-8 h-full", children: /* @__PURE__ */ jsx40("p", { className: "text-lg", children: "Nenhum resultado" }) }),
|
|
9674
9849
|
Object.entries(filteredGroupedQuestions).map(
|
|
9675
|
-
([subjectId, questions]) => /* @__PURE__ */
|
|
9676
|
-
/* @__PURE__ */
|
|
9677
|
-
/* @__PURE__ */
|
|
9678
|
-
/* @__PURE__ */
|
|
9850
|
+
([subjectId, questions]) => /* @__PURE__ */ jsxs33("section", { className: "flex flex-col gap-2", children: [
|
|
9851
|
+
/* @__PURE__ */ jsxs33("span", { className: "pt-6 pb-4 flex flex-row gap-2", children: [
|
|
9852
|
+
/* @__PURE__ */ jsx40("div", { className: "bg-primary-500 p-1 rounded-sm flex items-center justify-center", children: /* @__PURE__ */ jsx40(BookOpen, { size: 17, className: "text-white" }) }),
|
|
9853
|
+
/* @__PURE__ */ jsx40("p", { className: "text-text-800 font-bold text-lg", children: questions?.[0]?.knowledgeMatrix?.[0]?.subject?.name ?? "Sem mat\xE9ria" })
|
|
9679
9854
|
] }),
|
|
9680
|
-
/* @__PURE__ */
|
|
9855
|
+
/* @__PURE__ */ jsx40("ul", { className: "flex flex-col gap-2", children: questions.map((question) => {
|
|
9681
9856
|
const status = getQuestionStatus(question.id);
|
|
9682
9857
|
const questionNumber = getQuestionIndex(question.id);
|
|
9683
|
-
return /* @__PURE__ */
|
|
9858
|
+
return /* @__PURE__ */ jsx40(
|
|
9684
9859
|
CardStatus,
|
|
9685
9860
|
{
|
|
9686
9861
|
header: `Quest\xE3o ${questionNumber.toString().padStart(2, "0")}`,
|
|
@@ -9697,7 +9872,7 @@ var QuizQuestionList = ({
|
|
|
9697
9872
|
)
|
|
9698
9873
|
] });
|
|
9699
9874
|
};
|
|
9700
|
-
var QuizFooter =
|
|
9875
|
+
var QuizFooter = forwardRef20(
|
|
9701
9876
|
({
|
|
9702
9877
|
className,
|
|
9703
9878
|
onGoToSimulated,
|
|
@@ -9725,11 +9900,11 @@ var QuizFooter = forwardRef19(
|
|
|
9725
9900
|
const currentAnswer = getCurrentAnswer();
|
|
9726
9901
|
const currentQuestion = getCurrentQuestion();
|
|
9727
9902
|
const isCurrentQuestionSkipped = currentQuestion ? getQuestionStatusFromUserAnswers(currentQuestion.id) === "skipped" : false;
|
|
9728
|
-
const [alertDialogOpen, setAlertDialogOpen] =
|
|
9729
|
-
const [modalResultOpen, setModalResultOpen] =
|
|
9730
|
-
const [modalNavigateOpen, setModalNavigateOpen] =
|
|
9731
|
-
const [modalResolutionOpen, setModalResolutionOpen] =
|
|
9732
|
-
const [filterType, setFilterType] =
|
|
9903
|
+
const [alertDialogOpen, setAlertDialogOpen] = useState18(false);
|
|
9904
|
+
const [modalResultOpen, setModalResultOpen] = useState18(false);
|
|
9905
|
+
const [modalNavigateOpen, setModalNavigateOpen] = useState18(false);
|
|
9906
|
+
const [modalResolutionOpen, setModalResolutionOpen] = useState18(false);
|
|
9907
|
+
const [filterType, setFilterType] = useState18("all");
|
|
9733
9908
|
const unansweredQuestions = getUnansweredQuestionsFromUserAnswers();
|
|
9734
9909
|
const allQuestions = getTotalQuestions();
|
|
9735
9910
|
const handleFinishQuiz = async () => {
|
|
@@ -9760,8 +9935,8 @@ var QuizFooter = forwardRef19(
|
|
|
9760
9935
|
return;
|
|
9761
9936
|
}
|
|
9762
9937
|
};
|
|
9763
|
-
return /* @__PURE__ */
|
|
9764
|
-
/* @__PURE__ */
|
|
9938
|
+
return /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9939
|
+
/* @__PURE__ */ jsx40(
|
|
9765
9940
|
"footer",
|
|
9766
9941
|
{
|
|
9767
9942
|
ref,
|
|
@@ -9770,17 +9945,17 @@ var QuizFooter = forwardRef19(
|
|
|
9770
9945
|
className
|
|
9771
9946
|
),
|
|
9772
9947
|
...props,
|
|
9773
|
-
children: variant === "default" ? /* @__PURE__ */
|
|
9774
|
-
/* @__PURE__ */
|
|
9775
|
-
/* @__PURE__ */
|
|
9948
|
+
children: variant === "default" ? /* @__PURE__ */ jsxs33(Fragment10, { children: [
|
|
9949
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex flex-row items-center gap-1", children: [
|
|
9950
|
+
/* @__PURE__ */ jsx40(
|
|
9776
9951
|
IconButton_default,
|
|
9777
9952
|
{
|
|
9778
|
-
icon: /* @__PURE__ */
|
|
9953
|
+
icon: /* @__PURE__ */ jsx40(SquaresFour, { size: 24, className: "text-text-950" }),
|
|
9779
9954
|
size: "md",
|
|
9780
9955
|
onClick: () => setModalNavigateOpen(true)
|
|
9781
9956
|
}
|
|
9782
9957
|
),
|
|
9783
|
-
isFirstQuestion ? /* @__PURE__ */
|
|
9958
|
+
isFirstQuestion ? /* @__PURE__ */ jsx40(
|
|
9784
9959
|
Button_default,
|
|
9785
9960
|
{
|
|
9786
9961
|
variant: "outline",
|
|
@@ -9791,13 +9966,13 @@ var QuizFooter = forwardRef19(
|
|
|
9791
9966
|
},
|
|
9792
9967
|
children: "Pular"
|
|
9793
9968
|
}
|
|
9794
|
-
) : /* @__PURE__ */
|
|
9969
|
+
) : /* @__PURE__ */ jsx40(
|
|
9795
9970
|
Button_default,
|
|
9796
9971
|
{
|
|
9797
9972
|
size: "medium",
|
|
9798
9973
|
variant: "link",
|
|
9799
9974
|
action: "primary",
|
|
9800
|
-
iconLeft: /* @__PURE__ */
|
|
9975
|
+
iconLeft: /* @__PURE__ */ jsx40(CaretLeft3, { size: 18 }),
|
|
9801
9976
|
onClick: () => {
|
|
9802
9977
|
goToPreviousQuestion();
|
|
9803
9978
|
},
|
|
@@ -9805,7 +9980,7 @@ var QuizFooter = forwardRef19(
|
|
|
9805
9980
|
}
|
|
9806
9981
|
)
|
|
9807
9982
|
] }),
|
|
9808
|
-
!isFirstQuestion && !isLastQuestion && /* @__PURE__ */
|
|
9983
|
+
!isFirstQuestion && !isLastQuestion && /* @__PURE__ */ jsx40(
|
|
9809
9984
|
Button_default,
|
|
9810
9985
|
{
|
|
9811
9986
|
size: "small",
|
|
@@ -9818,7 +9993,7 @@ var QuizFooter = forwardRef19(
|
|
|
9818
9993
|
children: "Pular"
|
|
9819
9994
|
}
|
|
9820
9995
|
),
|
|
9821
|
-
isLastQuestion ? /* @__PURE__ */
|
|
9996
|
+
isLastQuestion ? /* @__PURE__ */ jsx40(
|
|
9822
9997
|
Button_default,
|
|
9823
9998
|
{
|
|
9824
9999
|
size: "medium",
|
|
@@ -9828,13 +10003,13 @@ var QuizFooter = forwardRef19(
|
|
|
9828
10003
|
onClick: handleFinishQuiz,
|
|
9829
10004
|
children: "Finalizar"
|
|
9830
10005
|
}
|
|
9831
|
-
) : /* @__PURE__ */
|
|
10006
|
+
) : /* @__PURE__ */ jsx40(
|
|
9832
10007
|
Button_default,
|
|
9833
10008
|
{
|
|
9834
10009
|
size: "medium",
|
|
9835
10010
|
variant: "link",
|
|
9836
10011
|
action: "primary",
|
|
9837
|
-
iconRight: /* @__PURE__ */
|
|
10012
|
+
iconRight: /* @__PURE__ */ jsx40(CaretRight4, { size: 18 }),
|
|
9838
10013
|
disabled: !currentAnswer && !isCurrentQuestionSkipped,
|
|
9839
10014
|
onClick: () => {
|
|
9840
10015
|
goToNextQuestion();
|
|
@@ -9842,7 +10017,7 @@ var QuizFooter = forwardRef19(
|
|
|
9842
10017
|
children: "Avan\xE7ar"
|
|
9843
10018
|
}
|
|
9844
10019
|
)
|
|
9845
|
-
] }) : /* @__PURE__ */
|
|
10020
|
+
] }) : /* @__PURE__ */ jsx40("div", { className: "flex flex-row items-center justify-end w-full", children: /* @__PURE__ */ jsx40(
|
|
9846
10021
|
Button_default,
|
|
9847
10022
|
{
|
|
9848
10023
|
variant: "solid",
|
|
@@ -9854,7 +10029,7 @@ var QuizFooter = forwardRef19(
|
|
|
9854
10029
|
) })
|
|
9855
10030
|
}
|
|
9856
10031
|
),
|
|
9857
|
-
/* @__PURE__ */
|
|
10032
|
+
/* @__PURE__ */ jsx40(
|
|
9858
10033
|
AlertDialog,
|
|
9859
10034
|
{
|
|
9860
10035
|
isOpen: alertDialogOpen,
|
|
@@ -9866,7 +10041,7 @@ var QuizFooter = forwardRef19(
|
|
|
9866
10041
|
onSubmit: handleAlertSubmit
|
|
9867
10042
|
}
|
|
9868
10043
|
),
|
|
9869
|
-
/* @__PURE__ */
|
|
10044
|
+
/* @__PURE__ */ jsx40(
|
|
9870
10045
|
Modal_default,
|
|
9871
10046
|
{
|
|
9872
10047
|
isOpen: modalResultOpen,
|
|
@@ -9876,11 +10051,11 @@ var QuizFooter = forwardRef19(
|
|
|
9876
10051
|
closeOnEscape: false,
|
|
9877
10052
|
hideCloseButton: true,
|
|
9878
10053
|
size: "md",
|
|
9879
|
-
children: /* @__PURE__ */
|
|
9880
|
-
resultImageComponent ? /* @__PURE__ */
|
|
9881
|
-
/* @__PURE__ */
|
|
9882
|
-
/* @__PURE__ */
|
|
9883
|
-
/* @__PURE__ */
|
|
10054
|
+
children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-col w-full h-full items-center justify-center gap-4", children: [
|
|
10055
|
+
resultImageComponent ? /* @__PURE__ */ jsx40("div", { className: "w-[282px] h-auto", children: resultImageComponent }) : /* @__PURE__ */ jsx40("div", { className: "w-[282px] h-[200px] bg-gray-100 rounded-md flex items-center justify-center", children: /* @__PURE__ */ jsx40("span", { className: "text-gray-500 text-sm", children: "Imagem de resultado" }) }),
|
|
10056
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-2 text-center", children: [
|
|
10057
|
+
/* @__PURE__ */ jsx40("h2", { className: "text-text-950 font-bold text-lg", children: "Voc\xEA concluiu o simulado!" }),
|
|
10058
|
+
/* @__PURE__ */ jsxs33("p", { className: "text-text-500 font-sm", children: [
|
|
9884
10059
|
"Voc\xEA acertou",
|
|
9885
10060
|
" ",
|
|
9886
10061
|
getQuestionResultStatistics()?.correctAnswers ?? "--",
|
|
@@ -9890,8 +10065,8 @@ var QuizFooter = forwardRef19(
|
|
|
9890
10065
|
" quest\xF5es."
|
|
9891
10066
|
] })
|
|
9892
10067
|
] }),
|
|
9893
|
-
/* @__PURE__ */
|
|
9894
|
-
/* @__PURE__ */
|
|
10068
|
+
/* @__PURE__ */ jsxs33("div", { className: "px-6 flex flex-row items-center gap-2 w-full", children: [
|
|
10069
|
+
/* @__PURE__ */ jsx40(
|
|
9895
10070
|
Button_default,
|
|
9896
10071
|
{
|
|
9897
10072
|
variant: "outline",
|
|
@@ -9901,38 +10076,38 @@ var QuizFooter = forwardRef19(
|
|
|
9901
10076
|
children: "Ir para simulados"
|
|
9902
10077
|
}
|
|
9903
10078
|
),
|
|
9904
|
-
/* @__PURE__ */
|
|
10079
|
+
/* @__PURE__ */ jsx40(Button_default, { className: "w-full", onClick: onDetailResult, children: "Detalhar resultado" })
|
|
9905
10080
|
] })
|
|
9906
10081
|
] })
|
|
9907
10082
|
}
|
|
9908
10083
|
),
|
|
9909
|
-
/* @__PURE__ */
|
|
10084
|
+
/* @__PURE__ */ jsx40(
|
|
9910
10085
|
Modal_default,
|
|
9911
10086
|
{
|
|
9912
10087
|
isOpen: modalNavigateOpen,
|
|
9913
10088
|
onClose: () => setModalNavigateOpen(false),
|
|
9914
10089
|
title: "Quest\xF5es",
|
|
9915
10090
|
size: "lg",
|
|
9916
|
-
children: /* @__PURE__ */
|
|
9917
|
-
/* @__PURE__ */
|
|
9918
|
-
/* @__PURE__ */
|
|
9919
|
-
/* @__PURE__ */
|
|
9920
|
-
/* @__PURE__ */
|
|
10091
|
+
children: /* @__PURE__ */ jsxs33("div", { className: "flex flex-col w-full not-lg:h-[calc(100vh-200px)] lg:max-h-[687px] lg:h-[687px]", children: [
|
|
10092
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex flex-row justify-between items-center py-6 pt-6 pb-4 border-b border-border-200 flex-shrink-0", children: [
|
|
10093
|
+
/* @__PURE__ */ jsx40("p", { className: "text-text-950 font-bold text-lg", children: "Filtrar por" }),
|
|
10094
|
+
/* @__PURE__ */ jsx40("span", { className: "max-w-[266px]", children: /* @__PURE__ */ jsxs33(Select_default, { value: filterType, onValueChange: setFilterType, children: [
|
|
10095
|
+
/* @__PURE__ */ jsx40(
|
|
9921
10096
|
SelectTrigger,
|
|
9922
10097
|
{
|
|
9923
10098
|
variant: "rounded",
|
|
9924
10099
|
className: "max-w-[266px] min-w-[160px]",
|
|
9925
|
-
children: /* @__PURE__ */
|
|
10100
|
+
children: /* @__PURE__ */ jsx40(SelectValue, { placeholder: "Selecione uma op\xE7\xE3o" })
|
|
9926
10101
|
}
|
|
9927
10102
|
),
|
|
9928
|
-
/* @__PURE__ */
|
|
9929
|
-
/* @__PURE__ */
|
|
9930
|
-
/* @__PURE__ */
|
|
9931
|
-
/* @__PURE__ */
|
|
10103
|
+
/* @__PURE__ */ jsxs33(SelectContent, { children: [
|
|
10104
|
+
/* @__PURE__ */ jsx40(SelectItem, { value: "all", children: "Todas" }),
|
|
10105
|
+
/* @__PURE__ */ jsx40(SelectItem, { value: "unanswered", children: "Em branco" }),
|
|
10106
|
+
/* @__PURE__ */ jsx40(SelectItem, { value: "answered", children: "Respondidas" })
|
|
9932
10107
|
] })
|
|
9933
10108
|
] }) })
|
|
9934
10109
|
] }),
|
|
9935
|
-
/* @__PURE__ */
|
|
10110
|
+
/* @__PURE__ */ jsx40("div", { className: "flex flex-col gap-2 flex-1 min-h-0 overflow-y-auto", children: /* @__PURE__ */ jsx40(
|
|
9936
10111
|
QuizQuestionList,
|
|
9937
10112
|
{
|
|
9938
10113
|
filterType,
|
|
@@ -9942,7 +10117,7 @@ var QuizFooter = forwardRef19(
|
|
|
9942
10117
|
] })
|
|
9943
10118
|
}
|
|
9944
10119
|
),
|
|
9945
|
-
/* @__PURE__ */
|
|
10120
|
+
/* @__PURE__ */ jsx40(
|
|
9946
10121
|
Modal_default,
|
|
9947
10122
|
{
|
|
9948
10123
|
isOpen: modalResolutionOpen,
|
|
@@ -9960,40 +10135,40 @@ var QuizBadge = ({
|
|
|
9960
10135
|
}) => {
|
|
9961
10136
|
switch (subtype) {
|
|
9962
10137
|
case "PROVA" /* PROVA */:
|
|
9963
|
-
return /* @__PURE__ */
|
|
10138
|
+
return /* @__PURE__ */ jsx40(Badge_default, { variant: "examsOutlined", action: "exam2", "data-testid": "quiz-badge", children: "Prova" });
|
|
9964
10139
|
case "ENEM_PROVA_1" /* ENEM_PROVA_1 */:
|
|
9965
10140
|
case "ENEM_PROVA_2" /* ENEM_PROVA_2 */:
|
|
9966
|
-
return /* @__PURE__ */
|
|
10141
|
+
return /* @__PURE__ */ jsx40(Badge_default, { variant: "examsOutlined", action: "exam1", "data-testid": "quiz-badge", children: "Enem" });
|
|
9967
10142
|
case "VESTIBULAR" /* VESTIBULAR */:
|
|
9968
|
-
return /* @__PURE__ */
|
|
10143
|
+
return /* @__PURE__ */ jsx40(Badge_default, { variant: "examsOutlined", action: "exam4", "data-testid": "quiz-badge", children: "Vestibular" });
|
|
9969
10144
|
case "SIMULADO" /* SIMULADO */:
|
|
9970
10145
|
case "SIMULADAO" /* SIMULADAO */:
|
|
9971
10146
|
case void 0:
|
|
9972
|
-
return /* @__PURE__ */
|
|
10147
|
+
return /* @__PURE__ */ jsx40(Badge_default, { variant: "examsOutlined", action: "exam3", "data-testid": "quiz-badge", children: "Simulad\xE3o" });
|
|
9973
10148
|
default:
|
|
9974
|
-
return /* @__PURE__ */
|
|
10149
|
+
return /* @__PURE__ */ jsx40(Badge_default, { variant: "solid", action: "info", "data-testid": "quiz-badge", children: subtype });
|
|
9975
10150
|
}
|
|
9976
10151
|
};
|
|
9977
|
-
var QuizResultHeaderTitle =
|
|
10152
|
+
var QuizResultHeaderTitle = forwardRef20(({ className, ...props }, ref) => {
|
|
9978
10153
|
const { getActiveQuiz } = useQuizStore();
|
|
9979
10154
|
const activeQuiz = getActiveQuiz();
|
|
9980
|
-
return /* @__PURE__ */
|
|
10155
|
+
return /* @__PURE__ */ jsxs33(
|
|
9981
10156
|
"div",
|
|
9982
10157
|
{
|
|
9983
10158
|
ref,
|
|
9984
10159
|
className: cn("flex flex-row pt-4 justify-between", className),
|
|
9985
10160
|
...props,
|
|
9986
10161
|
children: [
|
|
9987
|
-
/* @__PURE__ */
|
|
9988
|
-
/* @__PURE__ */
|
|
10162
|
+
/* @__PURE__ */ jsx40("p", { className: "text-text-950 font-bold text-2xl", children: "Resultado" }),
|
|
10163
|
+
/* @__PURE__ */ jsx40(QuizBadge, { subtype: activeQuiz?.quiz.subtype || void 0 })
|
|
9989
10164
|
]
|
|
9990
10165
|
}
|
|
9991
10166
|
);
|
|
9992
10167
|
});
|
|
9993
|
-
var QuizResultTitle =
|
|
10168
|
+
var QuizResultTitle = forwardRef20(({ className, ...props }, ref) => {
|
|
9994
10169
|
const { getQuizTitle } = useQuizStore();
|
|
9995
10170
|
const quizTitle = getQuizTitle();
|
|
9996
|
-
return /* @__PURE__ */
|
|
10171
|
+
return /* @__PURE__ */ jsx40(
|
|
9997
10172
|
"p",
|
|
9998
10173
|
{
|
|
9999
10174
|
className: cn("pt-6 pb-4 text-text-950 font-bold text-lg", className),
|
|
@@ -10003,7 +10178,7 @@ var QuizResultTitle = forwardRef19(({ className, ...props }, ref) => {
|
|
|
10003
10178
|
}
|
|
10004
10179
|
);
|
|
10005
10180
|
});
|
|
10006
|
-
var QuizResultPerformance =
|
|
10181
|
+
var QuizResultPerformance = forwardRef20(
|
|
10007
10182
|
({ ...props }, ref) => {
|
|
10008
10183
|
const {
|
|
10009
10184
|
getTotalQuestions,
|
|
@@ -10045,15 +10220,15 @@ var QuizResultPerformance = forwardRef19(
|
|
|
10045
10220
|
});
|
|
10046
10221
|
}
|
|
10047
10222
|
const percentage = totalQuestions > 0 ? Math.round(correctAnswers / totalQuestions * 100) : 0;
|
|
10048
|
-
return /* @__PURE__ */
|
|
10223
|
+
return /* @__PURE__ */ jsxs33(
|
|
10049
10224
|
"div",
|
|
10050
10225
|
{
|
|
10051
10226
|
className: "flex flex-row gap-6 p-6 rounded-xl bg-background justify-between",
|
|
10052
10227
|
ref,
|
|
10053
10228
|
...props,
|
|
10054
10229
|
children: [
|
|
10055
|
-
/* @__PURE__ */
|
|
10056
|
-
/* @__PURE__ */
|
|
10230
|
+
/* @__PURE__ */ jsxs33("div", { className: "relative", children: [
|
|
10231
|
+
/* @__PURE__ */ jsx40(
|
|
10057
10232
|
ProgressCircle_default,
|
|
10058
10233
|
{
|
|
10059
10234
|
size: "medium",
|
|
@@ -10063,24 +10238,24 @@ var QuizResultPerformance = forwardRef19(
|
|
|
10063
10238
|
label: ""
|
|
10064
10239
|
}
|
|
10065
10240
|
),
|
|
10066
|
-
/* @__PURE__ */
|
|
10067
|
-
/* @__PURE__ */
|
|
10068
|
-
/* @__PURE__ */
|
|
10069
|
-
/* @__PURE__ */
|
|
10241
|
+
/* @__PURE__ */ jsxs33("div", { className: "absolute inset-0 flex flex-col items-center justify-center", children: [
|
|
10242
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex items-center gap-1 mb-1", children: [
|
|
10243
|
+
/* @__PURE__ */ jsx40(Clock2, { size: 12, weight: "regular", className: "text-text-800" }),
|
|
10244
|
+
/* @__PURE__ */ jsx40("span", { className: "text-2xs font-medium text-text-800", children: formatTime2(
|
|
10070
10245
|
(getQuestionResultStatistics()?.timeSpent ?? 0) * 60
|
|
10071
10246
|
) })
|
|
10072
10247
|
] }),
|
|
10073
|
-
/* @__PURE__ */
|
|
10248
|
+
/* @__PURE__ */ jsxs33("div", { className: "text-2xl font-medium text-text-800 leading-7", children: [
|
|
10074
10249
|
getQuestionResultStatistics()?.correctAnswers ?? "--",
|
|
10075
10250
|
" de",
|
|
10076
10251
|
" ",
|
|
10077
10252
|
totalQuestions
|
|
10078
10253
|
] }),
|
|
10079
|
-
/* @__PURE__ */
|
|
10254
|
+
/* @__PURE__ */ jsx40("div", { className: "text-2xs font-medium text-text-600 mt-1", children: "Corretas" })
|
|
10080
10255
|
] })
|
|
10081
10256
|
] }),
|
|
10082
|
-
/* @__PURE__ */
|
|
10083
|
-
/* @__PURE__ */
|
|
10257
|
+
/* @__PURE__ */ jsxs33("div", { className: "flex flex-col gap-4 w-full", children: [
|
|
10258
|
+
/* @__PURE__ */ jsx40(
|
|
10084
10259
|
ProgressBar_default,
|
|
10085
10260
|
{
|
|
10086
10261
|
className: "w-full",
|
|
@@ -10094,7 +10269,7 @@ var QuizResultPerformance = forwardRef19(
|
|
|
10094
10269
|
percentageClassName: "text-xs font-medium leading-[14px] text-right"
|
|
10095
10270
|
}
|
|
10096
10271
|
),
|
|
10097
|
-
/* @__PURE__ */
|
|
10272
|
+
/* @__PURE__ */ jsx40(
|
|
10098
10273
|
ProgressBar_default,
|
|
10099
10274
|
{
|
|
10100
10275
|
className: "w-full",
|
|
@@ -10108,7 +10283,7 @@ var QuizResultPerformance = forwardRef19(
|
|
|
10108
10283
|
percentageClassName: "text-xs font-medium leading-[14px] text-right"
|
|
10109
10284
|
}
|
|
10110
10285
|
),
|
|
10111
|
-
/* @__PURE__ */
|
|
10286
|
+
/* @__PURE__ */ jsx40(
|
|
10112
10287
|
ProgressBar_default,
|
|
10113
10288
|
{
|
|
10114
10289
|
className: "w-full",
|
|
@@ -10128,7 +10303,7 @@ var QuizResultPerformance = forwardRef19(
|
|
|
10128
10303
|
);
|
|
10129
10304
|
}
|
|
10130
10305
|
);
|
|
10131
|
-
var QuizListResult =
|
|
10306
|
+
var QuizListResult = forwardRef20(({ className, onSubjectClick, ...props }, ref) => {
|
|
10132
10307
|
const { getQuestionsGroupedBySubject } = useQuizStore();
|
|
10133
10308
|
const groupedQuestions = getQuestionsGroupedBySubject();
|
|
10134
10309
|
const subjectsStats = Object.entries(groupedQuestions).map(
|
|
@@ -10155,9 +10330,9 @@ var QuizListResult = forwardRef19(({ className, onSubjectClick, ...props }, ref)
|
|
|
10155
10330
|
};
|
|
10156
10331
|
}
|
|
10157
10332
|
);
|
|
10158
|
-
return /* @__PURE__ */
|
|
10159
|
-
/* @__PURE__ */
|
|
10160
|
-
/* @__PURE__ */
|
|
10333
|
+
return /* @__PURE__ */ jsxs33("section", { ref, className, ...props, children: [
|
|
10334
|
+
/* @__PURE__ */ jsx40("p", { className: "pt-6 pb-4 text-text-950 font-bold text-lg", children: "Mat\xE9rias" }),
|
|
10335
|
+
/* @__PURE__ */ jsx40("ul", { className: "flex flex-col gap-2", children: subjectsStats.map((subject) => /* @__PURE__ */ jsx40("li", { children: /* @__PURE__ */ jsx40(
|
|
10161
10336
|
CardResults,
|
|
10162
10337
|
{
|
|
10163
10338
|
onClick: () => onSubjectClick?.(subject.subject.id),
|
|
@@ -10179,16 +10354,16 @@ var QuizListResultByMateria = ({
|
|
|
10179
10354
|
const { getQuestionsGroupedBySubject, getQuestionIndex } = useQuizStore();
|
|
10180
10355
|
const groupedQuestions = getQuestionsGroupedBySubject();
|
|
10181
10356
|
const answeredQuestions = groupedQuestions[subject] || [];
|
|
10182
|
-
return /* @__PURE__ */
|
|
10183
|
-
/* @__PURE__ */
|
|
10184
|
-
/* @__PURE__ */
|
|
10185
|
-
/* @__PURE__ */
|
|
10186
|
-
/* @__PURE__ */
|
|
10357
|
+
return /* @__PURE__ */ jsxs33("div", { className: "flex flex-col", children: [
|
|
10358
|
+
/* @__PURE__ */ jsx40("div", { className: "flex flex-row pt-4 justify-between", children: /* @__PURE__ */ jsx40("p", { className: "text-text-950 font-bold text-2xl", children: answeredQuestions?.[0]?.knowledgeMatrix?.[0]?.subject?.name ?? "Sem mat\xE9ria" }) }),
|
|
10359
|
+
/* @__PURE__ */ jsxs33("section", { className: "flex flex-col ", children: [
|
|
10360
|
+
/* @__PURE__ */ jsx40("p", { className: "pt-6 pb-4 text-text-950 font-bold text-lg", children: "Resultado das quest\xF5es" }),
|
|
10361
|
+
/* @__PURE__ */ jsx40("ul", { className: "flex flex-col gap-2 pt-4", children: answeredQuestions.map((question) => {
|
|
10187
10362
|
const questionIndex = getQuestionIndex(
|
|
10188
10363
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
10189
10364
|
question.questionId ?? question.id
|
|
10190
10365
|
);
|
|
10191
|
-
return /* @__PURE__ */
|
|
10366
|
+
return /* @__PURE__ */ jsx40("li", { children: /* @__PURE__ */ jsx40(
|
|
10192
10367
|
CardStatus,
|
|
10193
10368
|
{
|
|
10194
10369
|
className: "max-w-full",
|
|
@@ -10211,12 +10386,12 @@ var QuizListResultByMateria = ({
|
|
|
10211
10386
|
};
|
|
10212
10387
|
|
|
10213
10388
|
// src/components/LoadingModal/loadingModal.tsx
|
|
10214
|
-
import { forwardRef as
|
|
10215
|
-
import { jsx as
|
|
10216
|
-
var LoadingModal =
|
|
10389
|
+
import { forwardRef as forwardRef21 } from "react";
|
|
10390
|
+
import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
10391
|
+
var LoadingModal = forwardRef21(
|
|
10217
10392
|
({ open, title = "Titulo...", subtitle = "Subtitulo...", ...props }, ref) => {
|
|
10218
10393
|
if (!open) return null;
|
|
10219
|
-
return /* @__PURE__ */
|
|
10394
|
+
return /* @__PURE__ */ jsx41(
|
|
10220
10395
|
"div",
|
|
10221
10396
|
{
|
|
10222
10397
|
ref,
|
|
@@ -10225,8 +10400,8 @@ var LoadingModal = forwardRef20(
|
|
|
10225
10400
|
"aria-describedby": "loading-modal-subtitle",
|
|
10226
10401
|
className: "fixed inset-0 z-50 flex items-center justify-center bg-background/90 backdrop-blur-xs",
|
|
10227
10402
|
...props,
|
|
10228
|
-
children: /* @__PURE__ */
|
|
10229
|
-
/* @__PURE__ */
|
|
10403
|
+
children: /* @__PURE__ */ jsxs34("div", { className: "w-full max-w-[364px] flex flex-col items-center justify-center gap-14", children: [
|
|
10404
|
+
/* @__PURE__ */ jsx41("span", { className: "animate-spin", "aria-hidden": "true", children: /* @__PURE__ */ jsxs34(
|
|
10230
10405
|
"svg",
|
|
10231
10406
|
{
|
|
10232
10407
|
width: "102",
|
|
@@ -10237,14 +10412,14 @@ var LoadingModal = forwardRef20(
|
|
|
10237
10412
|
"aria-hidden": "true",
|
|
10238
10413
|
focusable: false,
|
|
10239
10414
|
children: [
|
|
10240
|
-
/* @__PURE__ */
|
|
10415
|
+
/* @__PURE__ */ jsx41(
|
|
10241
10416
|
"path",
|
|
10242
10417
|
{
|
|
10243
10418
|
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",
|
|
10244
10419
|
className: "fill-primary-100"
|
|
10245
10420
|
}
|
|
10246
10421
|
),
|
|
10247
|
-
/* @__PURE__ */
|
|
10422
|
+
/* @__PURE__ */ jsx41(
|
|
10248
10423
|
"path",
|
|
10249
10424
|
{
|
|
10250
10425
|
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",
|
|
@@ -10254,9 +10429,9 @@ var LoadingModal = forwardRef20(
|
|
|
10254
10429
|
]
|
|
10255
10430
|
}
|
|
10256
10431
|
) }),
|
|
10257
|
-
/* @__PURE__ */
|
|
10258
|
-
/* @__PURE__ */
|
|
10259
|
-
/* @__PURE__ */
|
|
10432
|
+
/* @__PURE__ */ jsxs34("span", { className: "flex flex-col gap-4 text-center", children: [
|
|
10433
|
+
/* @__PURE__ */ jsx41("p", { id: "loading-modal-title", className: "text-text-950 text-lg", children: title }),
|
|
10434
|
+
/* @__PURE__ */ jsx41("p", { id: "loading-modal-subtitle", className: "text-text-600 text-lg", children: subtitle })
|
|
10260
10435
|
] })
|
|
10261
10436
|
] })
|
|
10262
10437
|
}
|
|
@@ -10267,7 +10442,7 @@ var loadingModal_default = LoadingModal;
|
|
|
10267
10442
|
|
|
10268
10443
|
// src/components/NotificationCard/NotificationCard.tsx
|
|
10269
10444
|
import { DotsThreeVertical as DotsThreeVertical3, Bell as Bell2 } from "phosphor-react";
|
|
10270
|
-
import { useState as
|
|
10445
|
+
import { useState as useState19, useEffect as useEffect17 } from "react";
|
|
10271
10446
|
|
|
10272
10447
|
// src/store/notificationStore.ts
|
|
10273
10448
|
import { create as create8 } from "zustand";
|
|
@@ -10510,14 +10685,14 @@ var createNotificationStore = (apiClient) => {
|
|
|
10510
10685
|
};
|
|
10511
10686
|
|
|
10512
10687
|
// src/components/NotificationCard/NotificationCard.tsx
|
|
10513
|
-
import { Fragment as
|
|
10688
|
+
import { Fragment as Fragment11, jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
10514
10689
|
var NotificationEmpty = ({
|
|
10515
10690
|
emptyStateImage,
|
|
10516
10691
|
emptyStateTitle = "Nenhuma notifica\xE7\xE3o no momento",
|
|
10517
10692
|
emptyStateDescription = "Voc\xEA est\xE1 em dia com todas as novidades. Volte depois para conferir atualiza\xE7\xF5es!"
|
|
10518
10693
|
}) => {
|
|
10519
|
-
return /* @__PURE__ */
|
|
10520
|
-
emptyStateImage && /* @__PURE__ */
|
|
10694
|
+
return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col items-center justify-center gap-4 p-6 w-full", children: [
|
|
10695
|
+
emptyStateImage && /* @__PURE__ */ jsx42("div", { className: "w-20 h-20 flex items-center justify-center", children: /* @__PURE__ */ jsx42(
|
|
10521
10696
|
"img",
|
|
10522
10697
|
{
|
|
10523
10698
|
src: emptyStateImage,
|
|
@@ -10527,17 +10702,17 @@ var NotificationEmpty = ({
|
|
|
10527
10702
|
className: "object-contain"
|
|
10528
10703
|
}
|
|
10529
10704
|
) }),
|
|
10530
|
-
/* @__PURE__ */
|
|
10531
|
-
/* @__PURE__ */
|
|
10705
|
+
/* @__PURE__ */ jsx42("h3", { className: "text-xl font-semibold text-text-950 text-center leading-[23px]", children: emptyStateTitle }),
|
|
10706
|
+
/* @__PURE__ */ jsx42("p", { className: "text-sm font-normal text-text-400 text-center max-w-[316px] leading-[21px]", children: emptyStateDescription })
|
|
10532
10707
|
] });
|
|
10533
10708
|
};
|
|
10534
10709
|
var NotificationHeader = ({
|
|
10535
10710
|
unreadCount,
|
|
10536
10711
|
variant = "modal"
|
|
10537
10712
|
}) => {
|
|
10538
|
-
return /* @__PURE__ */
|
|
10539
|
-
variant === "modal" ? /* @__PURE__ */
|
|
10540
|
-
unreadCount > 0 && /* @__PURE__ */
|
|
10713
|
+
return /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between", children: [
|
|
10714
|
+
variant === "modal" ? /* @__PURE__ */ jsx42(Text_default, { size: "sm", weight: "bold", className: "text-text-950", children: "Notifica\xE7\xF5es" }) : /* @__PURE__ */ jsx42("h3", { className: "text-sm font-semibold text-text-950", children: "Notifica\xE7\xF5es" }),
|
|
10715
|
+
unreadCount > 0 && /* @__PURE__ */ jsxs35("span", { className: "px-2 py-1 bg-info-100 text-info-700 text-xs rounded-full", children: [
|
|
10541
10716
|
unreadCount,
|
|
10542
10717
|
" n\xE3o lidas"
|
|
10543
10718
|
] })
|
|
@@ -10572,7 +10747,7 @@ var SingleNotificationCard = ({
|
|
|
10572
10747
|
onNavigate();
|
|
10573
10748
|
}
|
|
10574
10749
|
};
|
|
10575
|
-
return /* @__PURE__ */
|
|
10750
|
+
return /* @__PURE__ */ jsxs35(
|
|
10576
10751
|
"div",
|
|
10577
10752
|
{
|
|
10578
10753
|
className: cn(
|
|
@@ -10581,20 +10756,20 @@ var SingleNotificationCard = ({
|
|
|
10581
10756
|
className
|
|
10582
10757
|
),
|
|
10583
10758
|
children: [
|
|
10584
|
-
/* @__PURE__ */
|
|
10585
|
-
!isRead && /* @__PURE__ */
|
|
10586
|
-
/* @__PURE__ */
|
|
10587
|
-
/* @__PURE__ */
|
|
10588
|
-
/* @__PURE__ */
|
|
10759
|
+
/* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2 w-full", children: [
|
|
10760
|
+
!isRead && /* @__PURE__ */ jsx42("div", { className: "w-[7px] h-[7px] bg-info-300 rounded-full flex-shrink-0" }),
|
|
10761
|
+
/* @__PURE__ */ jsx42("h3", { className: "font-bold text-sm leading-4 text-text-950 flex-grow", children: title }),
|
|
10762
|
+
/* @__PURE__ */ jsxs35(DropdownMenu_default, { children: [
|
|
10763
|
+
/* @__PURE__ */ jsx42(
|
|
10589
10764
|
DropdownMenuTrigger,
|
|
10590
10765
|
{
|
|
10591
10766
|
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",
|
|
10592
10767
|
"aria-label": "Menu de a\xE7\xF5es",
|
|
10593
|
-
children: /* @__PURE__ */
|
|
10768
|
+
children: /* @__PURE__ */ jsx42(DotsThreeVertical3, { size: 24 })
|
|
10594
10769
|
}
|
|
10595
10770
|
),
|
|
10596
|
-
/* @__PURE__ */
|
|
10597
|
-
!isRead && /* @__PURE__ */
|
|
10771
|
+
/* @__PURE__ */ jsxs35(DropdownMenuContent, { align: "end", className: "min-w-[160px]", children: [
|
|
10772
|
+
!isRead && /* @__PURE__ */ jsx42(
|
|
10598
10773
|
DropdownMenuItem,
|
|
10599
10774
|
{
|
|
10600
10775
|
onClick: handleMarkAsRead,
|
|
@@ -10602,14 +10777,14 @@ var SingleNotificationCard = ({
|
|
|
10602
10777
|
children: "Marcar como lida"
|
|
10603
10778
|
}
|
|
10604
10779
|
),
|
|
10605
|
-
/* @__PURE__ */
|
|
10780
|
+
/* @__PURE__ */ jsx42(DropdownMenuItem, { onClick: handleDelete, className: "text-error-600", children: "Deletar" })
|
|
10606
10781
|
] })
|
|
10607
10782
|
] })
|
|
10608
10783
|
] }),
|
|
10609
|
-
/* @__PURE__ */
|
|
10610
|
-
/* @__PURE__ */
|
|
10611
|
-
/* @__PURE__ */
|
|
10612
|
-
onNavigate && actionLabel && /* @__PURE__ */
|
|
10784
|
+
/* @__PURE__ */ jsx42("p", { className: "text-sm leading-[21px] text-text-800 w-full", children: message }),
|
|
10785
|
+
/* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between w-full", children: [
|
|
10786
|
+
/* @__PURE__ */ jsx42("span", { className: "text-sm font-medium text-text-400", children: time }),
|
|
10787
|
+
onNavigate && actionLabel && /* @__PURE__ */ jsx42(
|
|
10613
10788
|
"button",
|
|
10614
10789
|
{
|
|
10615
10790
|
type: "button",
|
|
@@ -10636,9 +10811,9 @@ var NotificationList = ({
|
|
|
10636
10811
|
className
|
|
10637
10812
|
}) => {
|
|
10638
10813
|
if (error) {
|
|
10639
|
-
return /* @__PURE__ */
|
|
10640
|
-
/* @__PURE__ */
|
|
10641
|
-
onRetry && /* @__PURE__ */
|
|
10814
|
+
return /* @__PURE__ */ jsxs35("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: [
|
|
10815
|
+
/* @__PURE__ */ jsx42("p", { className: "text-sm text-error-600", children: error }),
|
|
10816
|
+
onRetry && /* @__PURE__ */ jsx42(
|
|
10642
10817
|
"button",
|
|
10643
10818
|
{
|
|
10644
10819
|
type: "button",
|
|
@@ -10650,8 +10825,8 @@ var NotificationList = ({
|
|
|
10650
10825
|
] });
|
|
10651
10826
|
}
|
|
10652
10827
|
if (loading) {
|
|
10653
|
-
return /* @__PURE__ */
|
|
10654
|
-
(skeletonId) => /* @__PURE__ */
|
|
10828
|
+
return /* @__PURE__ */ jsx42("div", { className: "flex flex-col gap-0 w-full", children: ["skeleton-first", "skeleton-second", "skeleton-third"].map(
|
|
10829
|
+
(skeletonId) => /* @__PURE__ */ jsx42(
|
|
10655
10830
|
SkeletonCard,
|
|
10656
10831
|
{
|
|
10657
10832
|
className: "p-4 border-b border-border-200"
|
|
@@ -10661,11 +10836,11 @@ var NotificationList = ({
|
|
|
10661
10836
|
) });
|
|
10662
10837
|
}
|
|
10663
10838
|
if (!groupedNotifications || groupedNotifications.length === 0) {
|
|
10664
|
-
return renderEmpty ? /* @__PURE__ */
|
|
10839
|
+
return renderEmpty ? /* @__PURE__ */ jsx42("div", { className: "w-full", children: renderEmpty() }) : /* @__PURE__ */ jsx42(NotificationEmpty, {});
|
|
10665
10840
|
}
|
|
10666
|
-
return /* @__PURE__ */
|
|
10667
|
-
/* @__PURE__ */
|
|
10668
|
-
group.notifications.map((notification) => /* @__PURE__ */
|
|
10841
|
+
return /* @__PURE__ */ jsx42("div", { className: cn("flex flex-col gap-0 w-full", className), children: groupedNotifications.map((group, idx) => /* @__PURE__ */ jsxs35("div", { className: "flex flex-col", children: [
|
|
10842
|
+
/* @__PURE__ */ jsx42("div", { className: "flex items-end px-4 py-6 pb-4", children: /* @__PURE__ */ jsx42("h4", { className: "text-lg font-bold text-text-500 flex-grow", children: group.label }) }),
|
|
10843
|
+
group.notifications.map((notification) => /* @__PURE__ */ jsx42(
|
|
10669
10844
|
SingleNotificationCard,
|
|
10670
10845
|
{
|
|
10671
10846
|
title: notification.title,
|
|
@@ -10706,7 +10881,7 @@ var NotificationCenter = ({
|
|
|
10706
10881
|
className
|
|
10707
10882
|
}) => {
|
|
10708
10883
|
const { isMobile } = useMobile();
|
|
10709
|
-
const [isModalOpen, setIsModalOpen] =
|
|
10884
|
+
const [isModalOpen, setIsModalOpen] = useState19(false);
|
|
10710
10885
|
const handleMobileClick = () => {
|
|
10711
10886
|
setIsModalOpen(true);
|
|
10712
10887
|
onFetchNotifications?.();
|
|
@@ -10723,7 +10898,7 @@ var NotificationCenter = ({
|
|
|
10723
10898
|
onCleanup?.();
|
|
10724
10899
|
onNavigateById?.(entityType, entityId);
|
|
10725
10900
|
};
|
|
10726
|
-
const renderEmptyState = () => /* @__PURE__ */
|
|
10901
|
+
const renderEmptyState = () => /* @__PURE__ */ jsx42(
|
|
10727
10902
|
NotificationEmpty,
|
|
10728
10903
|
{
|
|
10729
10904
|
emptyStateImage,
|
|
@@ -10732,17 +10907,17 @@ var NotificationCenter = ({
|
|
|
10732
10907
|
}
|
|
10733
10908
|
);
|
|
10734
10909
|
if (isMobile) {
|
|
10735
|
-
return /* @__PURE__ */
|
|
10736
|
-
/* @__PURE__ */
|
|
10910
|
+
return /* @__PURE__ */ jsxs35(Fragment11, { children: [
|
|
10911
|
+
/* @__PURE__ */ jsx42(
|
|
10737
10912
|
IconButton_default,
|
|
10738
10913
|
{
|
|
10739
10914
|
active: isModalOpen,
|
|
10740
10915
|
onClick: handleMobileClick,
|
|
10741
|
-
icon: /* @__PURE__ */
|
|
10916
|
+
icon: /* @__PURE__ */ jsx42(Bell2, { size: 24, className: "text-primary" }),
|
|
10742
10917
|
className
|
|
10743
10918
|
}
|
|
10744
10919
|
),
|
|
10745
|
-
/* @__PURE__ */
|
|
10920
|
+
/* @__PURE__ */ jsx42(
|
|
10746
10921
|
Modal_default,
|
|
10747
10922
|
{
|
|
10748
10923
|
isOpen: isModalOpen,
|
|
@@ -10752,10 +10927,10 @@ var NotificationCenter = ({
|
|
|
10752
10927
|
hideCloseButton: false,
|
|
10753
10928
|
closeOnBackdropClick: true,
|
|
10754
10929
|
closeOnEscape: true,
|
|
10755
|
-
children: /* @__PURE__ */
|
|
10756
|
-
/* @__PURE__ */
|
|
10757
|
-
/* @__PURE__ */
|
|
10758
|
-
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */
|
|
10930
|
+
children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-col h-full max-h-[80vh]", children: [
|
|
10931
|
+
/* @__PURE__ */ jsx42("div", { className: "px-0 pb-3 border-b border-border-200", children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between", children: [
|
|
10932
|
+
/* @__PURE__ */ jsx42(NotificationHeader, { unreadCount, variant: "modal" }),
|
|
10933
|
+
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ jsx42(
|
|
10759
10934
|
"button",
|
|
10760
10935
|
{
|
|
10761
10936
|
type: "button",
|
|
@@ -10765,7 +10940,7 @@ var NotificationCenter = ({
|
|
|
10765
10940
|
}
|
|
10766
10941
|
)
|
|
10767
10942
|
] }) }),
|
|
10768
|
-
/* @__PURE__ */
|
|
10943
|
+
/* @__PURE__ */ jsx42("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsx42(
|
|
10769
10944
|
NotificationList,
|
|
10770
10945
|
{
|
|
10771
10946
|
groupedNotifications,
|
|
@@ -10788,13 +10963,13 @@ var NotificationCenter = ({
|
|
|
10788
10963
|
)
|
|
10789
10964
|
] });
|
|
10790
10965
|
}
|
|
10791
|
-
return /* @__PURE__ */
|
|
10792
|
-
/* @__PURE__ */
|
|
10966
|
+
return /* @__PURE__ */ jsxs35(DropdownMenu_default, { children: [
|
|
10967
|
+
/* @__PURE__ */ jsx42(DropdownMenuTrigger, { className: "text-primary cursor-pointer", children: /* @__PURE__ */ jsx42(
|
|
10793
10968
|
IconButton_default,
|
|
10794
10969
|
{
|
|
10795
10970
|
active: isActive,
|
|
10796
10971
|
onClick: handleDesktopClick,
|
|
10797
|
-
icon: /* @__PURE__ */
|
|
10972
|
+
icon: /* @__PURE__ */ jsx42(
|
|
10798
10973
|
Bell2,
|
|
10799
10974
|
{
|
|
10800
10975
|
size: 24,
|
|
@@ -10804,22 +10979,22 @@ var NotificationCenter = ({
|
|
|
10804
10979
|
className
|
|
10805
10980
|
}
|
|
10806
10981
|
) }),
|
|
10807
|
-
/* @__PURE__ */
|
|
10982
|
+
/* @__PURE__ */ jsx42(
|
|
10808
10983
|
DropdownMenuContent,
|
|
10809
10984
|
{
|
|
10810
10985
|
className: "min-w-[320px] max-w-[400px] max-h-[500px] overflow-hidden",
|
|
10811
10986
|
side: "bottom",
|
|
10812
10987
|
align: "end",
|
|
10813
|
-
children: /* @__PURE__ */
|
|
10814
|
-
/* @__PURE__ */
|
|
10815
|
-
/* @__PURE__ */
|
|
10988
|
+
children: /* @__PURE__ */ jsxs35("div", { className: "flex flex-col", children: [
|
|
10989
|
+
/* @__PURE__ */ jsx42("div", { className: "px-4 py-3 border-b border-border-200", children: /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between", children: [
|
|
10990
|
+
/* @__PURE__ */ jsx42(
|
|
10816
10991
|
NotificationHeader,
|
|
10817
10992
|
{
|
|
10818
10993
|
unreadCount,
|
|
10819
10994
|
variant: "dropdown"
|
|
10820
10995
|
}
|
|
10821
10996
|
),
|
|
10822
|
-
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */
|
|
10997
|
+
unreadCount > 0 && onMarkAllAsRead && /* @__PURE__ */ jsx42(
|
|
10823
10998
|
"button",
|
|
10824
10999
|
{
|
|
10825
11000
|
type: "button",
|
|
@@ -10829,7 +11004,7 @@ var NotificationCenter = ({
|
|
|
10829
11004
|
}
|
|
10830
11005
|
)
|
|
10831
11006
|
] }) }),
|
|
10832
|
-
/* @__PURE__ */
|
|
11007
|
+
/* @__PURE__ */ jsx42("div", { className: "max-h-[350px] overflow-y-auto", children: /* @__PURE__ */ jsx42(
|
|
10833
11008
|
NotificationList,
|
|
10834
11009
|
{
|
|
10835
11010
|
groupedNotifications,
|
|
@@ -10851,7 +11026,7 @@ var NotificationCenter = ({
|
|
|
10851
11026
|
var NotificationCard = (props) => {
|
|
10852
11027
|
switch (props.mode) {
|
|
10853
11028
|
case "single":
|
|
10854
|
-
return /* @__PURE__ */
|
|
11029
|
+
return /* @__PURE__ */ jsx42(
|
|
10855
11030
|
SingleNotificationCard,
|
|
10856
11031
|
{
|
|
10857
11032
|
title: props.title,
|
|
@@ -10866,7 +11041,7 @@ var NotificationCard = (props) => {
|
|
|
10866
11041
|
}
|
|
10867
11042
|
);
|
|
10868
11043
|
case "list":
|
|
10869
|
-
return /* @__PURE__ */
|
|
11044
|
+
return /* @__PURE__ */ jsx42(
|
|
10870
11045
|
NotificationList,
|
|
10871
11046
|
{
|
|
10872
11047
|
groupedNotifications: props.groupedNotifications ?? (props.notifications ? [
|
|
@@ -10887,9 +11062,9 @@ var NotificationCard = (props) => {
|
|
|
10887
11062
|
}
|
|
10888
11063
|
);
|
|
10889
11064
|
case "center":
|
|
10890
|
-
return /* @__PURE__ */
|
|
11065
|
+
return /* @__PURE__ */ jsx42(NotificationCenter, { ...props });
|
|
10891
11066
|
default:
|
|
10892
|
-
return /* @__PURE__ */
|
|
11067
|
+
return /* @__PURE__ */ jsx42("div", { className: "flex flex-col items-center gap-4 p-6 w-full", children: /* @__PURE__ */ jsx42("p", { className: "text-sm text-text-600", children: "Modo de notifica\xE7\xE3o n\xE3o reconhecido" }) });
|
|
10893
11068
|
}
|
|
10894
11069
|
};
|
|
10895
11070
|
var NotificationCard_default = NotificationCard;
|
|
@@ -10900,7 +11075,7 @@ var createUseNotificationStore = (apiClient) => {
|
|
|
10900
11075
|
};
|
|
10901
11076
|
|
|
10902
11077
|
// src/hooks/useNotifications.ts
|
|
10903
|
-
import { useCallback as
|
|
11078
|
+
import { useCallback as useCallback6 } from "react";
|
|
10904
11079
|
var createUseNotifications = (apiClient) => {
|
|
10905
11080
|
const useNotificationStore = createUseNotificationStore(apiClient);
|
|
10906
11081
|
return () => {
|
|
@@ -10919,7 +11094,7 @@ var createUseNotifications = (apiClient) => {
|
|
|
10919
11094
|
resetError,
|
|
10920
11095
|
getGroupedNotifications
|
|
10921
11096
|
} = useNotificationStore();
|
|
10922
|
-
const handleNavigate =
|
|
11097
|
+
const handleNavigate = useCallback6(
|
|
10923
11098
|
(entityType, entityId, onAfterNavigate) => {
|
|
10924
11099
|
if (entityType && entityId) {
|
|
10925
11100
|
switch (entityType.toUpperCase()) {
|
|
@@ -10937,7 +11112,7 @@ var createUseNotifications = (apiClient) => {
|
|
|
10937
11112
|
},
|
|
10938
11113
|
[]
|
|
10939
11114
|
);
|
|
10940
|
-
const getActionLabel =
|
|
11115
|
+
const getActionLabel = useCallback6(
|
|
10941
11116
|
(entityType) => {
|
|
10942
11117
|
if (!entityType) return void 0;
|
|
10943
11118
|
switch (entityType.toUpperCase()) {
|
|
@@ -10951,7 +11126,7 @@ var createUseNotifications = (apiClient) => {
|
|
|
10951
11126
|
},
|
|
10952
11127
|
[]
|
|
10953
11128
|
);
|
|
10954
|
-
const markAsReadAndNavigate =
|
|
11129
|
+
const markAsReadAndNavigate = useCallback6(
|
|
10955
11130
|
async (id, entityType, entityId, onAfterNavigate) => {
|
|
10956
11131
|
await markAsRead(id);
|
|
10957
11132
|
if (entityType && entityId) {
|
|
@@ -10960,11 +11135,11 @@ var createUseNotifications = (apiClient) => {
|
|
|
10960
11135
|
},
|
|
10961
11136
|
[markAsRead, handleNavigate]
|
|
10962
11137
|
);
|
|
10963
|
-
const refreshNotifications =
|
|
11138
|
+
const refreshNotifications = useCallback6(async () => {
|
|
10964
11139
|
resetError();
|
|
10965
11140
|
await fetchNotifications();
|
|
10966
11141
|
}, [resetError, fetchNotifications]);
|
|
10967
|
-
const formatNotification =
|
|
11142
|
+
const formatNotification = useCallback6(
|
|
10968
11143
|
(notification) => ({
|
|
10969
11144
|
...notification,
|
|
10970
11145
|
time: formatTimeAgo(notification.createdAt),
|
|
@@ -10973,7 +11148,7 @@ var createUseNotifications = (apiClient) => {
|
|
|
10973
11148
|
}),
|
|
10974
11149
|
[]
|
|
10975
11150
|
);
|
|
10976
|
-
const getFormattedGroupedNotifications =
|
|
11151
|
+
const getFormattedGroupedNotifications = useCallback6(() => {
|
|
10977
11152
|
const groups = getGroupedNotifications();
|
|
10978
11153
|
return groups.map((group) => ({
|
|
10979
11154
|
...group,
|
|
@@ -11108,6 +11283,7 @@ export {
|
|
|
11108
11283
|
Table_default as Table,
|
|
11109
11284
|
Text_default as Text,
|
|
11110
11285
|
TextArea_default as TextArea,
|
|
11286
|
+
ThemeToggle,
|
|
11111
11287
|
Toast_default as Toast,
|
|
11112
11288
|
Toaster_default as Toaster,
|
|
11113
11289
|
VideoPlayer_default as VideoPlayer,
|