Separate YouTube video titles from on-video song/artist fields with Pro gating, serve curated fonts and watermark assets for 1:1 preview parity, and include billing/API/docs/deploy stack for self-hosted release.
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import Link from "next/link";
|
|
import { BRAND_NAME } from "@/lib/branding";
|
|
|
|
type Props = {
|
|
href?: string;
|
|
size?: "sm" | "md";
|
|
/** Small Beta mark at top-right of the wordmark (public marketing surfaces). */
|
|
beta?: boolean;
|
|
};
|
|
|
|
export function Logo({ href = "/", size = "md", beta = false }: Props) {
|
|
const textSize = size === "sm" ? "text-xl" : "text-2xl";
|
|
const betaSize = size === "sm" ? "text-[0.5rem]" : "text-[0.55rem]";
|
|
|
|
const content = (
|
|
<span className={`relative inline-flex items-baseline font-bold tracking-tight ${textSize}`}>
|
|
<span className="text-white">Songs</span>
|
|
<span className="text-red-400">2VID</span>
|
|
{beta ? (
|
|
<span
|
|
className={`pointer-events-none absolute left-full top-0 ml-0.5 -translate-y-1/2 ${betaSize} font-bold uppercase tracking-wider text-red-400`}
|
|
aria-hidden="true"
|
|
>
|
|
Beta
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
);
|
|
|
|
const label = beta ? `${BRAND_NAME} Beta` : BRAND_NAME;
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} className="inline-flex items-center" aria-label={label}>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<span className="inline-flex items-center" aria-label={label}>
|
|
{content}
|
|
</span>
|
|
);
|
|
}
|