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 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 | 22x 22x 1x 42x 1x 42x 1x 5x 4x | import { Input } from "../../ui/input";
import {
validatePropertySize,
propertySizeErrorMessage,
} from "@interioring/utils/validation/property-size";
import type { City, Locality } from "../../../lib/api";
import { Select } from "../../ui/select";
interface LocationPropertySectionProps {
cities: City[];
localities: Locality[];
selectedCityId: string;
localityId: string;
propertyType: string;
propertySize: string;
projectAreaSqft: string;
onCityChange: (value: string) => void;
onLocalityChange: (value: string) => void;
onPropertyTypeChange: (value: string) => void;
onPropertySizeChange: (value: string) => void;
onProjectAreaSqftChange: (value: string) => void;
}
export function LocationPropertySection({
cities,
localities,
selectedCityId,
localityId,
propertyType,
propertySize,
projectAreaSqft,
onCityChange,
onLocalityChange,
onPropertyTypeChange,
onPropertySizeChange,
onProjectAreaSqftChange,
}: LocationPropertySectionProps) {
const propertySizeErrorCode = validatePropertySize(propertySize);
return (
<div className="space-y-4">
<h3 className="text-md font-semibold text-foreground-default border-b pb-2">
Location & Property
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label
htmlFor="city"
className="block text-sm font-medium text-foreground-default mb-1"
>
City
</label>
<Select
id="city"
value={selectedCityId}
onChange={(e) => onCityChange(e.target.value)}
>
<option value="">Select city</option>
{cities.map((city) => (
<option key={city.id} value={city.id}>
{city.name}, {city.state}
</option>
))}
</Select>
</div>
<div>
<label
htmlFor="locality"
className="block text-sm font-medium text-foreground-default mb-1"
>
Locality
</label>
<Select
id="locality"
value={localityId}
onChange={(e) => onLocalityChange(e.target.value)}
disabled={!selectedCityId}
>
<option value="">Select locality</option>
{localities.map((locality) => (
<option key={locality.id} value={locality.id}>
{locality.name}
</option>
))}
</Select>
</div>
<div>
<label
htmlFor="property-type"
className="block text-sm font-medium text-foreground-default mb-1"
>
Property Type
</label>
<Select
id="property-type"
value={propertyType}
onChange={(e) => onPropertyTypeChange(e.target.value)}
>
<option value="">Select type</option>
<option value="apartment">Apartment</option>
<option value="villa">Villa</option>
<option value="independent_house">Independent House</option>
<option value="commercial">Commercial</option>
</Select>
</div>
<div>
<label
htmlFor="property-size"
className="block text-sm font-medium text-foreground-default mb-1"
>
Property Size
</label>
<Input
id="property-size"
value={propertySize}
onChange={(e) => onPropertySizeChange(e.target.value)}
placeholder="e.g., 3 BHK or 2400 sq ft"
aria-invalid={propertySizeErrorCode ? true : undefined}
aria-describedby={
propertySizeErrorCode ? "property-size-error" : undefined
}
/>
{propertySizeErrorCode && (
<p
id="property-size-error"
role="alert"
className="mt-1 text-sm text-error"
>
{propertySizeErrorMessage(propertySizeErrorCode)}
</p>
)}
</div>
<div>
<label
htmlFor="project-area"
className="block text-sm font-medium text-foreground-default mb-1"
>
Project Area (sq ft)
</label>
<Input
id="project-area"
type="number"
value={projectAreaSqft}
onChange={(e) => onProjectAreaSqftChange(e.target.value)}
placeholder="e.g., 1200"
/>
</div>
</div>
</div>
);
}
|