Update src/components/shared/SvgTextLogo/SvgTextLogo.tsx

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -1,51 +1,78 @@
 "use client";
 
-import { memo } from "react";
-import useSvgTextLogo from "./useSvgTextLogo";
-import { cls } from "@/lib/utils";
+import React, { useEffect, useRef } from "react";
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+
+gsap.registerPlugin(ScrollTrigger);
 
 interface SvgTextLogoProps {
-  logoText: string;
-  adjustHeightFactor?: number;
-  verticalAlign?: "top" | "center";
+  text?: string;
   className?: string;
+  containerClassName?: string;
+  textClassName?: string;
+  id?: string;
 }
 
-const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
-  logoText,
-  adjustHeightFactor,
-  verticalAlign = "top",
-  className = "",
-}) {
-  const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
+const SvgTextLogo = React.forwardRef<SVGSVGElement, SvgTextLogoProps>(
+  (
+    {
+      text = "Webild",      className = "",      containerClassName = "",      textClassName = "",      id = "svg-text-logo"
+    },
+    ref
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null);
+    const svgRef = useRef<SVGSVGElement>(null);
+    const textRef = useRef<SVGTextElement>(null);
 
-  return (
-    <svg
-      ref={svgRef}
-      viewBox={viewBox}
-      className={cls("w-full", className)}
-      style={{ aspectRatio: aspectRatio }}
-      preserveAspectRatio="none"
-      role="img"
-      aria-label={`${logoText} logo`}
-    >
-      <text
-        ref={textRef}
-        x="0"
-        y={verticalAlign === "center" ? "50%" : "0"}
-        className="font-bold fill-current"
-        style={{
-          fontSize: "20px",
-          letterSpacing: "-0.02em",
-          dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
-        }}
-      >
-        {logoText}
-      </text>
-    </svg>
-  );
-});
+    // Combine refs
+    React.useImperativeHandle(ref, () => svgRef.current as SVGSVGElement);
+
+    useEffect(() => {
+      if (!containerRef.current || !svgRef.current || !textRef.current) return;
+
+      const container = containerRef.current;
+      const svg = svgRef.current;
+      const textElement = textRef.current;
+
+      // Get text width
+      const bbox = textElement.getBBox();
+      const textWidth = bbox.width;
+      const textHeight = bbox.height;
+
+      // Set SVG dimensions based on text
+      svg.setAttribute("width", String(textWidth + 40));
+      svg.setAttribute("height", String(textHeight + 20));
+      svg.setAttribute("viewBox", `0 0 ${textWidth + 40} ${textHeight + 20}`);
+
+      // Position text in the center
+      textElement.setAttribute("x", String(20));
+      textElement.setAttribute("y", String(textHeight + 10));
+    }, [text]);
+
+    return (
+      <div ref={containerRef} className={containerClassName}>
+        <svg
+          ref={svgRef}
+          id={id}
+          xmlns="http://www.w3.org/2000/svg"
+          className={`${className}`}
+        >
+          <text
+            ref={textRef}
+            x="0"
+            y="0"
+            className={`font-bold text-2xl fill-current ${textClassName}`}
+            dominantBaseline="hanging"
+          >
+            {text}
+          </text>
+        </svg>
+      </div>
+    );
+  }
+);
 
 SvgTextLogo.displayName = "SvgTextLogo";
 
-export default SvgTextLogo;
+export default SvgTextLogo;