fix: background tabs fixed (#2348)

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/AnimatedSurveyBg.tsx

@@ -6,7 +6,7 @@ interface AnimatedSurveyBgProps {
 }
 
 export const AnimatedSurveyBg = ({ handleBgChange, background }: AnimatedSurveyBgProps) => {
-  const [animation, setAnimation] = useState(background || "/animated-bgs/4K/1_4k.mp4");
+  const [animation, setAnimation] = useState(background);
   const [hoveredVideo, setHoveredVideo] = useState<number | null>(null);
 
   const animationFiles = {
@@ -72,6 +72,7 @@ export const AnimatedSurveyBg = ({ handleBgChange, background }: AnimatedSurveyB
     setAnimation(x);
     handleBgChange(x, "animation");
   };
+
   return (
     <div>
       <div className="mt-4 grid grid-cols-6 gap-4">

apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components/SurveyBgSelectorTab.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "react";
 
 import { TProductStyling } from "@formbricks/types/product";
 import { TSurveyStyling } from "@formbricks/types/surveys";
+import { TabBar } from "@formbricks/ui/TabBar";
 
 import { AnimatedSurveyBg } from "./AnimatedSurveyBg";
 import { ColorSurveyBg } from "./ColorSurveyBg";
@@ -15,16 +16,11 @@ interface SurveyBgSelectorTabProps {
   styling: TSurveyStyling | TProductStyling | null;
 }
 
-const TabButton = ({ isActive, onClick, children }) => (
-  <button
-    type="button"
-    className={`w-1/3 rounded-md p-3 text-sm font-medium leading-none text-slate-800 ${
-      isActive ? "bg-white shadow-sm" : ""
-    }`}
-    onClick={onClick}>
-    {children}
-  </button>
-);
+const tabs = [
+  { id: "color", label: "Color" },
+  { id: "animation", label: "Animation" },
+  { id: "image", label: "Image" },
+];
 
 export default function SurveyBgSelectorTab({
   styling,
@@ -33,45 +29,49 @@ export default function SurveyBgSelectorTab({
   bgType,
   environmentId,
 }: SurveyBgSelectorTabProps) {
+  const [activeTab, setActiveTab] = useState(bgType || "color");
   const { background } = styling ?? {};
 
-  const [backgrounds, setBackgrounds] = useState({
-    image: background?.bgType === "image" ? background.bg : "",
-    animation: background?.bgType === "animation" ? background.bg : "",
-    color: background?.bgType === "color" ? background.bg : "",
-  });
+  const [colorBackground, setColorBackground] = useState(background?.bg);
+  const [animationBackground, setAnimationBackground] = useState(background?.bg);
+  const [imageBackground, setImageBackground] = useState(background?.bg);
 
   useEffect(() => {
     const bgType = background?.bgType;
 
-    setBackgrounds((prevBgUrl) => ({
-      ...prevBgUrl,
-      image: bgType === "image" ? background?.bg : prevBgUrl.image,
-      animation: bgType === "animation" ? background?.bg : prevBgUrl.animation,
-      color: bgType === "color" ? background?.bg : prevBgUrl.color,
-    }));
+    if (bgType === "color") {
+      setColorBackground(background?.bg);
+      setAnimationBackground("");
+      setImageBackground("");
+    }
+
+    if (bgType === "animation") {
+      setAnimationBackground(background?.bg);
+      setColorBackground("");
+      setImageBackground("");
+    }
+
+    if (bgType === "image") {
+      setImageBackground(background?.bg);
+      setColorBackground("");
+      setAnimationBackground("");
+    }
   }, [background?.bg, background?.bgType]);
 
-  const [tab, setTab] = useState(bgType || "color");
-
   const renderContent = () => {
-    switch (tab) {
+    switch (activeTab) {
+      case "color":
+        return (
+          <ColorSurveyBg handleBgChange={handleBgChange} colors={colors} background={colorBackground ?? ""} />
+        );
+      case "animation":
+        return <AnimatedSurveyBg handleBgChange={handleBgChange} background={animationBackground ?? ""} />;
       case "image":
         return (
           <ImageSurveyBg
             environmentId={environmentId}
             handleBgChange={handleBgChange}
-            background={backgrounds.image ?? ""}
-          />
-        );
-      case "animation":
-        return <AnimatedSurveyBg handleBgChange={handleBgChange} background={backgrounds.animation ?? ""} />;
-      case "color":
-        return (
-          <ColorSurveyBg
-            handleBgChange={handleBgChange}
-            colors={colors}
-            background={backgrounds.color ?? ""}
+            background={imageBackground ?? ""}
           />
         );
       default:
@@ -81,16 +81,14 @@ export default function SurveyBgSelectorTab({
 
   return (
     <div className="mt-4 flex flex-col items-center justify-center rounded-lg border bg-slate-50 p-4">
-      <div className="flex w-full items-center justify-between rounded-lg border border-slate-300 bg-slate-100 p-2">
-        <TabButton isActive={tab === "color"} onClick={() => setTab("color")}>
-          Color
-        </TabButton>
-        <TabButton isActive={tab === "animation"} onClick={() => setTab("animation")}>
-          Animation
-        </TabButton>
-        <TabButton isActive={tab === "image"} onClick={() => setTab("image")}>
-          Image
-        </TabButton>
+      <div className="flex w-full items-center justify-between overflow-hidden rounded-lg border border-slate-300">
+        <TabBar
+          tabs={tabs}
+          activeId={activeTab}
+          setActiveId={setActiveTab}
+          tabStyle="button"
+          className="bg-slate-100"
+        />
       </div>
       {renderContent()}
     </div>