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 | 118x 4x 4x 3x 3x | import { Card, CardContent, CardHeader, CardTitle } from "../../ui/card";
import { Input } from "../../ui/input";
import type { ProFormSectionProps } from "./types";
/**
* BasicInformationSection component displays the core pro information fields.
* Includes business name, status, WhatsApp, description, and services.
*/
export function BasicInformationSection({
pro,
onUpdateField,
}: ProFormSectionProps) {
return (
<Card>
<CardHeader>
<CardTitle className="text-lg">Basic Information</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label
htmlFor="pro-business-name"
className="block text-sm font-medium text-foreground-default mb-1"
>
Business Name
</label>
<Input
id="pro-business-name"
value={pro.businessName}
onChange={(e) => onUpdateField("businessName", e.target.value)}
/>
</div>
<div>
<label
htmlFor="pro-status"
className="block text-sm font-medium text-foreground-default mb-1"
>
Status
</label>
<select
id="pro-status"
value={pro.status}
onChange={(e) =>
onUpdateField(
"status",
e.target.value as "draft" | "published" | "archived",
)
}
className="h-10 w-full rounded-md border border-border-default bg-background-elevated px-3 text-sm text-foreground-default focus:outline-none focus:ring-2 focus:ring-primary-500/40 focus:border-primary-500"
>
<option value="draft">Draft</option>
<option value="published">Published</option>
<option value="archived">Archived</option>
</select>
</div>
<div>
<label
htmlFor="pro-whatsapp"
className="block text-sm font-medium text-foreground-default mb-1"
>
WhatsApp
</label>
<Input
id="pro-whatsapp"
value={pro.whatsapp || ""}
onChange={(e) => onUpdateField("whatsapp", e.target.value)}
placeholder="91XXXXXXXXXX"
/>
</div>
</div>
<div>
<label
htmlFor="pro-description"
className="block text-sm font-medium text-foreground-default mb-1"
>
Description
</label>
<textarea
id="pro-description"
value={pro.description || ""}
onChange={(e) => onUpdateField("description", e.target.value)}
rows={4}
className="w-full rounded-md border border-border-default bg-background-elevated px-3 py-2 text-sm text-foreground-default focus:outline-none focus:ring-2 focus:ring-primary-500/40 focus:border-primary-500"
/>
</div>
</CardContent>
</Card>
);
}
|