@rxdrag/website-lib-core 0.0.126 → 0.0.128

package/src/react/components/GoogleConsent/CookieItemPanel.tsx

@@ -1,81 +1,81 @@
-import type { CookieItem } from "./types";
-import clsx from "clsx";
-import { motion } from "framer-motion";
-
-export function CookieItemPanel(props: {
-  item: CookieItem,
-  openedItem?: string,
-  onToggle: (value: string) => void,
-  checked?: boolean
-  onChange?: (checked: boolean) => void
-}) {
-  const { item, openedItem, checked, onChange, onToggle } = props;
-
-  const opened = openedItem === item.checkbox.valueName;
-  return (
-    <div className="p-4 bg-gray-100 rounded-md">
-      <div className="flex justify-between">
-        <h2
-          className="flex text-sm font-bold items-center gap-2 cursor-pointer select-none"
-          onClick={() => onToggle(item.checkbox.valueName)}
-        >
-          <span
-            className={
-              clsx(
-                "rounded-full h-7 w-7 p-1 bg-gray-200 transition-transform duration-200 ease-in-out",
-                opened ? "transform rotate-[-180deg]" : ""
-              )
-            }>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              fill="none"
-              viewBox="0 0 24 24"
-              strokeWidth="1.5"
-              stroke="currentColor">
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
-            </svg>
-          </span>
-          <span>
-            {item.title}
-          </span>
-        </h2>
-        <div className="flex items-center gap-2">
-          <span className="text-sm">
-            {item.checkbox.alwaysActive ? item.checkbox.label : (checked ? "Active" : "")}
-          </span>
-          <label className="relative inline-flex cursor-pointer items-center">
-            <input
-              id="switch"
-              checked={item.checkbox.alwaysActive || checked}
-              type="checkbox" className="peer sr-only"
-              onChange={() => {
-                onChange?.(!checked);
-              }}
-            />
-            <label htmlFor="switch" className="hidden"></label>
-            <div className="peer h-6 w-11 rounded-full border bg-slate-200 after:absolute after:left-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-slate-800 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-green-300"></div>
-          </label>
-        </div>
-      </div>
-
-      <p className={clsx(opened ? "" : "hidden")}>
-        <motion.div
-          initial="hidden"
-          className={
-            clsx("text-sm pt-4")
-          }
-          animate={{
-            opacity: opened ? "1" : "0",
-            height: opened ? "auto" : "0",
-            transition: opened ? { duration: 0.2, } : {}
-          }}
-        >
-          {item.content}
-        </motion.div>
-      </p>
-    </div >
-  )
+import type { CookieItem } from "./types";
+import clsx from "clsx";
+import { motion } from "framer-motion";
+
+export function CookieItemPanel(props: {
+  item: CookieItem,
+  openedItem?: string,
+  onToggle: (value: string) => void,
+  checked?: boolean
+  onChange?: (checked: boolean) => void
+}) {
+  const { item, openedItem, checked, onChange, onToggle } = props;
+
+  const opened = openedItem === item.checkbox.valueName;
+  return (
+    <div className="p-4 bg-gray-100 rounded-md">
+      <div className="flex justify-between">
+        <h2
+          className="flex text-sm font-bold items-center gap-2 cursor-pointer select-none"
+          onClick={() => onToggle(item.checkbox.valueName)}
+        >
+          <span
+            className={
+              clsx(
+                "rounded-full h-7 w-7 p-1 bg-gray-200 transition-transform duration-200 ease-in-out",
+                opened ? "transform rotate-[-180deg]" : ""
+              )
+            }>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth="1.5"
+              stroke="currentColor">
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
+            </svg>
+          </span>
+          <span>
+            {item.title}
+          </span>
+        </h2>
+        <div className="flex items-center gap-2">
+          <span className="text-sm">
+            {item.checkbox.alwaysActive ? item.checkbox.label : (checked ? "Active" : "")}
+          </span>
+          <label className="relative inline-flex cursor-pointer items-center">
+            <input
+              id="switch"
+              checked={item.checkbox.alwaysActive || checked}
+              type="checkbox" className="peer sr-only"
+              onChange={() => {
+                onChange?.(!checked);
+              }}
+            />
+            <label htmlFor="switch" className="hidden"></label>
+            <div className="peer h-6 w-11 rounded-full border bg-slate-200 after:absolute after:left-[2px] after:top-0.5 after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-slate-800 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:ring-green-300"></div>
+          </label>
+        </div>
+      </div>
+
+      <p className={clsx(opened ? "" : "hidden")}>
+        <motion.div
+          initial="hidden"
+          className={
+            clsx("text-sm pt-4")
+          }
+          animate={{
+            opacity: opened ? "1" : "0",
+            height: opened ? "auto" : "0",
+            transition: opened ? { duration: 0.2, } : {}
+          }}
+        >
+          {item.content}
+        </motion.div>
+      </p>
+    </div >
+  )
 }

package/src/react/components/GoogleConsent/CumtomizedModal.tsx

@@ -1,149 +1,149 @@
-import type { ConsentSettings, CookieItem } from "./types"
-import { CookieItemPanel } from "./CookieItemPanel"
-import { useState } from "react"
-import { XModal } from "../XModal/XModal"
-import { XModalAction } from "../XModalAction"
-import { XModalOverlay } from "../XModalOverlay"
-import { XModalContent } from "../XModalContent"
-import { XModalClose } from "../XModalClose"
-
-const items: CookieItem[] = [
-  {
-    title: "Strictly Necessary Cookies",
-    content: "These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences or filling in forms.",
-    checkbox: {
-      valueName: "strictlyNecessary",
-      label: "Always Active",
-      alwaysActive: true,
-    }
-  },
-  {
-    title: "Analytics Cookies",
-    content: "These cookies allow us to track analytics by counting visits and traffic sources so we can measure and improve the performance of our website. They may be set by us or by third party providers to help us to know which pages are the most and least popular and see how visitors move around the website.",
-    checkbox: {
-      valueName: "analytics",
-    }
-  },
-  {
-    title: "Functionality Cookies",
-    content: "These cookies enable the website to provide enhanced functionality and personalization based on your interaction with the website. They may be set by us or by third party providers whose services we have added to our pages.",
-    checkbox: {
-      valueName: "functionality",
-    }
-  },
-  {
-    title: "Advertisement Cookies",
-    content: "These cookies may be set through our site by our advertising partners. They may be used by those partners to build a profile of your interests and show you relevant advertisements on other websites.",
-    checkbox: {
-      valueName: "advertisement",
-    }
-  }
-]
-
-export function CumtomizedModal(
-  props: {
-    onAcceptAll?: () => void,
-    onRejectAll?: () => void,
-    onSavePreferences?: (consent: ConsentSettings) => void
-  }
-) {
-  const { onAcceptAll, onRejectAll, onSavePreferences } = props;
-  const [openedItem, setOpenedItem] = useState<string>();
-  const [consent, setConsent] = useState<ConsentSettings>({
-    strictlyNecessary: true,
-    analytics: false,
-    functionality: false,
-    advertisement: false,
-  });
-
-
-  const handleSavePreferences = () => {
-    onSavePreferences?.(consent);
-  }
-
-  return (
-    <XModal
-      className="col-span-2 "
-      action={
-        <XModalAction
-          className="w-full text-white py-2 px-2 rounded bg-gray-700 hover:bg-gray-800"
-        >
-          Custimized Settings
-        </XModalAction>
-      }
-      overlay={
-        <XModalOverlay
-          initial={{ opacity: 0 }}
-          animate={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          className="fixed inset-0 bg-black/30 backdrop-blur-md"
-        />
-      }
-      content={
-        <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
-          <XModalContent
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            exit={{ opacity: 0, scale: 0.95 }}
-            className="relative max-w-2xl space-y-4 bg-white pb-4 pt-0 px-4 rounded-lg w-full overflow-hidden"
-          >
-            <XModalClose className="absolute right-4 top-4 ">
-              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
-                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </XModalClose>
-            <div className="text-xl font-bold px-2">Privacy Preference Center</div>
-            <div className="h-[420px] overflow-y-scroll flex flex-col gap-2 px-2">
-              <h2 className="text-md font-bold">Cookie Usage</h2>
-              <p className="text-sm">
-                These cookies allow us to track analytics by counting visits and traffic sources so we can measure and improve the performance of our website. They may be set by us or by third party providers to help us to know which pages are the most and least popular and see how visitors move around the website.
-              </p>
-              {
-                items.map((item, index) => (
-                  <CookieItemPanel
-                    key={index}
-                    item={item}
-                    openedItem={openedItem}
-                    checked={consent[item.checkbox.valueName as keyof ConsentSettings]}
-                    onToggle={(value) => {
-                      setOpenedItem(openedItem === value ? undefined : value);
-                    }}
-                    onChange={(checked) => {
-                      setConsent((prev) => ({
-                        ...prev,
-                        [item.checkbox.valueName]: checked
-                      }))
-                    }}
-                  />
-                ))
-              }
-            </div>
-            <div className="flex items-center justify-between text-sm">
-              <div className="flex gap-4">
-                <button
-                  className="bg-gray-700 hover:bg-gray-800 text-white py-2 px-3 rounded"
-                  onClick={onAcceptAll}
-                >
-                  Accept All Cookies
-                </button>
-                <button
-                  className="bg-gray-700 hover:bg-gray-800 text-white py-2 px-3 rounded"
-                  onClick={onRejectAll}
-                >
-                  Reject All
-                </button>
-              </div>
-              <button
-                className="bg-green-500 hover:bg-green-600 text-white py-2 px-3 rounded"
-                onClick={handleSavePreferences}
-              >
-                Save Preferences
-              </button>
-            </div>
-          </XModalContent>
-        </div>
-      }
-
-    />
-  )
+import type { ConsentSettings, CookieItem } from "./types"
+import { CookieItemPanel } from "./CookieItemPanel"
+import { useState } from "react"
+import { XModal } from "../XModal/XModal"
+import { XModalAction } from "../XModalAction"
+import { XModalOverlay } from "../XModalOverlay"
+import { XModalContent } from "../XModalContent"
+import { XModalClose } from "../XModalClose"
+
+const items: CookieItem[] = [
+  {
+    title: "Strictly Necessary Cookies",
+    content: "These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences or filling in forms.",
+    checkbox: {
+      valueName: "strictlyNecessary",
+      label: "Always Active",
+      alwaysActive: true,
+    }
+  },
+  {
+    title: "Analytics Cookies",
+    content: "These cookies allow us to track analytics by counting visits and traffic sources so we can measure and improve the performance of our website. They may be set by us or by third party providers to help us to know which pages are the most and least popular and see how visitors move around the website.",
+    checkbox: {
+      valueName: "analytics",
+    }
+  },
+  {
+    title: "Functionality Cookies",
+    content: "These cookies enable the website to provide enhanced functionality and personalization based on your interaction with the website. They may be set by us or by third party providers whose services we have added to our pages.",
+    checkbox: {
+      valueName: "functionality",
+    }
+  },
+  {
+    title: "Advertisement Cookies",
+    content: "These cookies may be set through our site by our advertising partners. They may be used by those partners to build a profile of your interests and show you relevant advertisements on other websites.",
+    checkbox: {
+      valueName: "advertisement",
+    }
+  }
+]
+
+export function CumtomizedModal(
+  props: {
+    onAcceptAll?: () => void,
+    onRejectAll?: () => void,
+    onSavePreferences?: (consent: ConsentSettings) => void
+  }
+) {
+  const { onAcceptAll, onRejectAll, onSavePreferences } = props;
+  const [openedItem, setOpenedItem] = useState<string>();
+  const [consent, setConsent] = useState<ConsentSettings>({
+    strictlyNecessary: true,
+    analytics: false,
+    functionality: false,
+    advertisement: false,
+  });
+
+
+  const handleSavePreferences = () => {
+    onSavePreferences?.(consent);
+  }
+
+  return (
+    <XModal
+      className="col-span-2 "
+      action={
+        <XModalAction
+          className="w-full text-white py-2 px-2 rounded bg-gray-700 hover:bg-gray-800"
+        >
+          Custimized Settings
+        </XModalAction>
+      }
+      overlay={
+        <XModalOverlay
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          exit={{ opacity: 0 }}
+          className="fixed inset-0 bg-black/30 backdrop-blur-md"
+        />
+      }
+      content={
+        <div className="fixed inset-0 flex w-screen items-center justify-center p-4">
+          <XModalContent
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            exit={{ opacity: 0, scale: 0.95 }}
+            className="relative max-w-2xl space-y-4 bg-white pb-4 pt-0 px-4 rounded-lg w-full overflow-hidden"
+          >
+            <XModalClose className="absolute right-4 top-4 ">
+              <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </XModalClose>
+            <div className="text-xl font-bold px-2">Privacy Preference Center</div>
+            <div className="h-[420px] overflow-y-scroll flex flex-col gap-2 px-2">
+              <h2 className="text-md font-bold">Cookie Usage</h2>
+              <p className="text-sm">
+                These cookies allow us to track analytics by counting visits and traffic sources so we can measure and improve the performance of our website. They may be set by us or by third party providers to help us to know which pages are the most and least popular and see how visitors move around the website.
+              </p>
+              {
+                items.map((item, index) => (
+                  <CookieItemPanel
+                    key={index}
+                    item={item}
+                    openedItem={openedItem}
+                    checked={consent[item.checkbox.valueName as keyof ConsentSettings]}
+                    onToggle={(value) => {
+                      setOpenedItem(openedItem === value ? undefined : value);
+                    }}
+                    onChange={(checked) => {
+                      setConsent((prev) => ({
+                        ...prev,
+                        [item.checkbox.valueName]: checked
+                      }))
+                    }}
+                  />
+                ))
+              }
+            </div>
+            <div className="flex items-center justify-between text-sm">
+              <div className="flex gap-4">
+                <button
+                  className="bg-gray-700 hover:bg-gray-800 text-white py-2 px-3 rounded"
+                  onClick={onAcceptAll}
+                >
+                  Accept All Cookies
+                </button>
+                <button
+                  className="bg-gray-700 hover:bg-gray-800 text-white py-2 px-3 rounded"
+                  onClick={onRejectAll}
+                >
+                  Reject All
+                </button>
+              </div>
+              <button
+                className="bg-green-500 hover:bg-green-600 text-white py-2 px-3 rounded"
+                onClick={handleSavePreferences}
+              >
+                Save Preferences
+              </button>
+            </div>
+          </XModalContent>
+        </div>
+      }
+
+    />
+  )
 }

package/src/react/components/GoogleConsent/GoogleConsent.tsx

@@ -1,101 +1,101 @@
-import { useEffect, useMemo, useState } from "react";
-import { CumtomizedModal } from "./CumtomizedModal";
-import Cookies from "universal-cookie"
-import { ConsentSettings } from "./types";
-import { Container } from "../Container";
-import { gtag } from "./gtags";
-
-const COOKIE_NAME = "gdpr-consent";
-
-const DEINED_ALL: ConsentSettings = {
-  strictlyNecessary: true,
-  analytics: false,
-  functionality: false,
-  advertisement: false,
-}
-
-export function XGoogleConsent(props: {
-  domain?: string
-}) {
-  const { domain } = props;
-
-  const [decisionMade, setDecisionMade] = useState(true) // start with true to avoid flashing
-  const cookies = useMemo(() => new Cookies(), []);
-
-  useEffect(() => {
-    const consent = cookies.get(COOKIE_NAME);
-    if (consent !== undefined) {
-      setDecisionMade(true)
-      sendConsent(consent)
-    } else {
-      setDecisionMade(false)
-      // 默认设置
-      gtag.consent(DEINED_ALL);
-    }
-  }, [cookies, setDecisionMade])
-
-  const handleSavePreferences = (consent: ConsentSettings) => {
-    saveDecision(consent)
-  };
-
-  const handleDeclineAll = () => {
-    saveDecision(DEINED_ALL)
-  };
-
-  const saveDecision = (consent: ConsentSettings) => {
-    sendConsent(consent);
-
-    cookies.set(COOKIE_NAME, consent, {
-      expires: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
-      path: "/",
-      domain: domain
-    })
-
-    setDecisionMade(true)
-  }
-
-  const sendConsent = (consent: ConsentSettings) => {
-    gtag.consent(consent);
-  }
-
-  const handleAcceptAll = () => {
-    saveDecision({
-      advertisement: true,
-      analytics: true,
-      functionality: true,
-      strictlyNecessary: true
-    })
-  };
-
-  if (decisionMade) {
-    return null;
-  }
-
-  return (
-    <div className="fixed left-0 bottom-0 w-full shadow-lg bg-gray-600">
-      <Container>
-        <div className="text-white p-6 w-full">
-          <div className="flex flex-1 items-center gap-8 justify-between">
-            <div className="text-sm">
-              <h2 className="text-md font-bold pb-2">We Value Your Privacy</h2>
-              We use cookies for site improvement, personalization, and ads. Accepting enhances your experience, but you can manage preferences or decline non-essential cookies. See our <a className="text-blue-500" target="_blank" href="/privacy-policy">Cookie Policy</a> for details.
-            </div>
-            <div className="grid grid-cols-2 w-[300px] gap-2 text-sm">
-              <button onClick={handleAcceptAll} className="bg-green-400 hover:bg-green-500 text-white py-2 px-2 rounded">
-                Accept All
-              </button>
-              <button onClick={handleDeclineAll} className="text-white py-2 px-2 rounded  bg-gray-700 hover:bg-gray-800">
-                Decline All
-              </button>
-              <CumtomizedModal
-                onAcceptAll={handleAcceptAll}
-                onRejectAll={handleDeclineAll}
-                onSavePreferences={handleSavePreferences}
-              />
-            </div>
-          </div>
-        </div>
-      </Container>
-    </div>
-  );
+import { useEffect, useMemo, useState } from "react";
+import { CumtomizedModal } from "./CumtomizedModal";
+import Cookies from "universal-cookie"
+import { ConsentSettings } from "./types";
+import { Container } from "../Container";
+import { gtag } from "./gtags";
+
+const COOKIE_NAME = "gdpr-consent";
+
+const DEINED_ALL: ConsentSettings = {
+  strictlyNecessary: true,
+  analytics: false,
+  functionality: false,
+  advertisement: false,
+}
+
+export function XGoogleConsent(props: {
+  domain?: string
+}) {
+  const { domain } = props;
+
+  const [decisionMade, setDecisionMade] = useState(true) // start with true to avoid flashing
+  const cookies = useMemo(() => new Cookies(), []);
+
+  useEffect(() => {
+    const consent = cookies.get(COOKIE_NAME);
+    if (consent !== undefined) {
+      setDecisionMade(true)
+      sendConsent(consent)
+    } else {
+      setDecisionMade(false)
+      // 默认设置
+      gtag.consent(DEINED_ALL);
+    }
+  }, [cookies, setDecisionMade])
+
+  const handleSavePreferences = (consent: ConsentSettings) => {
+    saveDecision(consent)
+  };
+
+  const handleDeclineAll = () => {
+    saveDecision(DEINED_ALL)
+  };
+
+  const saveDecision = (consent: ConsentSettings) => {
+    sendConsent(consent);
+
+    cookies.set(COOKIE_NAME, consent, {
+      expires: new Date(new Date().setFullYear(new Date().getFullYear() + 1)),
+      path: "/",
+      domain: domain
+    })
+
+    setDecisionMade(true)
+  }
+
+  const sendConsent = (consent: ConsentSettings) => {
+    gtag.consent(consent);
+  }
+
+  const handleAcceptAll = () => {
+    saveDecision({
+      advertisement: true,
+      analytics: true,
+      functionality: true,
+      strictlyNecessary: true
+    })
+  };
+
+  if (decisionMade) {
+    return null;
+  }
+
+  return (
+    <div className="fixed left-0 bottom-0 w-full shadow-lg bg-gray-600">
+      <Container>
+        <div className="text-white p-6 w-full">
+          <div className="flex flex-1 items-center gap-8 justify-between">
+            <div className="text-sm">
+              <h2 className="text-md font-bold pb-2">We Value Your Privacy</h2>
+              We use cookies for site improvement, personalization, and ads. Accepting enhances your experience, but you can manage preferences or decline non-essential cookies. See our <a className="text-blue-500" target="_blank" href="/privacy-policy">Cookie Policy</a> for details.
+            </div>
+            <div className="grid grid-cols-2 w-[300px] gap-2 text-sm">
+              <button onClick={handleAcceptAll} className="bg-green-400 hover:bg-green-500 text-white py-2 px-2 rounded">
+                Accept All
+              </button>
+              <button onClick={handleDeclineAll} className="text-white py-2 px-2 rounded  bg-gray-700 hover:bg-gray-800">
+                Decline All
+              </button>
+              <CumtomizedModal
+                onAcceptAll={handleAcceptAll}
+                onRejectAll={handleDeclineAll}
+                onSavePreferences={handleSavePreferences}
+              />
+            </div>
+          </div>
+        </div>
+      </Container>
+    </div>
+  );
 }