www/src/components/branding.tsx

import Link from "next/link";
import Image from "next/image";
import { cva } from "class-variance-authority";
import { cn } from "@/lib/utils";

const brandingVariants = cva(
    "relative group-hover:opacity-75 hover:opacity-75 select-none transition-all transform-gpu",
    {
        variants: {
            size: {
                xs: "w-10 h-10",
                sm: "w-16 h-16",
                default: "w-24 h-24",
                lg: "w-32 h-32",
            },
        },
        defaultVariants: {
            size: "default",
        },
    }
);

/**
 * The props for this component.
 */
type BrandingProps = {
    /**
     * The href to go to when clicked.
     */
    href?: string;

    /**
     * The size of the branding.
     */
    size?: "xs" | "sm" | "default" | "lg";

    /**
     * The optional class name to apply to the branding.
     */
    className?: string;
};

const Branding = ({ href, size, className }: BrandingProps) => (
    <Link
        className={cn(brandingVariants({ size, className }))}
        href={href ?? "/"}
    >
        <Image src="/media/logo.png" alt="PulseApp Logo" fill priority />
    </Link>
);
export default Branding;