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 | 15x 1x 1x 1x | import {
Card,
CardContent,
CardHeader,
CardTitle,
CardDescription,
} from "../ui/card";
import { Input } from "../ui/input";
import { Building2 } from "lucide-react";
interface BusinessInfoSectionProps {
businessName: string;
setBusinessName: (value: string) => void;
tagline: string;
setTagline: (value: string) => void;
description: string;
setDescription: (value: string) => void;
}
export function BusinessInfoSection({
businessName,
setBusinessName,
tagline,
setTagline,
description,
setDescription,
}: BusinessInfoSectionProps) {
return (
<Card>
<CardHeader>
<CardTitle className="flex items-center gap-2">
<Building2 className="h-5 w-5" />
Business Information
</CardTitle>
<CardDescription>Basic details about your business</CardDescription>
</CardHeader>
<CardContent className="space-y-4">
<div className="space-y-2">
<label
htmlFor="business-name"
className="text-sm font-medium text-foreground-default"
>
Business Name *
</label>
<Input
id="business-name"
value={businessName}
onChange={(e) => setBusinessName(e.target.value)}
placeholder="Your business name"
required
/>
</div>
<div className="space-y-2">
<label
htmlFor="business-tagline"
className="text-sm font-medium text-foreground-default"
>
Tagline
</label>
<Input
id="business-tagline"
value={tagline}
onChange={(e) => setTagline(e.target.value.slice(0, 120))}
placeholder="A catchy one-liner for your business"
maxLength={120}
/>
<p className="text-xs text-foreground-subtle">
{tagline.length}/120 characters
</p>
</div>
<div className="space-y-2">
<label
htmlFor="business-description"
className="text-sm font-medium text-foreground-default"
>
Business Description
</label>
<textarea
id="business-description"
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Tell customers about your business, experience, and specialties..."
className="flex min-h-[120px] 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={4}
/>
</div>
</CardContent>
</Card>
);
}
|