Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | 18x 1x 1x 1x 1x | import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription,
} from "../ui/card";
import { Input } from "../ui/input";
import { Phone } from "lucide-react";
interface ContactDetailsCardProps {
whatsapp: string;
setWhatsapp: (value: string) => void;
phoneAlternate: string;
setPhoneAlternate: (value: string) => void;
email: string;
setEmail: (value: string) => void;
businessAddress: string;
setBusinessAddress: (value: string) => void;
}
export function ContactDetailsCard({
whatsapp,
setWhatsapp,
phoneAlternate,
setPhoneAlternate,
email,
setEmail,
businessAddress,
setBusinessAddress,
}: ContactDetailsCardProps) {
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Phone className="h-5 w-5" />
Contact Details
</CardTitle>
<CardDescription>How customers can reach you</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="space-y-2">
<label
htmlFor="whatsapp-number"
className="text-sm font-medium text-foreground-default"
>
WhatsApp Number
</label>
<Input
id="whatsapp-number"
value={whatsapp}
onChange={(e) => setWhatsapp(e.target.value)}
placeholder="10-digit mobile number"
type="tel"
/>
</div>
<div className="space-y-2">
<label
htmlFor="phone-alternate"
className="text-sm font-medium text-foreground-default"
>
Alternate Phone
</label>
<Input
id="phone-alternate"
value={phoneAlternate}
onChange={(e) => setPhoneAlternate(e.target.value)}
placeholder="Alternate contact number"
type="tel"
/>
</div>
</div>
<div className="space-y-2">
<label
htmlFor="email"
className="text-sm font-medium text-foreground-default"
>
Email
</label>
<Input
id="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="business@example.com"
type="email"
/>
</div>
<div className="space-y-2">
<label
htmlFor="business-address"
className="text-sm font-medium text-foreground-default"
>
Business Address
</label>
<textarea
id="business-address"
value={businessAddress}
onChange={(e) => setBusinessAddress(e.target.value)}
placeholder="Enter your business address"
className="flex min-h-[80px] w-full rounded-md border border-border-default bg-background-elevated px-3 py-2 text-sm text-foreground-default placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
rows={3}
/>
</div>
</CardContent>
</Card>
);
}
|