Merge/develop

src/components/pricing/CollaCard/index.module.css

@@ -15,7 +15,7 @@
 }
 
 .cardContainerStyle {
-  @apply w-full rounded-[16px] overflow-hidden  relative p-[24px] flex flex-col gap-[40px];
+  @apply w-full rounded-[16px] overflow-hidden  relative p-[24px] flex flex-col gap-[40px] border-[2px] border-white/[0.08];
   @apply lg:w-[600px];
   background: radial-gradient(
       98.85% 129.62% at 6.76% 2.06%,

src/components/pricing/PricingCompare/Compare/MobileCompare/index.tsx

@@ -6,18 +6,29 @@ const MobileCompare = ({ compare }) => {
   return (
     <div className={style.mobileCompareContainer}>
       <div className={style.mobileTableHeader}>
-        {compare.tableHeader.map(({ label, mobileLabel }) => (
-          <div key={label} className={clsx(style.mobileTableHeaderItem)}>
+        {compare.tableHeader.map(({ label, mobileLabel }, i) => (
+          <div
+            key={`${label}${i}`}
+            className={clsx(style.mobileTableHeaderItem)}
+          >
             {mobileLabel ?? label}
           </div>
         ))}
       </div>
       <div className="w-full flex flex-col items-center gap-[20px]">
         {compare.items.map(({ title, isTitle, texts, isColla }, index) =>
           isTitle ? (
-            <span className={style.mobileTableTitleStyle}>{title}</span>
+            <span
+              className={style.mobileTableTitleStyle}
+              key={`${title}${index}`}
+            >
+              {title}
+            </span>
           ) : (
-            <div key={index} className={style.mobileTableContentContainer}>
+            <div
+              key={`${title}${index}`}
+              className={style.mobileTableContentContainer}
+            >
               <p className={style.mobileTableItemLabelTitle}>{title}</p>
               <div className="flex flex-row w-full">
                 {texts.map((text, index) => (
@@ -26,6 +37,7 @@ const MobileCompare = ({ compare }) => {
                       style.mobileTableItemSelect,
                       index !== 0 && "border-l",
                     )}
+                    key={`${text}${index}`}
                   >
                     {(typeof text === "boolean" ||
                       (isColla && index !== 0)) && (

src/components/pricing/PricingCompare/Compare/index.tsx

@@ -31,6 +31,7 @@ const Compare = ({ compare, colNum = 3 }) => {
               style.tableSticky,
               i !== noBorder ? "border-r" : "",
             )}
+            key={`${label}${link}${i}`}
           >
             <h2 className="font-[500] text-[22px] leading-[28px] text-center px-[16px]">
               {label}
@@ -48,7 +49,7 @@ const Compare = ({ compare, colNum = 3 }) => {
           </div>
         ))}
         {compare.items.map(({ isTitle, title, texts }, index) => (
-          <Fragment key={index}>
+          <Fragment key={`${title}${index}`}>
             <div
               className={clsx(
                 isTitle ? style.titleTableContent : style.tableContent,
@@ -70,6 +71,7 @@ const Compare = ({ compare, colNum = 3 }) => {
                   style.tableSelect,
                   i !== noBorder ? "border-r" : "",
                 )}
+                key={`${val}${i}`}
               >
                 {typeof val === "boolean" ? (
                   val && (

src/components/pricing/index.tsx

@@ -34,23 +34,36 @@ const Tooltip: FC<TooltipProps> = ({ content, styles, isBound }) => {
     gap = 5,
     width = 200
   const { top, left, visibility } = styles
+  const [currentVisibility, setCurrentVisibility] = useState(visibility)
+
   const offsetHeight = ref.current?.offsetHeight
-  const currentStyle = {
-    top: isBound
-      ? `${top + 24 + gap}px`
-      : `${top - offsetHeight / 2 + iconWidth * 2 - gap}px`,
-    left: isBound
-      ? `${left - width / 1.5 + iconWidth}px`
-      : `${left + iconWidth * 2 + gap * 2}px`,
-  }
+  const currentStyle = useMemo(
+    () => ({
+      top: isBound
+        ? `${top + 24 + gap}px`
+        : `${top - offsetHeight / 2 + iconWidth * 2 - gap}px`,
+      left: isBound
+        ? `${left - width / 1.5 + iconWidth}px`
+        : `${left + iconWidth * 2 + gap * 2}px`,
+    }),
+    [isBound, left, offsetHeight, top],
+  )
+  // Get the size of the element for the first time but not display it, then update the position of the element and display it
+  useEffect(() => {
+    setCurrentVisibility(visibility)
+  }, [visibility])
+
   return (
     <div
       className={clsx(
         isBound ? style.bottomTip : style.rightTip,
         style.tooltip,
       )}
       ref={ref}
-      style={{ visibility: visibility ? "visible" : "hidden", ...currentStyle }}
+      style={{
+        ...currentStyle,
+        visibility: currentVisibility ? "visible" : "hidden",
+      }}
     >
       <p className={style.tipContent}>{content}</p>
     </div>