asownerytandClaude Opus 5.5
30dc6f2c7b
- Ran `npx shadcn@latest migrate cn`: swaps clsx + tailwind-merge for cn - Import cn from "cn" everywhere (matches what `shadcn add` now writes) and remove the src/lib/utils.js re-export shim Co-Authored-By: Claude Opus 5.5 <[email protected]>
57 lines
1.8 KiB
JavaScript
57 lines
1.8 KiB
JavaScript
import Link from "next/link";
|
|
import { MessageCircle, MessageSquare, Phone } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "cn";
|
|
import { business, links } from "@/lib/site";
|
|
|
|
// Call / Text (and optionally WhatsApp and Get a quote) buttons.
|
|
// Use onDark over photos or the blue band, where the default styles lack contrast.
|
|
export default function ContactButtons({
|
|
onDark = false,
|
|
textLabel = "Text me",
|
|
whatsapp = false,
|
|
quoteHref,
|
|
className,
|
|
}) {
|
|
// Larger than shadcn's lg size: these are the main tap targets on phones.
|
|
const base = "h-11 px-6 text-base";
|
|
const secondary = onDark
|
|
? "border-white bg-transparent text-white hover:bg-white/10 hover:text-white"
|
|
: "border-primary text-primary hover:text-primary";
|
|
|
|
return (
|
|
<div className={cn("flex flex-col gap-3 sm:flex-row sm:flex-wrap", className)}>
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
variant={onDark ? "secondary" : "default"}
|
|
className={base}
|
|
>
|
|
<a href={links.tel}>
|
|
<Phone aria-hidden="true" />
|
|
Call {business.phone}
|
|
</a>
|
|
</Button>
|
|
<Button asChild size="lg" variant="outline" className={cn(base, secondary)}>
|
|
<a href={links.sms}>
|
|
<MessageSquare aria-hidden="true" />
|
|
{textLabel}
|
|
</a>
|
|
</Button>
|
|
{whatsapp && (
|
|
<Button asChild size="lg" variant="outline" className={cn(base, secondary)}>
|
|
<a href={links.whatsapp}>
|
|
<MessageCircle aria-hidden="true" />
|
|
WhatsApp
|
|
</a>
|
|
</Button>
|
|
)}
|
|
{quoteHref && (
|
|
<Button asChild size="lg" variant="outline" className={cn(base, secondary)}>
|
|
<Link href={quoteHref}>Get a quote</Link>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|