110 lines
3.4 KiB
TypeScript
110 lines
3.4 KiB
TypeScript
import { businessConfig } from "@/lib/seo-config"
|
|
import { Phone, Mail, Globe } from "lucide-react"
|
|
|
|
interface NAPDataProps {
|
|
variant?: "inline" | "vertical" | "compact"
|
|
showIcons?: boolean
|
|
className?: string
|
|
}
|
|
|
|
/**
|
|
* NAP (Name, Address, Phone) Data Component
|
|
* Displays consistent business contact information with microdata markup
|
|
* Service-only business (no physical address)
|
|
*/
|
|
export function NAPData({
|
|
variant = "vertical",
|
|
showIcons = true,
|
|
className = "",
|
|
}: NAPDataProps) {
|
|
const baseClasses =
|
|
variant === "inline"
|
|
? "flex flex-wrap items-center gap-4"
|
|
: "flex flex-col gap-2"
|
|
|
|
return (
|
|
<div
|
|
className={`${baseClasses} ${className}`}
|
|
itemScope
|
|
itemType="https://schema.org/LocalBusiness"
|
|
>
|
|
<meta itemProp="name" content={businessConfig.name} />
|
|
<meta itemProp="legalName" content={businessConfig.legalName} />
|
|
<meta itemProp="url" content={businessConfig.website} />
|
|
<meta itemProp="telephone" content={businessConfig.phoneFormatted} />
|
|
<meta itemProp="email" content={businessConfig.email} />
|
|
<meta itemProp="description" content={businessConfig.description} />
|
|
|
|
{/* Phone */}
|
|
<div itemProp="telephone" className="flex items-center gap-2">
|
|
{showIcons && <Phone className="h-4 w-4 flex-shrink-0" />}
|
|
<a
|
|
href={businessConfig.phoneUrl}
|
|
className="hover:text-foreground transition-colors"
|
|
aria-label={`Call ${businessConfig.name} at ${businessConfig.phone}`}
|
|
>
|
|
{businessConfig.phone}
|
|
</a>
|
|
</div>
|
|
|
|
{/* Email */}
|
|
<div itemProp="email" className="flex items-center gap-2">
|
|
{showIcons && <Mail className="h-4 w-4 flex-shrink-0" />}
|
|
<a
|
|
href={`mailto:${businessConfig.email}`}
|
|
className="hover:text-foreground transition-colors"
|
|
aria-label={`Email ${businessConfig.name} at ${businessConfig.email}`}
|
|
>
|
|
{businessConfig.email}
|
|
</a>
|
|
</div>
|
|
|
|
{/* Website */}
|
|
<div itemProp="url" className="flex items-center gap-2">
|
|
{showIcons && <Globe className="h-4 w-4 flex-shrink-0" />}
|
|
<a
|
|
href={businessConfig.website}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="hover:text-foreground transition-colors"
|
|
aria-label={`Visit ${businessConfig.name} website`}
|
|
>
|
|
{businessConfig.website.replace(/^https?:\/\//, "")}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Compact NAP display for headers/footers
|
|
*/
|
|
export function NAPDataCompact({ className = "" }: { className?: string }) {
|
|
return (
|
|
<div
|
|
className={`flex flex-wrap items-center gap-4 text-sm ${className}`}
|
|
itemScope
|
|
itemType="https://schema.org/LocalBusiness"
|
|
>
|
|
<meta itemProp="name" content={businessConfig.name} />
|
|
<meta itemProp="telephone" content={businessConfig.phoneFormatted} />
|
|
<meta itemProp="email" content={businessConfig.email} />
|
|
|
|
<a
|
|
href={businessConfig.phoneUrl}
|
|
itemProp="telephone"
|
|
className="hover:text-foreground transition-colors"
|
|
>
|
|
{businessConfig.phone}
|
|
</a>
|
|
<span className="text-muted-foreground">•</span>
|
|
<a
|
|
href={`mailto:${businessConfig.email}`}
|
|
itemProp="email"
|
|
className="hover:text-foreground transition-colors"
|
|
>
|
|
{businessConfig.email}
|
|
</a>
|
|
</div>
|
|
)
|
|
}
|