@anywayseo/tools 2.2.5 → 2.4.0

package/dist/components/game-demo/index.d.ts

@@ -1,9 +1,15 @@
-import { FC } from 'react';
+import { FC, ReactElement } from 'react';
 import { BoxPositionProps, ImageFit } from '../../types';
+type GamePreviewImageProps = {
+    previewImage: string;
+    previewImageFit?: ImageFit;
+} | {
+    previewImage: ReactElement;
+    previewImageFit?: never;
+};
 type GameDemoProps = {
     name: string;
     src: string;
-    previewImageFit?: ImageFit;
-} & BoxPositionProps;
+} & BoxPositionProps & GamePreviewImageProps;
 declare const GameDemo: FC<GameDemoProps>;
 export default GameDemo;

package/dist/components/game-demo/preview/index.d.ts

@@ -1,6 +1,7 @@
-import { FC } from 'react';
+import { FC, ReactElement } from 'react';
 import { ImageFit } from '../../../types';
 type GameDemoPreviewProps = {
+    image: string | ReactElement;
     alt: string;
     imageFit?: ImageFit;
     onPlay: VoidFunction;

package/dist/components/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("../index-BN2dAI6c.js");
+const index = require("../index-BKBWEEyT.js");
 exports.Author = index.Author;
 exports.BonusCard = index.BonusCard;
 exports.Center = index.Center;

package/dist/components/index.mjs

@@ -1,4 +1,4 @@
-import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "../index-BNnjW2A2.mjs";
+import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "../index-DF1kFmrH.mjs";
 export {
   A as Author,
   B as BonusCard,

package/dist/components/layout/footer/extra/index.d.ts

@@ -0,0 +1,3 @@
+import { FC, PropsWithChildren } from 'react';
+declare const Extra: FC<PropsWithChildren>;
+export default Extra;

package/dist/components/tabs/index.d.ts

@@ -1,7 +1,10 @@
 import { BoxPositionProps, ITabItem, RenderFunction } from '../../types';
 type TabsProps<T> = {
     items: ITabItem<T>[];
+} & BoxPositionProps & (T extends unknown[] ? {
     render: RenderFunction<T>;
-} & BoxPositionProps;
+} : {
+    render?: never;
+});
 declare const Tabs: <T>({ items, render, ...boxProps }: TabsProps<T>) => import("react/jsx-runtime").JSX.Element;
 export default Tabs;

package/dist/{index-BN2dAI6c.js → index-BKBWEEyT.js}

@@ -363,18 +363,15 @@ const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscre
     /* @__PURE__ */ jsxRuntime.jsx(react.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Spinner, { size: "xl", thickness: "0.6rem", display: isLoaded ? "none" : "block", color: "brand.100" }) })
   ] });
 };
-const GameDemoPreview = ({ alt, imageFit = "contain", onPlay }) => {
-  var _a;
-  const { assets } = index.useSiteContext();
+const GameDemoPreview = ({ image, alt, imageFit = "contain", onPlay }) => {
   const { t } = reactI18next.useTranslation("gameDemo");
-  const gamePreviewImage = (_a = assets == null ? void 0 : assets.images) == null ? void 0 : _a.gamePreview;
-  const gamePreviewImageComponent = typeof gamePreviewImage === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react.Image, { src: gamePreviewImage, alt, objectFit: imageFit }) : gamePreviewImage;
+  const imageComponent = typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react.Image, { src: image, alt, objectFit: imageFit }) : image;
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    gamePreviewImageComponent,
+    imageComponent,
     /* @__PURE__ */ jsxRuntime.jsx(react.AbsoluteCenter, { children: /* @__PURE__ */ jsxRuntime.jsx(PulseButton, { label: t("action.playForFree"), onClick: onPlay }) })
   ] });
 };
-const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
+const GameDemo = ({ name, src, previewImage, previewImageFit, ...boxProps }) => {
   const [isRunning, setIsRunning] = react$1.useState(false);
   const [isLoaded, setIsLoaded] = react$1.useState(false);
   const { isOpen: isFullscreen, onToggle } = react.useDisclosure({ defaultIsOpen: false });
@@ -406,7 +403,7 @@ const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
           onLoad,
           onToggleFullscreen: handleToggleFullscreen
         }
-      ) : /* @__PURE__ */ jsxRuntime.jsx(GameDemoPreview, { alt: name, imageFit: previewImageFit, onPlay: handlePlay })
+      ) : /* @__PURE__ */ jsxRuntime.jsx(GameDemoPreview, { image: previewImage, alt: name, imageFit: previewImageFit, onPlay: handlePlay })
     }
   );
 };
@@ -495,10 +492,11 @@ const GameInfo = ({ info }) => {
 };
 const HowTo = ({ steps, ...boxProps }) => {
   const { color, bgColor } = index$2.usePrimaryColors();
-  return /* @__PURE__ */ jsxRuntime.jsx(react.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.Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(react.SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description, image }, index2) => /* @__PURE__ */ jsxRuntime.jsxs(react.Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.Circle, { size: 12, bgColor, color, fontSize: "lg", fontWeight: "bold", children: String(index2 + 1) }),
     /* @__PURE__ */ jsxRuntime.jsxs(react.Stack, { flex: 1, children: [
       /* @__PURE__ */ jsxRuntime.jsx(react.Text, { fontSize: "lg", fontWeight: "bold", children: title }),
+      typeof image === "string" ? /* @__PURE__ */ jsxRuntime.jsx(react.Image, { src: image, alt: title, aspectRatio: "16/9", objectFit: "cover" }) : image,
       /* @__PURE__ */ jsxRuntime.jsx(react.Text, { children: description })
     ] })
   ] }, index2)) });
@@ -539,17 +537,22 @@ const Disclaimer = () => {
     t("disclaimer.description", { domain: index$1.getDomain(siteUrl) })
   ] });
 };
+const Extra = ({ children }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.Box, { as: "section", my: 2, children });
+};
 const Navigation$1 = ({ menu }) => {
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.SimpleGrid,
     {
+      as: "ul",
       columns: { base: 1, sm: 2, md: 4 },
-      pt: 4,
-      pb: 6,
+      mt: 4,
+      mb: 6,
+      p: 0,
       spacing: 4,
       justifyItems: { base: "flex-start", md: "center" },
       justifyContent: "space-between",
-      children: menu.map(({ path, label }) => /* @__PURE__ */ jsxRuntime.jsx(
+      children: menu.map(({ path, label }, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.Flex, { as: "li", children: /* @__PURE__ */ jsxRuntime.jsx(
         react.Text,
         {
           as: gatsby.Link,
@@ -561,14 +564,15 @@ const Navigation$1 = ({ menu }) => {
           children: label
         },
         path
-      ))
+      ) }, index2))
     }
   );
 };
 const Footer = () => {
-  var _a;
+  var _a, _b;
   const { configs } = index.useSiteContext();
   const navigation = ((_a = configs == null ? void 0 : configs.footer) == null ? void 0 : _a.navigation) ?? [];
+  const extra = (_b = configs == null ? void 0 : configs.footer) == null ? void 0 : _b.extra;
   return /* @__PURE__ */ jsxRuntime.jsx(
     react.Box,
     {
@@ -578,6 +582,7 @@ const Footer = () => {
       py: 4,
       children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { children: [
         /* @__PURE__ */ jsxRuntime.jsx(Navigation$1, { menu: navigation }),
+        !!extra && /* @__PURE__ */ jsxRuntime.jsx(Extra, { children: extra }),
         /* @__PURE__ */ jsxRuntime.jsx(Disclaimer, {}),
         /* @__PURE__ */ jsxRuntime.jsx(Brand$1, { brand: /* @__PURE__ */ jsxRuntime.jsx(Logo, {}) }),
         /* @__PURE__ */ jsxRuntime.jsx(Copyright, {})
@@ -974,7 +979,7 @@ const Tabs = ({ items, render, ...boxProps }) => {
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs(react.Tabs, { overflow: "hidden", colorScheme: "brand", ...boxProps, children: [
     /* @__PURE__ */ jsxRuntime.jsx(react.TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.Tab, { children: /* @__PURE__ */ jsxRuntime.jsx(react.Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index2)) }),
-    /* @__PURE__ */ jsxRuntime.jsx(react.TabPanels, { children: panels.map((panel, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.TabPanel, { children: render(panel) }, index2)) })
+    /* @__PURE__ */ jsxRuntime.jsx(react.TabPanels, { children: panels.map((panel, index2) => /* @__PURE__ */ jsxRuntime.jsx(react.TabPanel, { children: render ? render(panel) : panel }, index2)) })
   ] });
 };
 exports.Author = Author;

package/dist/{index-BNnjW2A2.mjs → index-DF1kFmrH.mjs}

@@ -362,18 +362,15 @@ const GameDemoContent = ({ src, isFullscreen, isLoaded, onLoad, onToggleFullscre
     /* @__PURE__ */ jsx(AbsoluteCenter, { children: /* @__PURE__ */ jsx(Spinner, { size: "xl", thickness: "0.6rem", display: isLoaded ? "none" : "block", color: "brand.100" }) })
   ] });
 };
-const GameDemoPreview = ({ alt, imageFit = "contain", onPlay }) => {
-  var _a;
-  const { assets } = useSiteContext();
+const GameDemoPreview = ({ image, alt, imageFit = "contain", onPlay }) => {
   const { t: t2 } = useTranslation("gameDemo");
-  const gamePreviewImage = (_a = assets == null ? void 0 : assets.images) == null ? void 0 : _a.gamePreview;
-  const gamePreviewImageComponent = typeof gamePreviewImage === "string" ? /* @__PURE__ */ jsx(Image, { src: gamePreviewImage, alt, objectFit: imageFit }) : gamePreviewImage;
+  const imageComponent = typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt, objectFit: imageFit }) : image;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    gamePreviewImageComponent,
+    imageComponent,
     /* @__PURE__ */ jsx(AbsoluteCenter, { children: /* @__PURE__ */ jsx(PulseButton, { label: t2("action.playForFree"), onClick: onPlay }) })
   ] });
 };
-const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
+const GameDemo = ({ name, src, previewImage, previewImageFit, ...boxProps }) => {
   const [isRunning, setIsRunning] = useState(false);
   const [isLoaded, setIsLoaded] = useState(false);
   const { isOpen: isFullscreen, onToggle } = useDisclosure({ defaultIsOpen: false });
@@ -405,7 +402,7 @@ const GameDemo = ({ name, src, previewImageFit, ...boxProps }) => {
           onLoad,
           onToggleFullscreen: handleToggleFullscreen
         }
-      ) : /* @__PURE__ */ jsx(GameDemoPreview, { alt: name, imageFit: previewImageFit, onPlay: handlePlay })
+      ) : /* @__PURE__ */ jsx(GameDemoPreview, { image: previewImage, alt: name, imageFit: previewImageFit, onPlay: handlePlay })
     }
   );
 };
@@ -494,10 +491,11 @@ const GameInfo = ({ info }) => {
 };
 const HowTo = ({ steps, ...boxProps }) => {
   const { color, bgColor } = usePrimaryColors();
-  return /* @__PURE__ */ jsx(SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description }, index) => /* @__PURE__ */ jsxs(Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
+  return /* @__PURE__ */ jsx(SimpleGrid, { as: "ol", columns: { base: 1, md: 2, lg: 3 }, gap: 4, p: 0, ...boxProps, children: steps.map(({ title, description, image }, index) => /* @__PURE__ */ jsxs(Flex, { as: "li", alignItems: "flex-start", gap: 4, children: [
     /* @__PURE__ */ jsx(Circle, { size: 12, bgColor, color, fontSize: "lg", fontWeight: "bold", children: String(index + 1) }),
     /* @__PURE__ */ jsxs(Stack, { flex: 1, children: [
       /* @__PURE__ */ jsx(Text, { fontSize: "lg", fontWeight: "bold", children: title }),
+      typeof image === "string" ? /* @__PURE__ */ jsx(Image, { src: image, alt: title, aspectRatio: "16/9", objectFit: "cover" }) : image,
       /* @__PURE__ */ jsx(Text, { children: description })
     ] })
   ] }, index)) });
@@ -538,17 +536,22 @@ const Disclaimer = () => {
     t2("disclaimer.description", { domain: getDomain(siteUrl) })
   ] });
 };
+const Extra = ({ children }) => {
+  return /* @__PURE__ */ jsx(Box, { as: "section", my: 2, children });
+};
 const Navigation$1 = ({ menu }) => {
   return /* @__PURE__ */ jsx(
     SimpleGrid,
     {
+      as: "ul",
       columns: { base: 1, sm: 2, md: 4 },
-      pt: 4,
-      pb: 6,
+      mt: 4,
+      mb: 6,
+      p: 0,
       spacing: 4,
       justifyItems: { base: "flex-start", md: "center" },
       justifyContent: "space-between",
-      children: menu.map(({ path, label }) => /* @__PURE__ */ jsx(
+      children: menu.map(({ path, label }, index) => /* @__PURE__ */ jsx(Flex, { as: "li", children: /* @__PURE__ */ jsx(
         Text,
         {
           as: Link$1,
@@ -560,14 +563,15 @@ const Navigation$1 = ({ menu }) => {
           children: label
         },
         path
-      ))
+      ) }, index))
     }
   );
 };
 const Footer = () => {
-  var _a;
+  var _a, _b;
   const { configs } = useSiteContext();
   const navigation = ((_a = configs == null ? void 0 : configs.footer) == null ? void 0 : _a.navigation) ?? [];
+  const extra = (_b = configs == null ? void 0 : configs.footer) == null ? void 0 : _b.extra;
   return /* @__PURE__ */ jsx(
     Box,
     {
@@ -577,6 +581,7 @@ const Footer = () => {
       py: 4,
       children: /* @__PURE__ */ jsxs(Container, { children: [
         /* @__PURE__ */ jsx(Navigation$1, { menu: navigation }),
+        !!extra && /* @__PURE__ */ jsx(Extra, { children: extra }),
         /* @__PURE__ */ jsx(Disclaimer, {}),
         /* @__PURE__ */ jsx(Brand$1, { brand: /* @__PURE__ */ jsx(Logo, {}) }),
         /* @__PURE__ */ jsx(Copyright, {})
@@ -973,7 +978,7 @@ const Tabs = ({ items, render, ...boxProps }) => {
   }, []);
   return /* @__PURE__ */ jsxs(Tabs$1, { overflow: "hidden", colorScheme: "brand", ...boxProps, children: [
     /* @__PURE__ */ jsx(TabList, { overflow: "auto hidden", children: tabs.map(({ label, icon }, index) => /* @__PURE__ */ jsx(Tab, { children: /* @__PURE__ */ jsx(Text, { as: "h3", isTruncated: true, children: icon ? `${icon} ${label}` : label }) }, index)) }),
-    /* @__PURE__ */ jsx(TabPanels, { children: panels.map((panel, index) => /* @__PURE__ */ jsx(TabPanel, { children: render(panel) }, index)) })
+    /* @__PURE__ */ jsx(TabPanels, { children: panels.map((panel, index) => /* @__PURE__ */ jsx(TabPanel, { children: render ? render(panel) : panel }, index)) })
   ] });
 };
 export {

package/dist/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./index-BN2dAI6c.js");
+const index = require("./index-BKBWEEyT.js");
 const index$1 = require("./index-IpSV-c71.js");
 const i18n$1 = require("./index-uq_uSyaC.js");
 const index$2 = require("./index-m97PmVsd.js");

package/dist/index.mjs

@@ -1,4 +1,4 @@
-import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "./index-BNnjW2A2.mjs";
+import { A, B, g, C, h, E, F, a, b, G, c, d, i, H, L, j, e, P, k, S, T, f } from "./index-DF1kFmrH.mjs";
 import { u } from "./index-xuSxvz5z.mjs";
 import { a as a2, G as G2, r } from "./index-DjBQjd1k.mjs";
 import { M } from "./index-C-e_0aJJ.mjs";

package/dist/types/components/how-to/index.d.ts

@@ -1,5 +1,6 @@
+import { ReactElement } from 'react';
 export interface IHowToStep {
     title: string;
     description?: string;
-    image?: string;
+    image?: string | ReactElement;
 }

package/dist/types/site/index.d.ts

@@ -7,7 +7,6 @@ type Image = ImageUrl | ImageComponent;
 export interface ISiteAssets {
     images?: {
         logo?: Image;
-        gamePreview?: Image;
         expert?: Image;
     };
 }
@@ -17,6 +16,7 @@ interface ISiteHeaderConfig {
 }
 interface ISiteFooterConfig {
     navigation?: INavItem[];
+    extra?: ReactNode;
 }
 export interface ISiteConfigs {
     header?: ISiteHeaderConfig;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@anywayseo/tools",
   "description": "Shared UI Components and Modules",
-  "version": "2.2.5",
+  "version": "2.4.0",
   "keywords": [
     "react",
     "ui",