65 lines
1.9 KiB
TypeScript
65 lines
1.9 KiB
TypeScript
|
import Link from "next/link"
|
||
|
|
import { Building2 } from "lucide-react"
|
||
|
|
import { cn } from "@/lib/utils"
|
||
|
|
|
||
|
|
type Size = "sm" | "md" | "lg"
|
||
|
|
|
||
|
|
const SIZES: Record<Size, { box: string; icon: string; title: string; sub: string; gap: string }> = {
|
||
|
|
sm: { box: "h-7 w-7", icon: "h-4 w-4", title: "text-xs", sub: "text-[9px]", gap: "gap-2" },
|
||
|
|
md: { box: "h-8 w-8", icon: "h-[18px] w-[18px]", title: "text-[13px]", sub: "text-[10px]", gap: "gap-2.5" },
|
||
|
|
lg: { box: "h-9 w-9", icon: "h-5 w-5", title: "text-[15px]", sub: "text-[11px]", gap: "gap-2.5" },
|
||
|
|
}
|
||
|
|
|
||
|
|
/** The brand mark — gradient rounded square with the building glyph. */
|
||
|
|
export function LogoMark({ size = "md", className }: { size?: Size; className?: string }) {
|
||
|
|
const s = SIZES[size]
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"flex shrink-0 items-center justify-center rounded-lg bg-gradient-to-br from-indigo-500 to-violet-600 text-white shadow-lg shadow-indigo-500/25",
|
||
|
|
s.box,
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Building2 className={s.icon} />
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Full brand lockup: mark + "Property Management" / "Network" wordmark.
|
||
|
|
* Designed for the app's dark surfaces (white title, indigo accent).
|
||
|
|
* Pass `href={null}` to render a non-link version.
|
||
|
|
*/
|
||
|
|
export function Logo({
|
||
|
|
size = "md",
|
||
|
|
className,
|
||
|
|
href = "/",
|
||
|
|
}: {
|
||
|
|
size?: Size
|
||
|
|
className?: string
|
||
|
|
href?: string | null
|
||
|
|
}) {
|
||
|
|
const s = SIZES[size]
|
||
|
|
|
||
|
|
const content = (
|
||
|
|
<>
|
||
|
|
<LogoMark size={size} />
|
||
|
|
<span className="flex flex-col leading-none">
|
||
|
|
<span className={cn("font-bold tracking-tight text-white", s.title)}>Property Management</span>
|
||
|
|
<span className={cn("font-semibold uppercase tracking-[0.18em] text-indigo-400", s.sub)}>Network</span>
|
||
|
|
</span>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
|
||
|
|
const classes = cn("flex items-center", s.gap, className)
|
||
|
|
|
||
|
|
return href ? (
|
||
|
|
<Link href={href} className={classes}>
|
||
|
|
{content}
|
||
|
|
</Link>
|
||
|
|
) : (
|
||
|
|
<div className={classes}>{content}</div>
|
||
|
|
)
|
||
|
|
}
|