@anywayseo/tools 1.5.4 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.md +69 -62
  2. package/dist/components/base/center/index.d.ts +1 -3
  3. package/dist/components/{expert → base/expert}/bio/index.d.ts +1 -1
  4. package/dist/components/{expert → base/expert}/index.d.ts +1 -1
  5. package/dist/components/base/grid/index.d.ts +3 -11
  6. package/dist/components/base/index.d.ts +2 -0
  7. package/dist/components/base/link-button/index.d.ts +2 -2
  8. package/dist/components/base/pulse-button/index.d.ts +8 -0
  9. package/dist/components/bonus-card/index.d.ts +1 -3
  10. package/dist/components/contact-form/index.d.ts +3 -1
  11. package/dist/components/expert-tip/index.d.ts +2 -3
  12. package/dist/components/faq/index.d.ts +2 -4
  13. package/dist/components/feature-card/index.d.ts +5 -0
  14. package/dist/components/features/index.d.ts +2 -3
  15. package/dist/components/game-card/index.d.ts +1 -3
  16. package/dist/components/game-demo/index.d.ts +3 -4
  17. package/dist/components/game-demo/preview/index.d.ts +3 -3
  18. package/dist/components/how-to/index.d.ts +2 -3
  19. package/dist/components/index.cjs +4 -1
  20. package/dist/components/index.d.ts +1 -0
  21. package/dist/components/index.mjs +12 -9
  22. package/dist/components/layout/footer/navigation/index.d.ts +5 -1
  23. package/dist/components/layout/header/{navbar/navigation → navigation}/desktop/item/index.d.ts +1 -1
  24. package/dist/components/layout/header/{navbar/navigation → navigation}/mobile/item/index.d.ts +1 -1
  25. package/dist/components/layout/header/{navbar/navigation → navigation}/types.d.ts +1 -1
  26. package/dist/components/list/index.d.ts +1 -2
  27. package/dist/components/pros-cons/index.d.ts +2 -3
  28. package/dist/components/table/index.d.ts +0 -1
  29. package/dist/components/tabs/index.d.ts +1 -2
  30. package/dist/index-BNb-P8a6.mjs +17 -0
  31. package/dist/index-BhsXlbd8.js +16 -0
  32. package/dist/{index-jvxaXXE3.js → index-BrTxsE2A.js} +18 -0
  33. package/dist/{index-C95D6IAi.mjs → index-CHSIkTv7.mjs} +138 -140
  34. package/dist/index-CnohyDGd.js +965 -0
  35. package/dist/{index-CJvs4SfG.mjs → index-j8Vo42fz.mjs} +18 -0
  36. package/dist/index.cjs +9 -5
  37. package/dist/index.mjs +17 -13
  38. package/dist/providers/index.cjs +3 -3
  39. package/dist/providers/index.d.ts +1 -1
  40. package/dist/providers/index.mjs +3 -3
  41. package/dist/providers/site-provider/index.d.ts +11 -0
  42. package/dist/types/components/image/index.d.ts +2 -0
  43. package/dist/types/components/index.d.ts +1 -0
  44. package/dist/types/index.d.ts +1 -1
  45. package/dist/types/site/index.d.ts +32 -0
  46. package/dist/utils/animation/index.d.ts +8 -0
  47. package/dist/utils/index.cjs +2 -1
  48. package/dist/utils/index.d.ts +1 -0
  49. package/dist/utils/index.mjs +2 -1
  50. package/package.json +104 -105
  51. package/dist/components/layout/header/navbar/index.d.ts +0 -6
  52. package/dist/index-BbMf3hdf.js +0 -967
  53. package/dist/index-Bs4zA1wD.mjs +0 -17
  54. package/dist/index-D96zh94V.js +0 -16
  55. package/dist/providers/site-metadata-provider/index.d.ts +0 -14
  56. package/dist/types/site-metadata/index.d.ts +0 -10
  57. /package/dist/components/layout/header/{navbar/brand → brand}/index.d.ts +0 -0
  58. /package/dist/components/layout/header/{navbar/navigation → navigation}/desktop/index.d.ts +0 -0
  59. /package/dist/components/layout/header/{navbar/navigation → navigation}/index.d.ts +0 -0
  60. /package/dist/components/layout/header/{navbar/navigation → navigation}/mobile/index.d.ts +0 -0
  61. /package/dist/components/layout/header/{navbar/theme-toggler → theme-toggler}/index.d.ts +0 -0
@@ -1,967 +0,0 @@
1
- "use strict";
2
- const jsxRuntime = require("react/jsx-runtime");
3
- const react$1 = require("@chakra-ui/react");
4
- const reactI18next = require("react-i18next");
5
- const icons = require("@chakra-ui/icons");
6
- const gatsbyPluginImage = require("gatsby-plugin-image");
7
- require("@mdx-js/react");
8
- const index = require("./index-D96zh94V.js");
9
- const react = require("react");
10
- const index$1 = require("./index-IpSV-c71.js");
11
- const react$2 = require("@emotion/react");
12
- const i18n = require("./index-DCIXk-YH.js");
13
- const i18n$1 = require("i18next");
14
- const index$2 = require("./index-jvxaXXE3.js");
15
- require("@ctrl/tinycolor");
16
- const gatsby = require("gatsby");
17
- const ONE_LINE_HEIGHT = 24;
18
- const Bio = ({ content, maxLines = 1 }) => {
19
- const ref = react.useRef(null);
20
- const [showToggle, setShowToggle] = react.useState(false);
21
- const [isExpanded, setIsExpanded] = react.useState(false);
22
- const { t } = reactI18next.useTranslation("author");
23
- react.useLayoutEffect(() => {
24
- if (ref.current) {
25
- const { scrollWidth, clientWidth, scrollHeight, clientHeight } = ref.current;
26
- const isClamped = scrollWidth > clientWidth || scrollHeight > clientHeight;
27
- setShowToggle(isClamped);
28
- }
29
- return () => {
30
- setShowToggle(false);
31
- };
32
- }, []);
33
- function handleClick() {
34
- setIsExpanded((prev) => !prev);
35
- }
36
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { children: [
37
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Collapse, { in: isExpanded, startingHeight: ONE_LINE_HEIGHT * maxLines, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { ref, fontSize: "md", noOfLines: isExpanded ? void 0 : maxLines, children: content }) }),
38
- showToggle && /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { size: "sm", variant: "link", colorScheme: "blue", onClick: handleClick, children: isExpanded ? t("action.collapse") : t("action.expand") })
39
- ] });
40
- };
41
- const Expert = ({ expert, variant }) => {
42
- const { firstName, lastName, jobTitle, bio } = expert;
43
- const { expertImageData } = index.useSiteMetadataContext();
44
- const image = gatsbyPluginImage.getImage(expertImageData);
45
- const fullName = `${firstName} ${lastName}`;
46
- if (variant === "short") {
47
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "article", align: "center", gap: 4, children: [
48
- !!image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { w: 12, h: 12, children: /* @__PURE__ */ jsxRuntime.jsx(gatsbyPluginImage.GatsbyImage, { image, alt: fullName, style: { borderRadius: "50%" } }) }),
49
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { fontWeight: "semibold", children: [
50
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: fullName }),
51
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { color: "gray.500", children: expert.jobTitle })
52
- ] })
53
- ] });
54
- }
55
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
56
- !!image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { grow: 1, maxW: { base: 48, sm: 32 }, children: /* @__PURE__ */ jsxRuntime.jsx(gatsbyPluginImage.GatsbyImage, { image, alt: fullName, style: { borderRadius: "50%" } }) }),
57
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { w: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { children: [
58
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { fontSize: "lg", fontWeight: 600, children: [
59
- `${fullName}, `,
60
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", color: "gray.500", children: jobTitle })
61
- ] }),
62
- /* @__PURE__ */ jsxRuntime.jsx(Bio, { content: bio })
63
- ] }) })
64
- ] });
65
- };
66
- const Author = ({ author, ...cardProps }) => {
67
- const { t } = reactI18next.useTranslation("author");
68
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Card, { as: "article", variant: "filled", ...cardProps, children: [
69
- /* @__PURE__ */ jsxRuntime.jsx(react$1.CardHeader, { pb: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { size: "md", children: t("title") }) }),
70
- /* @__PURE__ */ jsxRuntime.jsx(
71
- react$1.CardBody,
72
- {
73
- display: "flex",
74
- flexDirection: { base: "column", sm: "row" },
75
- alignItems: { base: "center", sm: "flex-start" },
76
- gap: 4,
77
- children: /* @__PURE__ */ jsxRuntime.jsx(Expert, { expert: author, variant: "full" })
78
- }
79
- )
80
- ] });
81
- };
82
- const Center = ({ children, className, ...boxProps }) => {
83
- return /* @__PURE__ */ jsxRuntime.jsx(react$1.Center, { className, ...boxProps, children });
84
- };
85
- const defaultColumns = { base: 1, sm: 2, md: 3, lg: 4, xl: 5 };
86
- const Grid = ({ items, columns = defaultColumns, gap, render, getKey, className, ...boxProps }) => {
87
- return /* @__PURE__ */ jsxRuntime.jsx(
88
- react$1.SimpleGrid,
89
- {
90
- as: "ul",
91
- columns,
92
- spacing: gap,
93
- p: 0,
94
- m: 0,
95
- listStyleType: "none",
96
- className,
97
- ...boxProps,
98
- children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "li", children: render(item) }, getKey ? getKey(item) : index2))
99
- }
100
- );
101
- };
102
- const LinkButton = ({ label, url, width = "auto" }) => {
103
- return /* @__PURE__ */ jsxRuntime.jsx(
104
- react$1.Button,
105
- {
106
- as: react$1.Link,
107
- href: url,
108
- w: width,
109
- bg: "brand.600",
110
- textTransform: "uppercase",
111
- _hover: { textDecoration: "none", bg: "brand.300" },
112
- _active: { transform: "scale(0.95)" },
113
- children: label
114
- }
115
- );
116
- };
117
- const BonusCardContent = ({ content }) => {
118
- const { t } = reactI18next.useTranslation("author");
119
- return /* @__PURE__ */ jsxRuntime.jsx(react$1.Popover, { flip: false, matchWidth: false, placement: "bottom", children: ({ isOpen }) => /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
120
- /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { size: "sm", variant: "link", color: "white", children: isOpen ? t("action.collapse") : t("action.expand") }) }),
121
- /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverContent, { w: 60, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverBody, { children: Array.isArray(content) ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { children: content.map((paragraph, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", children: paragraph }, index2)) }) : /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: content }) }) })
122
- ] }) });
123
- };
124
- const BonusCardTitle = ({ content }) => {
125
- return /* @__PURE__ */ jsxRuntime.jsx(
126
- react$1.Text,
127
- {
128
- as: "h3",
129
- display: "inline-block",
130
- py: 1,
131
- px: 2,
132
- borderRadius: "md",
133
- bg: "yellow",
134
- color: "black",
135
- fontWeight: "bold",
136
- fontSize: "lg",
137
- children: content
138
- }
139
- );
140
- };
141
- const BonusCard = ({ title, subtitle, content, link, image, className }) => {
142
- return /* @__PURE__ */ jsxRuntime.jsxs(
143
- react$1.Card,
144
- {
145
- as: "article",
146
- h: "full",
147
- bg: "linear-gradient(90deg, #3b1f47, #731d58)",
148
- _before: image ? {
149
- content: '""',
150
- position: "absolute",
151
- top: 0,
152
- left: 0,
153
- w: "100%",
154
- h: "100%",
155
- bgImage: `url(${image})`,
156
- bgSize: "cover",
157
- bgPosition: "center",
158
- filter: "blur(0.05em) opacity(50%)",
159
- zIndex: 0
160
- } : void 0,
161
- className,
162
- children: [
163
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.CardBody, { as: "section", pb: 0, flex: 1, children: [
164
- /* @__PURE__ */ jsxRuntime.jsx(BonusCardTitle, { content: title }),
165
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "2xl", fontWeight: "bold", my: 2, children: subtitle }),
166
- /* @__PURE__ */ jsxRuntime.jsx(BonusCardContent, { content })
167
- ] }),
168
- /* @__PURE__ */ jsxRuntime.jsx(react$1.CardFooter, { as: "footer", p: 4, children: /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { ...link, width: "full" }) })
169
- ]
170
- }
171
- );
172
- };
173
- const ContactForm = () => {
174
- const toast = react$1.useToast();
175
- const { t } = reactI18next.useTranslation("contactForm");
176
- function handleSubmit(event) {
177
- event.preventDefault();
178
- const form = event.currentTarget;
179
- const formData = new FormData(form);
180
- const name = formData.get("name");
181
- const email = formData.get("email");
182
- const message = formData.get("message");
183
- if (name && email && message) {
184
- form.reset();
185
- toast({
186
- title: t("notification.title", { name }),
187
- description: t("notification.description", { email }),
188
- colorScheme: "brand",
189
- status: "success",
190
- duration: 5e3,
191
- isClosable: true
192
- });
193
- } else {
194
- console.error("Please fill out both fields");
195
- }
196
- }
197
- return /* @__PURE__ */ jsxRuntime.jsx(
198
- react$1.Box,
199
- {
200
- as: "form",
201
- borderRadius: "lg",
202
- p: 8,
203
- color: react$1.useColorModeValue("gray.700", "whiteAlpha.900"),
204
- bg: react$1.useColorModeValue("white", "gray.700"),
205
- shadow: "base",
206
- onSubmit: handleSubmit,
207
- children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.VStack, { spacing: 4, children: [
208
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.FormControl, { isRequired: true, children: [
209
- /* @__PURE__ */ jsxRuntime.jsx(react$1.FormLabel, { children: t("field.name.label") }),
210
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.InputGroup, { children: [
211
- /* @__PURE__ */ jsxRuntime.jsx(react$1.InputLeftElement, { children: /* @__PURE__ */ jsxRuntime.jsx(
212
- "svg",
213
- {
214
- xmlns: "http://www.w3.org/2000/svg",
215
- width: "16",
216
- height: "16",
217
- fill: "currentColor",
218
- className: "bi bi-person-fill",
219
- viewBox: "0 0 16 16",
220
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6" })
221
- }
222
- ) }),
223
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Input, { type: "text", name: "name", placeholder: t("field.name.placeholder") })
224
- ] })
225
- ] }),
226
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.FormControl, { isRequired: true, children: [
227
- /* @__PURE__ */ jsxRuntime.jsx(react$1.FormLabel, { children: t("field.email.label") }),
228
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.InputGroup, { children: [
229
- /* @__PURE__ */ jsxRuntime.jsx(react$1.InputLeftElement, { children: /* @__PURE__ */ jsxRuntime.jsx(icons.EmailIcon, {}) }),
230
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Input, { type: "email", name: "email", placeholder: t("field.email.placeholder") })
231
- ] })
232
- ] }),
233
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.FormControl, { isRequired: true, children: [
234
- /* @__PURE__ */ jsxRuntime.jsx(react$1.FormLabel, { children: t("field.message.label") }),
235
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Textarea, { name: "message", placeholder: t("field.message.placeholder"), rows: 6, resize: "none" })
236
- ] }),
237
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { type: "submit", colorScheme: "brand", width: "full", children: t("action.send") })
238
- ] })
239
- }
240
- );
241
- };
242
- const ExpertTip = ({ tip, expert, ...boxProps }) => {
243
- return /* @__PURE__ */ jsxRuntime.jsxs(
244
- react$1.Card,
245
- {
246
- variant: "filled",
247
- p: 4,
248
- borderLeft: "4px solid gray",
249
- gap: 4,
250
- _before: {
251
- content: '"❛❛"',
252
- position: "absolute",
253
- top: -8,
254
- left: -2,
255
- fontSize: "6rem",
256
- fontStyle: "italic",
257
- color: react$1.useColorModeValue("blackAlpha.300", "whiteAlpha.300")
258
- },
259
- ...boxProps,
260
- children: [
261
- /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { as: "blockquote", p: 0, fontStyle: "italic", children: tip }),
262
- !!expert && /* @__PURE__ */ jsxRuntime.jsx(react$1.CardFooter, { alignItems: "center", justify: "flex-end", p: 0, children: /* @__PURE__ */ jsxRuntime.jsx(Expert, { expert, variant: "short" }) })
263
- ]
264
- }
265
- );
266
- };
267
- const Faq = ({ items, mb }) => {
268
- const { bgColor, color } = index$1.usePrimaryColors();
269
- return /* @__PURE__ */ jsxRuntime.jsx(react$1.Accordion, { allowToggle: true, mb, children: items.map(({ question, answer }) => {
270
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.AccordionItem, { border: 0, children: [
271
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "h3", children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.AccordionButton, { _hover: { color, bgColor }, children: [
272
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "span", flex: "1", textAlign: "left", fontWeight: "bold", children: question }),
273
- /* @__PURE__ */ jsxRuntime.jsx(react$1.AccordionIcon, {})
274
- ] }) }),
275
- /* @__PURE__ */ jsxRuntime.jsx(react$1.AccordionPanel, { children: answer })
276
- ] }, question);
277
- }) });
278
- };
279
- const Features = ({ features, ...boxProps }) => {
280
- return /* @__PURE__ */ jsxRuntime.jsx(react$1.SimpleGrid, { as: "ul", columns: { base: 1, md: 2, lg: 3 }, spacing: 10, p: 0, ...boxProps, children: features.map(({ title, description }) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Card, { as: "article", variant: "outline", textAlign: "center", h: "100%", children: [
281
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.CardHeader, { as: "header", display: "flex", alignItems: "center", justifyContent: "center", gap: 2, pb: 2, children: [
282
- /* @__PURE__ */ jsxRuntime.jsx(icons.StarIcon, { w: 8, h: 8, color: "yellow.400" }),
283
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontWeight: 600, children: title }),
284
- /* @__PURE__ */ jsxRuntime.jsx(icons.StarIcon, { w: 8, h: 8, color: "yellow.400" })
285
- ] }),
286
- /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { as: "section", pt: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { color: "gray.600", children: description }) })
287
- ] }) }, title)) });
288
- };
289
- const GameCard = ({ name, image, link, className }) => {
290
- return /* @__PURE__ */ jsxRuntime.jsxs(
291
- react$1.LinkBox,
292
- {
293
- as: "article",
294
- rounded: "md",
295
- borderWidth: 1,
296
- transition: "transform 0.2s ease",
297
- cursor: link ? "pointer" : "default",
298
- overflow: "hidden",
299
- bg: "blackAlpha.400",
300
- _hover: { transform: "scale(1.1)" },
301
- className,
302
- children: [
303
- typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react$1.Image, { src: image, alt: name, w: "100%", aspectRatio: "16/9", objectFit: "cover", objectPosition: "center" }) : !!image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { w: "100%", aspectRatio: "16/9", children: image }),
304
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", rounded: "md", p: 4, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", children: link ? /* @__PURE__ */ jsxRuntime.jsx(react$1.LinkOverlay, { href: link, children: name }) : name }) })
305
- ]
306
- }
307
- );
308
- };
309
- const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscreen }) => {
310
- const { t } = reactI18next.useTranslation("gameDemo");
311
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
312
- /* @__PURE__ */ jsxRuntime.jsx(
313
- react$1.Box,
314
- {
315
- as: "iframe",
316
- src,
317
- sandbox: "allow-scripts allow-same-origin",
318
- loading: "lazy",
319
- w: "100%",
320
- h: "100%",
321
- allowFullScreen: true,
322
- onLoad,
323
- children: /* @__PURE__ */ jsxRuntime.jsx("p", { children: t("warning") })
324
- }
325
- ),
326
- /* @__PURE__ */ jsxRuntime.jsx(
327
- react$1.IconButton,
328
- {
329
- icon: isFullscreen ? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { w: 3, h: 3 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLinkIcon, { w: 4, h: 4 }),
330
- size: "sm",
331
- variant: "outline",
332
- title: t(isFullscreen ? "action.deactivateFullscreen" : "action.activateFullscreen"),
333
- "aria-label": "Fullscreen mode Toggle",
334
- isRound: true,
335
- disabled: !isLoaded,
336
- position: "absolute",
337
- top: 2,
338
- left: 2,
339
- border: "none",
340
- color: "white",
341
- _hover: { bgColor: "whiteAlpha.400" },
342
- onClick: onToggleFullscreen
343
- }
344
- ),
345
- /* @__PURE__ */ jsxRuntime.jsx(react$1.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Spinner, { size: "xl", thickness: "0.6rem", display: isLoaded ? "none" : "block", color: "brand.100" }) })
346
- ] });
347
- };
348
- const pulse = react$2.keyframes`
349
- 0% {
350
- box-shadow: 0 0 0 0 var(--chakra-colors-brand-100);
351
- }
352
-
353
- 50% {
354
- box-shadow: 0 0 0 0.8rem rgba(0, 0, 0, 0);
355
- }
356
-
357
- 100% {
358
- box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
359
- }
360
- `;
361
- const GameDemoPreview = ({ gameName, onPlay }) => {
362
- const { gamePreviewImageData } = index.useSiteMetadataContext();
363
- const { t } = reactI18next.useTranslation("gameDemo");
364
- const image = gatsbyPluginImage.getImage(gamePreviewImageData);
365
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
366
- !!image && /* @__PURE__ */ jsxRuntime.jsx(gatsbyPluginImage.GatsbyImage, { image, alt: `Play ${gameName} online`, objectFit: "contain" }),
367
- /* @__PURE__ */ jsxRuntime.jsx(react$1.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(
368
- react$1.Button,
369
- {
370
- size: { base: "sm", md: "lg" },
371
- color: "gray.200",
372
- bgColor: "brand.500",
373
- animation: `${pulse} 2s infinite linear`,
374
- _hover: { bgColor: "brand.200", color: "gray.700" },
375
- onClick: onPlay,
376
- children: t("action.playForFree")
377
- }
378
- ) })
379
- ] });
380
- };
381
- const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
382
- const [isRunning, setIsRunning] = react.useState(false);
383
- const [isLoaded, setIsLoaded] = react.useState(false);
384
- const { isOpen: isFullscreen, onToggle } = react$1.useDisclosure({ defaultIsOpen: false });
385
- function handlePlay() {
386
- setIsRunning(true);
387
- }
388
- function onLoad() {
389
- setIsLoaded(true);
390
- }
391
- function handleToggleFullscreen() {
392
- document.body.style.overflowY = isFullscreen ? "auto" : "hidden";
393
- onToggle();
394
- }
395
- return /* @__PURE__ */ jsxRuntime.jsx(
396
- react$1.Box,
397
- {
398
- as: "article",
399
- display: "grid",
400
- w: "100%",
401
- aspectRatio: "16/9 auto",
402
- ...isFullscreen ? { zIndex: 100, inset: 0, position: "fixed", h: "100dvh" } : { position: "relative" },
403
- ...boxProps,
404
- children: isRunning ? /* @__PURE__ */ jsxRuntime.jsx(
405
- GameDemoContent,
406
- {
407
- src,
408
- isFullscreen,
409
- isLoaded,
410
- onLoad,
411
- onToggleFullscreen: handleToggleFullscreen
412
- }
413
- ) : /* @__PURE__ */ jsxRuntime.jsx(GameDemoPreview, { gameName: name, previewImageFit, onPlay: handlePlay })
414
- }
415
- );
416
- };
417
- const GameInfoItem = ({ title, value }) => {
418
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { gap: 2, children: [
419
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { w: "50%", color: "gray.500", textTransform: "capitalize", children: [
420
- title,
421
- ":"
422
- ] }),
423
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { w: "50%", textTransform: "capitalize", children: value })
424
- ] });
425
- };
426
- const VISIBLE_LANGUAGE_NUMBER = 5;
427
- function stringifyHasFeature(value) {
428
- return i18n$1.t(`gameInfo:value.boolean.${value}`);
429
- }
430
- function stringifyVolatility(value) {
431
- return i18n$1.t(`gameInfo:value.volatility.${value}`);
432
- }
433
- function stringifyArray(array) {
434
- return array.join(", ");
435
- }
436
- function stringifyLanguageArray(languages) {
437
- return languages.length > VISIBLE_LANGUAGE_NUMBER ? `${stringifyArray(languages.slice(0, VISIBLE_LANGUAGE_NUMBER))}, +${languages.length - VISIBLE_LANGUAGE_NUMBER}` : stringifyArray(languages);
438
- }
439
- function getGameInfoItemValue(key, value, currency) {
440
- let formattedValue = "";
441
- if (key === i18n.GameCharacteristic.Rtp) {
442
- formattedValue = index$2.formatNumber(value, { percent: "real", precision: 3 });
443
- }
444
- if ((key === i18n.GameCharacteristic.MinBet || key === i18n.GameCharacteristic.MaxBet || key === i18n.GameCharacteristic.MaxWin) && typeof value === "number") {
445
- if (Array.isArray(currency)) {
446
- const [primary, ...secondaries] = currency || ["USD"];
447
- const primaryValue = index$2.formatNumber(value, { currency: primary });
448
- formattedValue = secondaries.length ? `${primaryValue} (${secondaries.map((currency2) => index$2.getCurrencySymbol(currency2)).join(", ")})` : primaryValue;
449
- } else {
450
- formattedValue = index$2.formatNumber(value, { currency });
451
- }
452
- }
453
- if (key === i18n.GameCharacteristic.Compatibility || key === i18n.GameCharacteristic.BonusFeatures && typeof value !== "string") {
454
- formattedValue = stringifyArray(value);
455
- }
456
- if (key === i18n.GameCharacteristic.Languages) {
457
- formattedValue = stringifyLanguageArray(value);
458
- }
459
- if (key === i18n.GameCharacteristic.ReleaseDate) {
460
- formattedValue = index$2.formatDate({ value, options: { year: "numeric", month: "long" } });
461
- }
462
- if (key === i18n.GameCharacteristic.Volatility) {
463
- formattedValue = stringifyVolatility(value);
464
- }
465
- if (typeof value === "boolean") {
466
- formattedValue = stringifyHasFeature(value);
467
- }
468
- if (!formattedValue) {
469
- formattedValue = value.toLocaleString();
470
- }
471
- return formattedValue;
472
- }
473
- const GameInfo = ({ info }) => {
474
- const { siteMetadata } = index.useSiteMetadataContext();
475
- const { currency } = siteMetadata;
476
- const { t } = reactI18next.useTranslation("gameInfo");
477
- return /* @__PURE__ */ jsxRuntime.jsx(
478
- react$1.Box,
479
- {
480
- as: "aside",
481
- float: { base: "none", lg: "right" },
482
- w: { base: "100%", lg: "xs" },
483
- ml: { base: 0, lg: 4 },
484
- mb: { base: 0, lg: 4 },
485
- children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Card, { as: "article", variant: "outline", h: "100%", p: 2, children: [
486
- /* @__PURE__ */ jsxRuntime.jsx(react$1.CardHeader, { as: "header", p: 0, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { as: "h2", fontSize: "xl", children: t("title") }) }),
487
- /* @__PURE__ */ jsxRuntime.jsx(react$1.CardBody, { as: "section", p: 0, children: Object.entries(info).map(([group, items]) => /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
488
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Divider, { my: 2 }),
489
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontWeight: "semibold", mb: 2, children: t(`group.${group}`) }),
490
- Object.entries(items).map(([itemKey, itemValue]) => {
491
- const feature = itemKey;
492
- const value = getGameInfoItemValue(feature, itemValue, currency);
493
- return /* @__PURE__ */ jsxRuntime.jsx(GameInfoItem, { title: t(`feature.${feature}`), value }, itemKey);
494
- })
495
- ] }, group)) })
496
- ] })
497
- }
498
- );
499
- };
500
- const HowTo = ({ steps, ...boxProps }) => {
501
- const { color, bgColor } = index$1.usePrimaryColors();
502
- return /* @__PURE__ */ jsxRuntime.jsx(react$1.SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description }, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
503
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Circle, { size: 12, bgColor, color, fontSize: "lg", fontWeight: "bold", children: String(index2 + 1) }),
504
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { flex: 1, children: [
505
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "lg", fontWeight: "bold", children: title }),
506
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: description })
507
- ] })
508
- ] }, index2)) });
509
- };
510
- const Container = ({ children }) => {
511
- return /* @__PURE__ */ jsxRuntime.jsx(react$1.Container, { maxW: "container.xl", children });
512
- };
513
- const Content = ({ children }) => {
514
- return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", py: 4, children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children }) });
515
- };
516
- const Logo = () => {
517
- const { logoImageData } = index.useSiteMetadataContext();
518
- const image = gatsbyPluginImage.getImage(logoImageData);
519
- if (!image) {
520
- return null;
521
- }
522
- return /* @__PURE__ */ jsxRuntime.jsx(gatsbyPluginImage.GatsbyImage, { image, objectFit: "contain", alt: "Logo" });
523
- };
524
- const Brand$1 = ({ brand }) => {
525
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { position: "relative", my: 2, py: 8, children: [
526
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Divider, {}),
527
- /* @__PURE__ */ jsxRuntime.jsx(react$1.AbsoluteCenter, { display: "flex", bgColor: react$1.useColorModeValue("gray.50", "gray.900"), children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: gatsby.Link, to: "/", children: brand }) })
528
- ] });
529
- };
530
- const Copyright = () => {
531
- const { siteMetadata } = index.useSiteMetadataContext();
532
- const { siteUrl } = siteMetadata;
533
- const { t } = reactI18next.useTranslation("footer");
534
- return /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "small", colorScheme: "gray", display: "flex", align: "center", justifyContent: "center", children: t("copyright", { year: index$2.getCurrentYear(), domain: index$2.getDomain(siteUrl) }) });
535
- };
536
- const Disclaimer = () => {
537
- const { siteMetadata } = index.useSiteMetadataContext();
538
- const { siteUrl } = siteMetadata;
539
- const { t } = reactI18next.useTranslation("footer");
540
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { as: "small", colorScheme: "gray", fontSize: "sm", children: [
541
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", fontWeight: "bold", color: "red.600", children: t("disclaimer.title") }),
542
- t("disclaimer.description", { domain: index$2.getDomain(siteUrl) })
543
- ] });
544
- };
545
- const Navigation$1 = () => {
546
- const { siteMetadata } = index.useSiteMetadataContext();
547
- const { footerMenuLinks } = siteMetadata;
548
- return /* @__PURE__ */ jsxRuntime.jsx(
549
- react$1.SimpleGrid,
550
- {
551
- columns: { base: 1, sm: 2, md: 4 },
552
- pt: 4,
553
- pb: 6,
554
- spacing: 4,
555
- justifyItems: { base: "flex-start", md: "center" },
556
- justifyContent: "space-between",
557
- children: footerMenuLinks.map(({ url, title }) => /* @__PURE__ */ jsxRuntime.jsx(
558
- react$1.Text,
559
- {
560
- as: gatsby.Link,
561
- to: url,
562
- fontSize: "md",
563
- fontWeight: "semibold",
564
- colorScheme: "gray",
565
- _hover: { textDecoration: "none", color: "brand.400" },
566
- children: title
567
- },
568
- url
569
- ))
570
- }
571
- );
572
- };
573
- const Footer = () => {
574
- return /* @__PURE__ */ jsxRuntime.jsx(
575
- react$1.Box,
576
- {
577
- as: "footer",
578
- bg: react$1.useColorModeValue("gray.50", "gray.900"),
579
- color: react$1.useColorModeValue("gray.700", "gray.200"),
580
- py: 4,
581
- children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
582
- /* @__PURE__ */ jsxRuntime.jsx(Navigation$1, {}),
583
- /* @__PURE__ */ jsxRuntime.jsx(Disclaimer, {}),
584
- /* @__PURE__ */ jsxRuntime.jsx(Brand$1, { brand: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }),
585
- /* @__PURE__ */ jsxRuntime.jsx(Copyright, {})
586
- ] })
587
- }
588
- );
589
- };
590
- const Brand = ({ brand }) => {
591
- return /* @__PURE__ */ jsxRuntime.jsx(
592
- react$1.Box,
593
- {
594
- as: gatsby.Link,
595
- to: "/",
596
- display: "flex",
597
- h: { base: "40px", md: "60px" },
598
- fontFamily: "heading",
599
- color: react$1.useColorModeValue("gray.800", "white"),
600
- children: brand
601
- }
602
- );
603
- };
604
- const DesktopNavItem = ({ title, url, children }) => {
605
- const background = react$1.useColorModeValue("white", "gray.800");
606
- const backgroundHover = react$1.useColorModeValue("brand.50", "gray.900");
607
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Popover, { trigger: "hover", placement: "bottom-start", children: [
608
- /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverTrigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
609
- react$1.Text,
610
- {
611
- as: gatsby.Link,
612
- to: url,
613
- p: 2,
614
- fontSize: "sm",
615
- fontWeight: 500,
616
- _hover: { textDecoration: "none", color: "brand.400" },
617
- children: title
618
- }
619
- ) }),
620
- !!children && /* @__PURE__ */ jsxRuntime.jsx(react$1.PopoverContent, { p: 4, border: 0, minW: "sm", rounded: "xl", boxShadow: "xl", bg: background, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { as: "ul", children: children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(
621
- react$1.Box,
622
- {
623
- as: "li",
624
- role: "group",
625
- display: "block",
626
- p: 2,
627
- cursor: "pointer",
628
- rounded: "md",
629
- _hover: { bg: backgroundHover },
630
- children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { direction: "row", children: [
631
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { children: [
632
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontWeight: 500, transition: "all .3s ease", _groupHover: { color: "brand.400" }, children: child.title }),
633
- !!child.subtitle && /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: "sm", children: child.subtitle })
634
- ] }),
635
- /* @__PURE__ */ jsxRuntime.jsx(
636
- react$1.Flex,
637
- {
638
- flex: 1,
639
- justify: "flex-end",
640
- align: "center",
641
- opacity: 0,
642
- transition: "all .3s ease",
643
- transform: "translateX(-10px)",
644
- _groupHover: { opacity: 1, transform: "translateX(0)" },
645
- children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Icon, { as: icons.ChevronRightIcon, color: "brand.400", w: 5, h: 5 })
646
- }
647
- )
648
- ] })
649
- },
650
- child.url
651
- )) }) })
652
- ] });
653
- };
654
- const DesktopNavigation = ({ menu }) => {
655
- return /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { as: "ul", direction: "row", spacing: 4, children: menu.map((item) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(DesktopNavItem, { ...item }) }, item.url)) });
656
- };
657
- const MobileNavItem = ({ title, children, url }) => {
658
- const { isOpen, onToggle } = react$1.useDisclosure();
659
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { w: "100%", p: 2, children: [
660
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { align: "center", gap: 2, justify: "space-between", children: [
661
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: gatsby.Link, to: url, isTruncated: true, fontWeight: 600, children: title }),
662
- !!children && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "button", onClick: onToggle, children: /* @__PURE__ */ jsxRuntime.jsx(
663
- react$1.Icon,
664
- {
665
- as: icons.ChevronDownIcon,
666
- w: 6,
667
- h: 6,
668
- transform: isOpen ? "rotate(180deg)" : "",
669
- transition: "all .25s ease-in-out"
670
- }
671
- ) })
672
- ] }),
673
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(
674
- react$1.Stack,
675
- {
676
- as: "ul",
677
- pl: 2,
678
- borderLeft: 1,
679
- borderStyle: "solid",
680
- borderColor: react$1.useColorModeValue("gray.200", "gray.700"),
681
- children: !!children && children.map((child) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: gatsby.Link, to: `${url}${child.url}`, py: 2, children: child.title }) }, child.url))
682
- }
683
- ) })
684
- ] });
685
- };
686
- const MobileNavigation = ({ menu }) => {
687
- const { isOpen, onToggle } = react$1.useDisclosure();
688
- const background = react$1.useColorModeValue("white", "gray.800");
689
- return menu.length ? /* @__PURE__ */ jsxRuntime.jsxs(react$1.Box, { children: [
690
- /* @__PURE__ */ jsxRuntime.jsx(
691
- react$1.IconButton,
692
- {
693
- icon: isOpen ? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { w: 3, h: 3 }) : /* @__PURE__ */ jsxRuntime.jsx(icons.HamburgerIcon, {}),
694
- size: "md",
695
- variant: "ghost",
696
- "aria-label": "Toggle Navigation",
697
- onClick: onToggle
698
- }
699
- ),
700
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Collapse, { in: isOpen, animateOpacity: true, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { position: "absolute", top: 14, right: 0, w: "100vw", px: 2, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { as: "ul", spacing: 2, p: 2, w: "100%", borderRadius: "md", boxShadow: "md", bg: background, children: menu.map((item) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(MobileNavItem, { ...item }) }, item.url)) }) }) })
701
- ] }) : null;
702
- };
703
- const Navigation = ({ menu }) => {
704
- const isDesktop = react$1.useBreakpointValue({ base: false, md: true });
705
- return isDesktop ? /* @__PURE__ */ jsxRuntime.jsx(DesktopNavigation, { menu }) : /* @__PURE__ */ jsxRuntime.jsx(MobileNavigation, { menu });
706
- };
707
- const Navbar = ({ brand }) => {
708
- const menu = [];
709
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "nav", gap: 2, py: 1, children: [
710
- /* @__PURE__ */ jsxRuntime.jsx(Brand, { brand }),
711
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { as: "section", flex: 1, align: "center", justifyContent: "flex-end", gap: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Navigation, { menu }) })
712
- ] });
713
- };
714
- const Header = () => {
715
- return /* @__PURE__ */ jsxRuntime.jsx(
716
- react$1.Box,
717
- {
718
- as: "header",
719
- position: "sticky",
720
- top: 0,
721
- bg: react$1.useColorModeValue("white", "gray.900"),
722
- color: react$1.useColorModeValue("gray.700", "gray.200"),
723
- boxShadow: "sm",
724
- zIndex: 100,
725
- children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsx(Navbar, { brand: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }) })
726
- }
727
- );
728
- };
729
- const Hero = ({ title, subtitle, content, link, image }) => {
730
- return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { as: "section", bg: "gray.900", children: /* @__PURE__ */ jsxRuntime.jsx(Container, { children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { direction: { base: "column", md: "row" }, children: [
731
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { align: "center", justify: { base: "center", md: "flex-start" }, flex: 1, py: 8, pe: 8, children: /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { spacing: 6, w: "full", maxW: "lg", children: [
732
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.Heading, { as: "h1", fontSize: { base: "3xl", md: "4xl", lg: "5xl" }, children: [
733
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { as: "span", display: "block", children: [
734
- title,
735
- " —"
736
- ] }),
737
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "span", display: "block", color: "brand.400", children: subtitle })
738
- ] }),
739
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { fontSize: { base: "md", lg: "lg" }, color: "gray.500", children: content }),
740
- !!link && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { direction: { base: "column", md: "row" }, children: /* @__PURE__ */ jsxRuntime.jsx(LinkButton, { ...link }) })
741
- ] }) }),
742
- image && /* @__PURE__ */ jsxRuntime.jsx(react$1.Flex, { display: { base: "none", md: "flex" }, flex: 1, children: image })
743
- ] }) }) });
744
- };
745
- const Main = ({ children }) => {
746
- return /* @__PURE__ */ jsxRuntime.jsx(
747
- react$1.Flex,
748
- {
749
- as: "main",
750
- direction: "column",
751
- flexGrow: 1,
752
- bg: react$1.useColorModeValue("white", "gray.800"),
753
- color: react$1.useColorModeValue("gray.700", "gray.200"),
754
- children
755
- }
756
- );
757
- };
758
- const ScrollToTop = () => {
759
- const [isVisible, setIsVisible] = react.useState(false);
760
- react.useEffect(() => {
761
- const toggleVisibility = () => {
762
- setIsVisible(window.scrollY > 300);
763
- };
764
- window.addEventListener("scroll", toggleVisibility);
765
- return () => {
766
- window.removeEventListener("scroll", toggleVisibility);
767
- };
768
- }, []);
769
- function handleClick() {
770
- window.scrollTo({
771
- top: 0,
772
- behavior: "smooth"
773
- });
774
- }
775
- return /* @__PURE__ */ jsxRuntime.jsx(
776
- react$1.Box,
777
- {
778
- position: "fixed",
779
- bottom: { base: 4, md: 8, lg: 16 },
780
- right: { base: 4, md: 8, lg: 16 },
781
- zIndex: "1000",
782
- opacity: isVisible ? 1 : 0,
783
- transform: isVisible ? "translateY(0)" : "translateY(0.5rem)",
784
- transition: "opacity 0.4s ease, transform 0.4s ease",
785
- pointerEvents: isVisible ? "auto" : "none",
786
- children: /* @__PURE__ */ jsxRuntime.jsx(
787
- react$1.IconButton,
788
- {
789
- "aria-label": "Scroll to top",
790
- icon: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronUpIcon, { w: 6, h: 6 }),
791
- size: "lg",
792
- shadow: "lg",
793
- colorScheme: "brand",
794
- isRound: true,
795
- onClick: handleClick
796
- }
797
- )
798
- }
799
- );
800
- };
801
- const Layout = ({ children }) => {
802
- const content = typeof children === "function" ? children({ Hero, Content }) : /* @__PURE__ */ jsxRuntime.jsx(Content, { children });
803
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Stack, { spacing: 0, position: "relative", w: "100%", minH: "100dvh", children: [
804
- /* @__PURE__ */ jsxRuntime.jsx(Header, {}),
805
- /* @__PURE__ */ jsxRuntime.jsx(Main, { children: content }),
806
- /* @__PURE__ */ jsxRuntime.jsx(Footer, {}),
807
- /* @__PURE__ */ jsxRuntime.jsx(ScrollToTop, {})
808
- ] });
809
- };
810
- const List = ({ items, bullet = "—", render, className, ...boxProps }) => {
811
- return /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { pl: 0, ml: 2, mb: 4, className, ...boxProps, children: items.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.ListItem, { display: "flex", gap: 1, children: [
812
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { children: bullet }),
813
- render ? render(item) : item
814
- ] }, index2)) });
815
- };
816
- const TitleMap = {
817
- pros: "advantages",
818
- cons: "disadvantages"
819
- };
820
- const IconMap = {
821
- pros: icons.CheckCircleIcon,
822
- cons: icons.WarningIcon
823
- };
824
- const IconColorMap = {
825
- pros: "green.500",
826
- cons: "red.500"
827
- };
828
- const BgColorMap = {
829
- pros: "green",
830
- cons: "red"
831
- };
832
- const ProsConsCard = ({ itemType, items }) => {
833
- const { t } = reactI18next.useTranslation("prosCons");
834
- return /* @__PURE__ */ jsxRuntime.jsxs(
835
- react$1.Card,
836
- {
837
- as: "article",
838
- flex: 1,
839
- p: 2,
840
- bgColor: react$1.useColorModeValue(`${BgColorMap[itemType]}.100`, `${BgColorMap[itemType]}.800`),
841
- children: [
842
- /* @__PURE__ */ jsxRuntime.jsx(
843
- react$1.CardHeader,
844
- {
845
- as: "header",
846
- p: 2,
847
- borderTopRadius: "md",
848
- bgColor: react$1.useColorModeValue("whiteAlpha.800", "blackAlpha.800"),
849
- children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Heading, { as: "h3", textTransform: "uppercase", fontSize: "xl", children: t(TitleMap[itemType]) })
850
- }
851
- ),
852
- /* @__PURE__ */ jsxRuntime.jsx(
853
- react$1.CardBody,
854
- {
855
- as: "section",
856
- p: 2,
857
- borderBottomRadius: "md",
858
- bgColor: react$1.useColorModeValue("whiteAlpha.800", "blackAlpha.800"),
859
- children: /* @__PURE__ */ jsxRuntime.jsx(react$1.List, { spacing: 4, p: 0, children: items.map(({ title, description }) => /* @__PURE__ */ jsxRuntime.jsxs(react$1.ListItem, { display: "flex", children: [
860
- /* @__PURE__ */ jsxRuntime.jsx(react$1.ListIcon, { as: IconMap[itemType], w: 6, h: 6, color: IconColorMap[itemType] }),
861
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { fontWeight: "semibold", fontSize: "md", children: [
862
- title,
863
- !!description && /* @__PURE__ */ jsxRuntime.jsxs(react$1.Text, { as: "span", fontWeight: "normal", children: [
864
- ": ",
865
- description
866
- ] })
867
- ] })
868
- ] }, title)) })
869
- }
870
- )
871
- ]
872
- }
873
- );
874
- };
875
- const ProsCons = ({ items, ...boxProps }) => {
876
- const { pros, cons } = items;
877
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Flex, { as: "section", direction: { base: "column", md: "row" }, gap: 4, ...boxProps, children: [
878
- /* @__PURE__ */ jsxRuntime.jsx(ProsConsCard, { itemType: "pros", items: pros }),
879
- /* @__PURE__ */ jsxRuntime.jsx(ProsConsCard, { itemType: "cons", items: cons })
880
- ] });
881
- };
882
- const Seo = ({ children, siteMetadata, title, description, lang }) => {
883
- const { title: defaultTitle, description: defaultDescription, lang: defaultLang, siteUrl } = siteMetadata;
884
- return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
885
- /* @__PURE__ */ jsxRuntime.jsx("html", { lang: lang ?? defaultLang }),
886
- /* @__PURE__ */ jsxRuntime.jsx("title", { children: title ? typeof title === "string" ? title : title({
887
- domain: index$2.getDomain(siteUrl),
888
- currentYear: index$2.getCurrentYear(),
889
- currentMonth: index$2.getCurrentMonth()
890
- }) : defaultTitle }),
891
- /* @__PURE__ */ jsxRuntime.jsx(
892
- "meta",
893
- {
894
- name: "description",
895
- content: description ? typeof description === "string" ? description : description({
896
- domain: index$2.getDomain(siteUrl),
897
- currentYear: index$2.getCurrentYear(),
898
- currentMonth: index$2.getCurrentMonth()
899
- }) : defaultDescription
900
- }
901
- ),
902
- children
903
- ] });
904
- };
905
- const Table = ({
906
- columnNumber,
907
- items,
908
- caption,
909
- bordered = false,
910
- striped = true,
911
- scrollable,
912
- className,
913
- ...boxProps
914
- }) => {
915
- const headerItems = items.slice(0, columnNumber);
916
- const bodyItems = items.slice(columnNumber);
917
- return /* @__PURE__ */ jsxRuntime.jsxs(
918
- react$1.TableContainer,
919
- {
920
- border: bordered ? void 0 : "none",
921
- ...scrollable ? { maxH: "50vh", overflowY: "auto" } : {},
922
- className,
923
- ...boxProps,
924
- children: [
925
- /* @__PURE__ */ jsxRuntime.jsxs(react$1.Table, { variant: striped ? "striped" : "simple", children: [
926
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Thead, { ...scrollable ? { position: "sticky", top: 0, zIndex: 1, bg: "gray.800" } : {}, children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Tr, { children: headerItems.map((item, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Th, { children: item }, index2)) }) }),
927
- /* @__PURE__ */ jsxRuntime.jsx(react$1.Tbody, { children: Array.from({ length: Math.ceil(bodyItems.length / columnNumber) }, (_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Tr, { children: Array.from({ length: columnNumber }, (_2, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Td, { children: bodyItems[rowIndex * columnNumber + colIndex] || "" }, colIndex)) }, rowIndex)) })
928
- ] }),
929
- !!caption && /* @__PURE__ */ jsxRuntime.jsx(react$1.TableCaption, { children: caption })
930
- ]
931
- }
932
- );
933
- };
934
- const Tabs = ({ items, className, render, ...boxProps }) => {
935
- const { tabs, panels } = react.useMemo(() => {
936
- const tabs2 = [];
937
- const panels2 = [];
938
- items.forEach(({ content, ...tab }) => {
939
- tabs2.push(tab);
940
- panels2.push(content);
941
- });
942
- return { tabs: tabs2, panels: panels2 };
943
- }, []);
944
- return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Tabs, { overflow: "hidden", colorScheme: "brand", className, ...boxProps, children: [
945
- /* @__PURE__ */ jsxRuntime.jsx(react$1.TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.Tab, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index2)) }),
946
- /* @__PURE__ */ jsxRuntime.jsx(react$1.TabPanels, { children: panels.map((panel, index2) => /* @__PURE__ */ jsxRuntime.jsx(react$1.TabPanel, { children: render(panel) }, index2)) })
947
- ] });
948
- };
949
- exports.Author = Author;
950
- exports.BonusCard = BonusCard;
951
- exports.Center = Center;
952
- exports.ContactForm = ContactForm;
953
- exports.ExpertTip = ExpertTip;
954
- exports.Faq = Faq;
955
- exports.Features = Features;
956
- exports.GameCard = GameCard;
957
- exports.GameDemo = GameDemo;
958
- exports.GameInfo = GameInfo;
959
- exports.Grid = Grid;
960
- exports.HowTo = HowTo;
961
- exports.Layout = Layout;
962
- exports.LinkButton = LinkButton;
963
- exports.List = List;
964
- exports.ProsCons = ProsCons;
965
- exports.Seo = Seo;
966
- exports.Table = Table;
967
- exports.Tabs = Tabs;