1a710aa3c6
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
107 lines
2.6 KiB
TypeScript
107 lines
2.6 KiB
TypeScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const siteName = "Great Rift Valley Innovation Summit";
|
|
|
|
type BrandLogoProps = {
|
|
className?: string;
|
|
href?: string;
|
|
/** Header/footer wordmark, or icon-only */
|
|
variant?: "default" | "footer" | "icon";
|
|
/** Tighter sizing for the floating navbar */
|
|
compact?: boolean;
|
|
};
|
|
|
|
export function BrandLogo({
|
|
className,
|
|
href = "/",
|
|
variant = "default",
|
|
compact = false,
|
|
}: BrandLogoProps) {
|
|
const isFooter = variant === "footer";
|
|
|
|
const markSize = compact ? "size-8" : "size-9 md:size-10";
|
|
const markPad = isFooter ? "rounded-md bg-white p-1 shadow-sm" : "rounded-md";
|
|
|
|
const mark = (
|
|
<span className={cn("inline-flex shrink-0 items-center justify-center", markPad)}>
|
|
<Image
|
|
src="/branding/logo-icon.png"
|
|
alt=""
|
|
width={40}
|
|
height={40}
|
|
className={cn("object-contain", variant === "icon" ? "size-8" : markSize)}
|
|
priority={variant === "default"}
|
|
/>
|
|
</span>
|
|
);
|
|
|
|
if (variant === "icon") {
|
|
return (
|
|
<span className={cn("inline-flex", className)} aria-hidden>
|
|
{mark}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
const primaryClass = isFooter
|
|
? "text-white"
|
|
: "text-[#1a5c38]";
|
|
const secondaryClass = isFooter
|
|
? "text-white/85"
|
|
: "text-[#0d3d26]/90";
|
|
|
|
const primarySize = compact
|
|
? "text-[11px] sm:text-xs md:text-[13px]"
|
|
: isFooter
|
|
? "text-sm md:text-base"
|
|
: "text-xs sm:text-sm md:text-base";
|
|
const secondarySize = compact
|
|
? "text-[8px] sm:text-[9px]"
|
|
: "text-[9px] sm:text-[10px]";
|
|
|
|
const content = (
|
|
<span className={cn("inline-flex min-w-0 items-center gap-2.5", className)}>
|
|
{mark}
|
|
<span
|
|
className={cn(
|
|
"flex min-w-0 flex-col items-start justify-center leading-none",
|
|
compact ? "gap-0" : "gap-0.5"
|
|
)}
|
|
>
|
|
<span
|
|
className={cn(
|
|
"font-bold uppercase tracking-tight whitespace-nowrap",
|
|
primaryClass,
|
|
primarySize
|
|
)}
|
|
>
|
|
Great Rift Valley
|
|
</span>
|
|
<span
|
|
className={cn(
|
|
"font-normal whitespace-nowrap",
|
|
secondaryClass,
|
|
secondarySize
|
|
)}
|
|
>
|
|
Innovation Summit
|
|
</span>
|
|
</span>
|
|
</span>
|
|
);
|
|
|
|
if (!href) return content;
|
|
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className="shrink-0 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1a5c38] focus-visible:ring-offset-2"
|
|
aria-label={siteName}
|
|
>
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|