@nualang/nualang-ui-components 0.1.1438 → 0.1.1440
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.
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { Box, Typography } from "@mui/material";
|
|
2
|
+
import DifficultyIcon from "@mui/icons-material/School";
|
|
3
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
+
const DIFFICULTY_ORDER = ["A1", "A2", "B1", "B2", "C1", "C2"];
|
|
5
|
+
const MAX_VISIBLE_DIFFICULTIES = 2;
|
|
6
|
+
const labelSx = {
|
|
7
|
+
fontSize: "0.75rem",
|
|
8
|
+
fontWeight: 500,
|
|
9
|
+
color: "text.secondary"
|
|
10
|
+
};
|
|
11
|
+
function normalizeDifficulties(difficulty) {
|
|
12
|
+
const values = Array.isArray(difficulty) ? difficulty : difficulty ? [difficulty] : [];
|
|
13
|
+
return DIFFICULTY_ORDER.filter(level => values.includes(level));
|
|
14
|
+
}
|
|
15
|
+
function TopicDifficultyBadge({
|
|
16
|
+
difficulty,
|
|
17
|
+
t,
|
|
18
|
+
sx
|
|
19
|
+
}) {
|
|
20
|
+
const levels = normalizeDifficulties(difficulty);
|
|
21
|
+
if (levels.length === 0) return null;
|
|
22
|
+
const levelLabels = levels.map(level => t(`card_${level}`));
|
|
23
|
+
const visibleLabels = levelLabels.slice(0, MAX_VISIBLE_DIFFICULTIES);
|
|
24
|
+
const overflowCount = levelLabels.length - visibleLabels.length;
|
|
25
|
+
return /*#__PURE__*/_jsxs(Box, {
|
|
26
|
+
role: "group",
|
|
27
|
+
"aria-label": `${t("difficulty")}: ${levelLabels.join(", ")}`,
|
|
28
|
+
"data-cy": "banner-difficulty",
|
|
29
|
+
sx: [theme => ({
|
|
30
|
+
position: "absolute",
|
|
31
|
+
right: 16,
|
|
32
|
+
bottom: 16,
|
|
33
|
+
maxWidth: "calc(100% - 120px)",
|
|
34
|
+
display: "inline-flex",
|
|
35
|
+
alignItems: "center",
|
|
36
|
+
gap: 0.75,
|
|
37
|
+
height: 28,
|
|
38
|
+
pl: 1,
|
|
39
|
+
pr: 1.25,
|
|
40
|
+
borderRadius: "16px",
|
|
41
|
+
bgcolor: "background.paper",
|
|
42
|
+
boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
|
|
43
|
+
[theme.breakpoints.down("sm")]: {
|
|
44
|
+
right: 8,
|
|
45
|
+
bottom: 8
|
|
46
|
+
}
|
|
47
|
+
}), ...(Array.isArray(sx) ? sx : [sx])],
|
|
48
|
+
children: [/*#__PURE__*/_jsx(DifficultyIcon, {
|
|
49
|
+
sx: {
|
|
50
|
+
fontSize: 18,
|
|
51
|
+
color: "text.secondary"
|
|
52
|
+
}
|
|
53
|
+
}), /*#__PURE__*/_jsx(Typography, {
|
|
54
|
+
component: "span",
|
|
55
|
+
noWrap: true,
|
|
56
|
+
"aria-hidden": "true",
|
|
57
|
+
sx: {
|
|
58
|
+
...labelSx,
|
|
59
|
+
minWidth: 0
|
|
60
|
+
},
|
|
61
|
+
children: visibleLabels.join(" · ")
|
|
62
|
+
}), overflowCount > 0 && /*#__PURE__*/_jsx(Typography, {
|
|
63
|
+
component: "span",
|
|
64
|
+
"aria-hidden": "true",
|
|
65
|
+
sx: {
|
|
66
|
+
...labelSx,
|
|
67
|
+
fontWeight: 600,
|
|
68
|
+
flexShrink: 0
|
|
69
|
+
},
|
|
70
|
+
children: `+${overflowCount}`
|
|
71
|
+
})]
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
export default TopicDifficultyBadge;
|
package/dist/index.js
CHANGED
|
@@ -4,5 +4,6 @@ import { configureJapaneseDict, prefetchJapaneseTokenizer, KUROMOJI_DICT_FILES }
|
|
|
4
4
|
import NualaMascot from "./Misc/NualaMascot/NualaMascot";
|
|
5
5
|
import AchievementsBanner from "./Misc/AchievementsBanner/AchievementsBanner";
|
|
6
6
|
import MedalCard from "./Misc/MedalCard/MedalCard";
|
|
7
|
+
import TopicDifficultyBadge from "./Misc/TopicDifficultyBadge/TopicDifficultyBadge";
|
|
7
8
|
import ContentTypeFilter from "./Forms/ContentTypeFilter/ContentTypeFilter";
|
|
8
|
-
export { CourseCard, getTheme, configureJapaneseDict, prefetchJapaneseTokenizer, KUROMOJI_DICT_FILES, NualaMascot, AchievementsBanner, MedalCard, ContentTypeFilter };
|
|
9
|
+
export { CourseCard, getTheme, configureJapaneseDict, prefetchJapaneseTokenizer, KUROMOJI_DICT_FILES, NualaMascot, AchievementsBanner, MedalCard, TopicDifficultyBadge, ContentTypeFilter };
|