61 lines
1.8 KiB
TypeScript

"use client";
import React from "react";
import Image from "next/image";
interface LogoProps {
className?: string;
size?: number;
}
export function Logo({ className = "", size = 32 }: LogoProps) {
return (
<div className={className} style={{ width: size, height: size }}>
<Image
src="/assets/images/logo.svg"
alt="Assist Solutions Logo"
width={size}
height={size}
className="w-full h-full object-contain"
onError={e => {
// Fallback to SVG if image fails to load
const target = e.target as HTMLImageElement;
target.style.display = "none";
const parent = target.parentElement;
if (parent) {
parent.innerHTML = `
<svg
width="${size}"
height="${size}"
viewBox="0 0 32 32"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<!-- Top section - Light blue curved arrows -->
<path
d="M8 8 C12 4, 20 4, 24 8 L20 12 C18 10, 14 10, 12 12 Z"
fill="#60A5FA"
/>
<path
d="M24 8 C28 12, 28 20, 24 24 L20 20 C22 18, 22 14, 20 12 Z"
fill="#60A5FA"
/>
<!-- Bottom section - Dark blue curved arrows -->
<path
d="M8 24 C12 28, 20 28, 24 24 L20 20 C18 22, 14 22, 12 20 Z"
fill="#1E40AF"
/>
<path
d="M8 24 C4 20, 4 12, 8 8 L12 12 C10 14, 10 18, 12 20 Z"
fill="#1E40AF"
/>
</svg>
`;
}
}}
/>
</div>
);
}