GRV-Summit-Site/components/home/LastYearWinnerMark.tsx
Kirubel-Kibru-Yaltopia d261148b35
Some checks are pending
Deploy to Cloudflare Workers (OpenNext) / deploy (push) Waiting to run
Enhance footer and hero with brand backgrounds
2026-05-21 20:35:59 +03:00

62 lines
1.6 KiB
TypeScript

"use client";
import { useState } from "react";
import Image from "next/image";
import type { LastYearWinner } from "@/content/last-year-winners";
import { cn } from "@/lib/utils";
const GRV_LOGO = "/branding/logo-icon.png";
type Props = {
company: LastYearWinner;
className?: string;
};
export function LastYearWinnerMark({ company, className }: Props) {
const [failed, setFailed] = useState(false);
const src = company.logoSrc ?? GRV_LOGO;
const showImage = !failed && src;
const logoOnly = !company.name;
return (
<div
className={cn(
"flex h-10 shrink-0 items-center gap-2 rounded-lg border border-white/25 bg-white/90 px-2.5 shadow-sm",
logoOnly && "px-2",
className
)}
title={company.name}
>
<div className="relative flex size-7 shrink-0 items-center justify-center overflow-hidden rounded-md bg-white">
{showImage ? (
<Image
src={src}
alt=""
width={28}
height={28}
className="size-7 object-contain p-0.5"
onError={() => setFailed(true)}
/>
) : company.initials ? (
<span className="text-[10px] font-bold leading-none text-[#1a5c38]">
{company.initials}
</span>
) : (
<Image
src={GRV_LOGO}
alt=""
width={28}
height={28}
className="size-7 object-contain p-0.5"
/>
)}
</div>
{company.name ? (
<span className="max-w-[7.5rem] truncate text-[11px] font-medium text-[#1a5c38]">
{company.name}
</span>
) : null}
</div>
);
}