Initial commit

src/components/shared/SvgTextLogo/SvgTextLogo.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { memo } from "react";
+import useSvgTextLogo from "./useSvgTextLogo";
+import { cls } from "@/lib/utils";
+
+interface SvgTextLogoProps {
+  logoText: string;
+  adjustHeightFactor?: number;
+  verticalAlign?: "top" | "center";
+  className?: string;
+}
+
+const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
+  logoText,
+  adjustHeightFactor,
+  verticalAlign = "top",
+  className = "",
+}) {
+  const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
+
+  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>
+  );
+});
+
+SvgTextLogo.displayName = "SvgTextLogo";
+
+export default SvgTextLogo;

src/components/shared/SvgTextLogo/useSvgTextLogo.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { useRef, useEffect, useState } from 'react';
+
+interface UseSvgTextLogoReturn {
+    svgRef: React.RefObject<SVGSVGElement | null>;
+    textRef: React.RefObject<SVGTextElement | null>;
+    viewBox: string;
+    aspectRatio: number;
+}
+
+export default function useSvgTextLogo(logoText: string, hasLogoSrc: boolean, adjustHeightFactor?: number): UseSvgTextLogoReturn {
+    const svgRef = useRef<SVGSVGElement>(null);
+    const textRef = useRef<SVGTextElement>(null);
+    const [viewBox, setViewBox] = useState('0 0 100 20');
+    const [aspectRatio, setAspectRatio] = useState(5);
+
+    useEffect(() => {
+        if (!hasLogoSrc && textRef.current && svgRef.current) {
+            const bbox = textRef.current.getBBox();
+            const height = adjustHeightFactor ? bbox.height * adjustHeightFactor : bbox.height;
+            const yOffset = adjustHeightFactor ? bbox.y + (bbox.height - height) / 2 : bbox.y;
+            setViewBox(`${bbox.x} ${yOffset} ${bbox.width} ${height}`);
+            setAspectRatio(bbox.width / height);
+        }
+    }, [hasLogoSrc, logoText, adjustHeightFactor]);
+
+    return {
+        svgRef,
+        textRef,
+        viewBox,
+        aspectRatio
+    };
+}