@sudobility/building_blocks 0.0.17 → 0.0.18

package/dist/index.js

@@ -3,7 +3,7 @@ import React, { useState, useRef, useMemo, useCallback, useEffect, createContext
 import { TopbarProvider, Topbar, TopbarLeft, TopbarNavigation, TopbarLogo, Logo, TopbarCenter, TopbarRight, TopbarActions, TopbarMobileContent, BreadcrumbSection, Footer, FooterCompact, FooterCompactLeft, FooterVersion, FooterCopyright, FooterCompactRight, FooterGrid, FooterLinkSection, FooterLink, FooterBottom, FooterBrand, FooterSocialLinks, LayoutProvider, Label, Select, SelectTrigger, SelectValue, SelectContent, SelectItem, Card, CardContent, Button } from "@sudobility/components";
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
-import { ChevronDownIcon, CalendarDaysIcon, PaintBrushIcon, ChevronLeftIcon } from "@heroicons/react/24/outline";
+import { ChevronDownIcon, CalendarDaysIcon, PaintBrushIcon, ChevronLeftIcon, LanguageIcon, ChevronRightIcon, EnvelopeIcon, DocumentTextIcon, CogIcon, HomeIcon } from "@heroicons/react/24/outline";
 import { GRADIENT_CLASSES, textVariants } from "@sudobility/design";
 import { cva } from "class-variance-authority";
 function cn(...inputs) {
@@ -4619,7 +4619,7 @@ function AppPricingPage({
         {
           options: billingPeriodOptions,
           value: billingPeriod,
-          onChange: setBillingPeriod
+          onChange: (value) => setBillingPeriod(value)
         }
       ) }),
       /* @__PURE__ */ jsxs(
@@ -4736,13 +4736,296 @@ function AppPricingPage({
     ] }) })
   ] });
 }
+const getIcon = (icon) => {
+  switch (icon) {
+    case "home":
+      return /* @__PURE__ */ jsx(HomeIcon, { className: "w-5 h-5 mr-2" });
+    case "document":
+      return /* @__PURE__ */ jsx(DocumentTextIcon, { className: "w-5 h-5 mr-2" });
+    case "envelope":
+      return /* @__PURE__ */ jsx(EnvelopeIcon, { className: "w-5 h-5 mr-2" });
+    case "cog":
+      return /* @__PURE__ */ jsx(CogIcon, { className: "w-5 h-5 mr-2" });
+    case "language":
+      return /* @__PURE__ */ jsx(LanguageIcon, { className: "w-5 h-5 mr-2" });
+    default:
+      return null;
+  }
+};
+const AppSitemapPage = ({
+  text,
+  sections,
+  languages,
+  quickLinks = [],
+  LinkComponent,
+  PageWrapper,
+  className
+}) => {
+  const content = /* @__PURE__ */ jsxs("div", { className: `max-w-7xl mx-auto px-4 py-12 ${className || ""}`, children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold text-gray-900 dark:text-white mb-4", children: text.title }),
+      /* @__PURE__ */ jsx("p", { className: "text-xl text-gray-600 dark:text-gray-300", children: text.subtitle })
+    ] }),
+    languages.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mb-12 p-6 bg-blue-50 dark:bg-blue-900/20 rounded-lg", children: [
+      /* @__PURE__ */ jsxs("h2", { className: "text-xl font-semibold text-gray-900 dark:text-white mb-4 flex items-center", children: [
+        /* @__PURE__ */ jsx(LanguageIcon, { className: "w-6 h-6 mr-2" }),
+        text.languagesSectionTitle
+      ] }),
+      /* @__PURE__ */ jsx("p", { className: "text-gray-600 dark:text-gray-300 mb-6", children: text.languagesDescription }),
+      /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4", children: languages.map((lang) => /* @__PURE__ */ jsxs(
+        LinkComponent,
+        {
+          href: "/",
+          language: lang.code,
+          className: "flex items-center space-x-2 p-3 bg-white dark:bg-gray-800 rounded-lg hover:shadow-md transition-shadow",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-2xl", children: lang.flag }),
+            /* @__PURE__ */ jsx("div", { className: "font-medium text-gray-900 dark:text-white", children: lang.name })
+          ]
+        },
+        lang.code
+      )) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: sections.map((section, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6",
+        children: [
+          /* @__PURE__ */ jsxs("h2", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center", children: [
+            getIcon(section.icon),
+            section.title
+          ] }),
+          /* @__PURE__ */ jsx("ul", { className: "space-y-2", children: section.links.map((link, linkIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+            LinkComponent,
+            {
+              href: link.path,
+              className: "group flex items-start text-sm hover:text-blue-600 dark:hover:text-blue-400 transition-colors",
+              children: [
+                /* @__PURE__ */ jsx(ChevronRightIcon, { className: "w-4 h-4 mt-0.5 mr-2 flex-shrink-0 text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-400" }),
+                /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-700 dark:text-gray-300 group-hover:text-blue-600 dark:group-hover:text-blue-400", children: link.label }),
+                  link.description && /* @__PURE__ */ jsx("span", { className: "block text-xs text-gray-500 dark:text-gray-400 mt-0.5", children: link.description })
+                ] })
+              ]
+            }
+          ) }, linkIndex)) })
+        ]
+      },
+      index
+    )) }),
+    quickLinks.length > 0 && /* @__PURE__ */ jsxs("div", { className: "mt-12 p-6 bg-gray-50 dark:bg-gray-900 rounded-lg", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-gray-900 dark:text-white mb-4", children: text.quickLinksTitle }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-3", children: quickLinks.map((link, index) => {
+        const baseClasses = "inline-flex items-center px-4 py-2 rounded-lg transition-colors";
+        const variantClasses = link.variant === "primary" ? "bg-blue-600 text-white hover:bg-blue-700" : link.variant === "secondary" ? "bg-gray-600 text-white hover:bg-gray-700" : "border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800";
+        return /* @__PURE__ */ jsxs(
+          LinkComponent,
+          {
+            href: link.path,
+            className: `${baseClasses} ${variantClasses}`,
+            children: [
+              link.icon === "envelope" && /* @__PURE__ */ jsx(EnvelopeIcon, { className: "w-5 h-5 mr-2" }),
+              link.icon === "document" && /* @__PURE__ */ jsx(DocumentTextIcon, { className: "w-5 h-5 mr-2" }),
+              link.label
+            ]
+          },
+          index
+        );
+      }) })
+    ] })
+  ] });
+  if (PageWrapper) {
+    return /* @__PURE__ */ jsx(PageWrapper, { children: content });
+  }
+  return content;
+};
+const SectionHeading$1 = ({ children }) => /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-gray-100 mt-8 mb-4", children });
+const SubsectionHeading = ({ children }) => /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900 dark:text-gray-100 mt-6 mb-3", children });
+const Paragraph$1 = ({
+  children,
+  className = ""
+}) => /* @__PURE__ */ jsx("p", { className: `text-gray-600 dark:text-gray-300 mb-6 ${className}`, children });
+const List$1 = ({ items }) => /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside text-gray-600 dark:text-gray-300 mb-6", children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: item }, index)) });
+const AppPrivacyPolicyPage = ({
+  text,
+  lastUpdatedDate = (/* @__PURE__ */ new Date()).toLocaleDateString(),
+  PageWrapper,
+  className
+}) => {
+  const content = /* @__PURE__ */ jsxs("div", { className: `max-w-7xl mx-auto px-4 py-12 ${className || ""}`, children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold text-gray-900 dark:text-gray-100 mb-8", children: text.heading }),
+    /* @__PURE__ */ jsxs("div", { className: "prose prose-lg max-w-none", children: [
+      /* @__PURE__ */ jsxs(Paragraph$1, { className: "mb-6", children: [
+        text.lastUpdatedLabel,
+        " ",
+        lastUpdatedDate
+      ] }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.introduction.title }),
+      /* @__PURE__ */ jsx(Paragraph$1, { children: text.introduction.content }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.informationWeCollect.title }),
+      /* @__PURE__ */ jsx(SubsectionHeading, { children: text.informationWeCollect.youProvide.title }),
+      /* @__PURE__ */ jsx(List$1, { items: text.informationWeCollect.youProvide.items }),
+      /* @__PURE__ */ jsx(SubsectionHeading, { children: text.informationWeCollect.automatic.title }),
+      /* @__PURE__ */ jsx(List$1, { items: text.informationWeCollect.automatic.items }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.howWeUse.title }),
+      text.howWeUse.description && /* @__PURE__ */ jsx(Paragraph$1, { className: "mb-4", children: text.howWeUse.description }),
+      /* @__PURE__ */ jsx(List$1, { items: text.howWeUse.items }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.informationSharing.title }),
+      text.informationSharing.description && /* @__PURE__ */ jsx(Paragraph$1, { className: "mb-4", children: text.informationSharing.description }),
+      /* @__PURE__ */ jsx(List$1, { items: text.informationSharing.items }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.dataSecurity.title }),
+      text.dataSecurity.description && /* @__PURE__ */ jsx(Paragraph$1, { className: "mb-4", children: text.dataSecurity.description }),
+      /* @__PURE__ */ jsx(List$1, { items: text.dataSecurity.items }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.dataRetention.title }),
+      /* @__PURE__ */ jsx(Paragraph$1, { children: text.dataRetention.content }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.privacyRights.title }),
+      text.privacyRights.description && /* @__PURE__ */ jsx(Paragraph$1, { className: "mb-4", children: text.privacyRights.description }),
+      /* @__PURE__ */ jsx(List$1, { items: text.privacyRights.items }),
+      text.web3Considerations && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(SectionHeading$1, { children: text.web3Considerations.title }),
+        text.web3Considerations.description && /* @__PURE__ */ jsx(Paragraph$1, { className: "mb-4", children: text.web3Considerations.description }),
+        /* @__PURE__ */ jsx(List$1, { items: text.web3Considerations.items })
+      ] }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.internationalTransfers.title }),
+      /* @__PURE__ */ jsx(Paragraph$1, { children: text.internationalTransfers.content }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.childrensPrivacy.title }),
+      /* @__PURE__ */ jsx(Paragraph$1, { children: text.childrensPrivacy.content }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.cookies.title }),
+      /* @__PURE__ */ jsx(Paragraph$1, { children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: text.cookies.content } }) }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.changes.title }),
+      /* @__PURE__ */ jsx(Paragraph$1, { children: text.changes.content }),
+      /* @__PURE__ */ jsx(SectionHeading$1, { children: text.contact.title }),
+      /* @__PURE__ */ jsx(Paragraph$1, { children: text.contact.description }),
+      /* @__PURE__ */ jsx("div", { className: "bg-gray-50 dark:bg-gray-800 p-4 rounded-lg", children: /* @__PURE__ */ jsxs("p", { className: "text-gray-700 dark:text-gray-300", children: [
+        text.contact.info.emailLabel,
+        " ",
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `mailto:${text.contact.info.email}`,
+            className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
+            children: text.contact.info.email
+          }
+        ),
+        /* @__PURE__ */ jsx("br", {}),
+        text.contact.info.websiteLabel,
+        " ",
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: text.contact.info.websiteUrl,
+            className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
+            children: text.contact.info.websiteUrl
+          }
+        ),
+        /* @__PURE__ */ jsx("br", {}),
+        text.contact.info.dpoLabel,
+        " ",
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `mailto:${text.contact.info.dpoEmail}`,
+            className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
+            children: text.contact.info.dpoEmail
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "mt-8 p-4 bg-blue-50 dark:bg-blue-900/20 rounded-lg", children: [
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-blue-900 dark:text-blue-200 mb-2", children: text.contact.info.gdprTitle }),
+        /* @__PURE__ */ jsxs("p", { className: "text-blue-800 dark:text-blue-300", children: [
+          text.contact.info.gdprContent,
+          " ",
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `mailto:${text.contact.info.dpoEmail}`,
+              className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
+              children: text.contact.info.dpoEmail
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+  if (PageWrapper) {
+    return /* @__PURE__ */ jsx(PageWrapper, { children: content });
+  }
+  return content;
+};
+function isSectionWithList(section) {
+  return "items" in section && Array.isArray(section.items);
+}
+const SectionHeading = ({ children }) => /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold text-gray-900 dark:text-gray-100 mt-8 mb-4", children });
+const Paragraph = ({
+  children,
+  className = ""
+}) => /* @__PURE__ */ jsx("p", { className: `text-gray-600 dark:text-gray-300 mb-6 ${className}`, children });
+const List = ({ items }) => /* @__PURE__ */ jsx("ul", { className: "list-disc list-inside text-gray-600 dark:text-gray-300 mb-6", children: items.map((item, index) => /* @__PURE__ */ jsx("li", { children: item }, index)) });
+const AppTermsOfServicePage = ({
+  text,
+  lastUpdatedDate = (/* @__PURE__ */ new Date()).toLocaleDateString(),
+  PageWrapper,
+  className
+}) => {
+  const content = /* @__PURE__ */ jsxs("div", { className: `max-w-7xl mx-auto px-4 py-12 ${className || ""}`, children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-4xl font-bold text-gray-900 dark:text-gray-100 mb-8", children: text.title }),
+    /* @__PURE__ */ jsxs("div", { className: "prose prose-lg dark:prose-invert max-w-none", children: [
+      /* @__PURE__ */ jsx(Paragraph, { className: "mb-6", children: text.lastUpdated.replace("{{date}}", lastUpdatedDate) }),
+      text.sections.map((section, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(SectionHeading, { children: section.title }),
+        isSectionWithList(section) ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          section.description && /* @__PURE__ */ jsx(Paragraph, { className: "mb-4", children: section.description }),
+          /* @__PURE__ */ jsx(List, { items: section.items }),
+          section.additionalContent && /* @__PURE__ */ jsx(Paragraph, { children: section.additionalContent })
+        ] }) : section.isHtml ? /* @__PURE__ */ jsx(Paragraph, { children: /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: section.content } }) }) : /* @__PURE__ */ jsx(Paragraph, { children: section.content })
+      ] }, index)),
+      /* @__PURE__ */ jsx(SectionHeading, { children: text.contact.title }),
+      text.contact.isHtml ? /* @__PURE__ */ jsx(Paragraph, { children: /* @__PURE__ */ jsx(
+        "span",
+        {
+          dangerouslySetInnerHTML: { __html: text.contact.description }
+        }
+      ) }) : /* @__PURE__ */ jsx(Paragraph, { children: text.contact.description }),
+      /* @__PURE__ */ jsx("div", { className: "bg-gray-50 dark:bg-gray-800 p-4 rounded-lg", children: /* @__PURE__ */ jsxs("p", { className: "text-gray-700 dark:text-gray-300", children: [
+        text.contact.info.emailLabel,
+        " ",
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: `mailto:${text.contact.info.email}`,
+            className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
+            children: text.contact.info.email
+          }
+        ),
+        /* @__PURE__ */ jsx("br", {}),
+        text.contact.info.websiteLabel,
+        " ",
+        /* @__PURE__ */ jsx(
+          "a",
+          {
+            href: text.contact.info.websiteUrl,
+            className: "text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-300",
+            children: text.contact.info.websiteUrl
+          }
+        )
+      ] }) })
+    ] })
+  ] });
+  if (PageWrapper) {
+    return /* @__PURE__ */ jsx(PageWrapper, { children: content });
+  }
+  return content;
+};
 export {
   AppBreadcrumbs,
   AppFooter,
   AppFooterForHomePage,
   AppPageLayout,
   AppPricingPage,
+  AppPrivacyPolicyPage,
+  AppSitemapPage,
   AppSubscriptionsPage,
+  AppTermsOfServicePage,
   AppTopBar,
   AppTopBarWithFirebaseAuth,
   AppTopBarWithWallet,