107 lines
3.2 KiB
TypeScript
107 lines
3.2 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import { useSettingsStore } from "../lib/store/settingsStore";
|
|
|
|
interface BrandLogoProps {
|
|
className?: string;
|
|
isDarkBackground?: boolean;
|
|
href?: string;
|
|
size?: "sm" | "md" | "lg";
|
|
}
|
|
|
|
export default function BrandLogo({
|
|
className = "",
|
|
isDarkBackground = false,
|
|
href = "/",
|
|
size = "md",
|
|
}: BrandLogoProps) {
|
|
const getText = useSettingsStore((state) => state.getText);
|
|
|
|
const logoUrl = getText("site_logo", "");
|
|
const textEn = getText("site_logo_text_en", "Canina");
|
|
const textFa = getText("site_logo_text_fa", "ایران");
|
|
const subtitle = getText(
|
|
"site_logo_subtitle",
|
|
"نماینده رسمی CANINA PHARMA GMBH GERMANY"
|
|
);
|
|
|
|
const iconSizes = {
|
|
sm: "w-8 h-8 text-base rounded-xl",
|
|
md: "w-10 h-10 sm:w-12 sm:h-12 text-xl sm:text-2xl rounded-2xl",
|
|
lg: "w-14 h-14 sm:w-16 sm:h-16 text-2xl sm:text-3xl rounded-3xl",
|
|
};
|
|
|
|
const titleSizes = {
|
|
sm: "text-sm sm:text-base",
|
|
md: "text-base sm:text-2xl",
|
|
lg: "text-xl sm:text-3xl",
|
|
};
|
|
|
|
const isBlobOrData = typeof logoUrl === 'string' && (logoUrl.startsWith('blob:') || logoUrl.startsWith('data:'));
|
|
|
|
const content = (
|
|
<div className={`flex items-center gap-2.5 sm:gap-3 group shrink-0 ${className}`}>
|
|
{logoUrl ? (
|
|
<Image
|
|
src={logoUrl}
|
|
alt={`${textEn} ${textFa}`}
|
|
width={140}
|
|
height={50}
|
|
priority
|
|
unoptimized={isBlobOrData}
|
|
className="h-10 sm:h-12 w-auto max-w-[160px] sm:max-w-[200px] object-contain shrink-0"
|
|
/>
|
|
) : (
|
|
<>
|
|
<div
|
|
className={`${iconSizes[size]} bg-canina-blue flex items-center justify-center text-white font-black group-hover:bg-medical-gray-900 transition-all shadow-md italic shrink-0`}
|
|
>
|
|
{textEn.charAt(0).toUpperCase() || "C"}
|
|
</div>
|
|
<div className="flex flex-col justify-center">
|
|
<span
|
|
className={`${titleSizes[size]} font-black italic font-sans flex items-center gap-1 leading-none pl-1 whitespace-nowrap ${
|
|
isDarkBackground ? "text-white" : "text-canina-blue"
|
|
}`}
|
|
>
|
|
{textEn}
|
|
{textFa && (
|
|
<span
|
|
className={`text-[11px] sm:text-sm not-italic font-bold border-r pr-1.5 mr-0.5 font-vazir ${
|
|
isDarkBackground
|
|
? "text-medical-gray-200 border-white/20"
|
|
: "text-medical-gray-700 border-medical-gray-300"
|
|
}`}
|
|
>
|
|
{textFa}
|
|
</span>
|
|
)}
|
|
</span>
|
|
{subtitle && (
|
|
<span
|
|
className={`hidden sm:block text-[8px] sm:text-[9px] font-bold uppercase tracking-wider leading-tight mt-1 whitespace-nowrap ${
|
|
isDarkBackground ? "text-medical-gray-400" : "text-medical-gray-400"
|
|
}`}
|
|
>
|
|
{subtitle}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<Link href={href} className="inline-block">
|
|
{content}
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
return content;
|
|
}
|