Add inline variant to BrandingBadge component

Author: mxvsh

apps/web/src/components/embed/BrandingBadge.tsx

@@ -2,17 +2,56 @@ import type { ThemeColors } from "./useEmbedTheme";
 
 interface Props {
   theme?: ThemeColors;
+  variant?: "overlay" | "inline";
+  size?: number;
 }
 
-export default function BrandingBadge({ theme }: Props) {
+const HREF = "https://livedot.dev?utm_source=embed&utm_medium=branding&utm_campaign=powered_by";
+
+export default function BrandingBadge({ theme, variant = "overlay", size = 1 }: Props) {
   const bg = theme?.bg ?? "rgba(10, 10, 10, 0.78)";
   const border = theme?.border ?? "rgba(255, 255, 255, 0.12)";
   const text = theme?.text ?? "#fafafa";
-  const textSecondary = theme?.brandingText ?? "rgba(255, 255, 255, 0.72)";
+  const brandingText = theme?.brandingText ?? "rgba(255, 255, 255, 0.72)";
+  const brandingBg = theme?.brandingBg ?? "rgba(255, 255, 255, 0.06)";
+  const brandingBorder = theme?.brandingBorder ?? "rgba(255, 255, 255, 0.08)";
+
+  if (variant === "inline") {
+    return (
+      <a
+        href={HREF}
+        target="_blank"
+        rel="noreferrer"
+        aria-label="Powered by Livedot"
+        style={{
+          display: "inline-flex",
+          alignItems: "center",
+          gap: 8 * size,
+          padding: `0 ${10 * size}px`,
+          height: 28 * size,
+          borderRadius: 999,
+          background: brandingBg,
+          border: `1px solid ${brandingBorder}`,
+          flexShrink: 0,
+          textDecoration: "none",
+        }}
+      >
+        <img
+          src="/logo.svg"
+          alt=""
+          aria-hidden="true"
+          style={{ width: 18 * size, height: 18 * size, borderRadius: 6 * size, display: "block" }}
+        />
+        <span style={{ fontSize: 11 * size, fontWeight: 600, color: brandingText, whiteSpace: "nowrap" }}>
+          Powered by Livedot
+        </span>
+      </a>
+    );
+  }
 
   return (
     <a
-      href="https://livedot.dev"
+      href={HREF}
       target="_blank"
       rel="noreferrer"
       aria-label="Powered by Livedot"
@@ -39,8 +78,8 @@ export default function BrandingBadge({ theme }: Props) {
         aria-hidden="true"
         style={{ width: 18, height: 18, borderRadius: 5, flexShrink: 0 }}
       />
-      <span style={{ fontSize: 11, lineHeight: 1, color: textSecondary }}>Powered by</span>
-      <span style={{ fontSize: 12, lineHeight: 1, fontWeight: 700, letterSpacing: "-0.02em" }}>{" "}livedot</span>
+      <span style={{ fontSize: 11, lineHeight: 1, color: brandingText }}>Powered by</span>
+      <span style={{ fontSize: 12, lineHeight: 1, fontWeight: 700, letterSpacing: "-0.02em" }}> livedot</span>
     </a>
   );
 }

apps/web/src/routes/embed/chart.tsx

@@ -3,6 +3,7 @@ import { useWebSocket } from "@/hooks/useWebSocket";
 import { aggregateHistoryPoints } from "@/lib/chart";
 import { useEmbedBranding } from "@/components/embed/useEmbedBranding";
 import { useEmbedTheme, type EmbedTheme } from "@/components/embed/useEmbedTheme";
+import BrandingBadge from "@/components/embed/BrandingBadge";
 
 export const Route = createFileRoute("/embed/chart")({
   component: EmbedChart,
@@ -150,23 +151,7 @@ function EmbedChart() {
             <line x1="0" y1={H / 2} x2={W} y2={H / 2} stroke={accent} strokeOpacity="0.15" strokeWidth={1 * size} strokeDasharray="4 4" />
           )}
         </svg>
-        {showBranding && (
-          <a
-            href="https://livedot.dev"
-            target="_blank"
-            rel="noreferrer"
-            style={{
-              display: "inline-block",
-              marginTop: 6 * size,
-              fontSize: 10 * size,
-              color: t.brandingText,
-              textDecoration: "none",
-              letterSpacing: "0.01em",
-            }}
-          >
-            Powered by Livedot
-          </a>
-        )}
+        {showBranding && <BrandingBadge theme={t} variant="inline" size={size} />}
       </div>
     </div>
   );

apps/web/src/routes/embed/live.tsx

@@ -2,6 +2,7 @@ import { createFileRoute } from "@tanstack/react-router";
 import { useWebSocket } from "@/hooks/useWebSocket";
 import { useEmbedBranding } from "@/components/embed/useEmbedBranding";
 import { useEmbedTheme, type EmbedTheme } from "@/components/embed/useEmbedTheme";
+import BrandingBadge from "@/components/embed/BrandingBadge";
 
 export const Route = createFileRoute("/embed/live")({
   component: EmbedLive,
@@ -57,36 +58,7 @@ function EmbedLive() {
       <span style={{ fontSize: 34 * size, lineHeight: 1, fontWeight: 750, color: t.text, letterSpacing: "-0.04em" }}>
         {count}
       </span>
-      {showBranding && (
-        <a
-          href="https://livedot.dev"
-          target="_blank"
-          rel="noreferrer"
-          aria-label="Open Livedot"
-          style={{
-            display: "inline-flex",
-            alignItems: "center",
-            gap: 8 * size,
-            padding: `0 ${10 * size}px`,
-            height: 28 * size,
-            borderRadius: 999,
-            background: t.brandingBg,
-            border: `1px solid ${t.brandingBorder}`,
-            flexShrink: 0,
-            textDecoration: "none",
-          }}
-        >
-          <img
-            src="/logo.svg"
-            alt=""
-            aria-hidden="true"
-            style={{ width: 18 * size, height: 18 * size, borderRadius: 6 * size, display: "block" }}
-          />
-          <span style={{ fontSize: 11 * size, fontWeight: 600, color: t.brandingText, whiteSpace: "nowrap" }}>
-            Powered by Livedot
-          </span>
-        </a>
-      )}
+      {showBranding && <BrandingBadge theme={t} variant="inline" size={size} />}
     </div>
   );
 }