@@ -4,8 +4,24 @@ import { useState } from 'react'
44import { Property , PropertyType } from '@/types'
55import { Input } from '@/components/ui/Input'
66import { Button } from '@/components/ui/Button'
7+ import { Select } from '@/components/ui/Select'
78import { EntitySelector } from './EntitySelector'
89
10+ const precisionOptions = [
11+ { value : '11' , label : 'Day' } ,
12+ { value : '10' , label : 'Month' } ,
13+ { value : '9' , label : 'Year' } ,
14+ ]
15+
16+ const propertyTypeOptions = [
17+ { value : '' , label : 'Select a property type...' } ,
18+ { value : PropertyType . P569 , label : 'Birth Date (P569)' } ,
19+ { value : PropertyType . P570 , label : 'Death Date (P570)' } ,
20+ { value : PropertyType . P39 , label : 'Position Held (P39)' } ,
21+ { value : PropertyType . P19 , label : 'Place of Birth (P19)' } ,
22+ { value : PropertyType . P27 , label : 'Country of Citizenship (P27)' } ,
23+ ]
24+
925interface AddPropertyFormProps {
1026 onAddProperty : ( property : Property ) => void
1127}
@@ -205,35 +221,20 @@ export function AddPropertyForm({ onAddProperty }: AddPropertyFormProps) {
205221 </ div >
206222
207223 { /* Property Type Selector */ }
208- < div >
209- < label
210- htmlFor = "propertyType"
211- className = "block text-sm font-medium text-foreground-secondary mb-1"
212- >
213- Property Type
214- </ label >
215- < select
216- id = "propertyType"
217- value = { propertyType }
218- onChange = { ( e ) => {
219- setPropertyType ( e . target . value as PropertyType )
220- // Reset form fields when type changes
221- setDateValue ( '' )
222- setSelectedEntity ( null )
223- setStartDate ( '' )
224- setEndDate ( '' )
225- } }
226- className = "w-full px-3 py-2 border border-border-strong rounded-md focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-surface text-foreground"
227- required
228- >
229- < option value = "" > Select a property type...</ option >
230- < option value = { PropertyType . P569 } > Birth Date (P569)</ option >
231- < option value = { PropertyType . P570 } > Death Date (P570)</ option >
232- < option value = { PropertyType . P39 } > Position Held (P39)</ option >
233- < option value = { PropertyType . P19 } > Place of Birth (P19)</ option >
234- < option value = { PropertyType . P27 } > Country of Citizenship (P27)</ option >
235- </ select >
236- </ div >
224+ < Select
225+ label = "Property Type"
226+ options = { propertyTypeOptions }
227+ value = { propertyType }
228+ onChange = { ( value ) => {
229+ setPropertyType ( value as PropertyType )
230+ // Reset form fields when type changes
231+ setDateValue ( '' )
232+ setSelectedEntity ( null )
233+ setStartDate ( '' )
234+ setEndDate ( '' )
235+ } }
236+ required
237+ />
237238
238239 { /* Date input for birth/death dates */ }
239240 { ( propertyType === PropertyType . P569 || propertyType === PropertyType . P570 ) && (
@@ -253,15 +254,11 @@ export function AddPropertyForm({ onAddProperty }: AddPropertyFormProps) {
253254 className = "flex-1"
254255 required
255256 />
256- < select
257- value = { datePrecision }
258- onChange = { ( e ) => setDatePrecision ( Number ( e . target . value ) ) }
259- className = "px-3 py-2 border border-border-strong rounded-md focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-surface text-foreground"
260- >
261- < option value = { 11 } > Day</ option >
262- < option value = { 10 } > Month</ option >
263- < option value = { 9 } > Year</ option >
264- </ select >
257+ < Select
258+ options = { precisionOptions }
259+ value = { String ( datePrecision ) }
260+ onChange = { ( value ) => setDatePrecision ( Number ( value ) ) }
261+ />
265262 </ div >
266263 </ div >
267264 ) }
@@ -321,16 +318,12 @@ export function AddPropertyForm({ onAddProperty }: AddPropertyFormProps) {
321318 onChange = { ( e ) => setStartDate ( e . target . value ) }
322319 className = "flex-1"
323320 />
324- < select
325- value = { startDatePrecision }
326- onChange = { ( e ) => setStartDatePrecision ( Number ( e . target . value ) ) }
327- className = "px-3 py-2 border border-border-strong rounded-md focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-surface text-foreground"
321+ < Select
322+ options = { precisionOptions }
323+ value = { String ( startDatePrecision ) }
324+ onChange = { ( value ) => setStartDatePrecision ( Number ( value ) ) }
328325 disabled = { ! startDate }
329- >
330- < option value = { 11 } > Day</ option >
331- < option value = { 10 } > Month</ option >
332- < option value = { 9 } > Year</ option >
333- </ select >
326+ />
334327 </ div >
335328 </ div >
336329
@@ -350,16 +343,12 @@ export function AddPropertyForm({ onAddProperty }: AddPropertyFormProps) {
350343 onChange = { ( e ) => setEndDate ( e . target . value ) }
351344 className = "flex-1"
352345 />
353- < select
354- value = { endDatePrecision }
355- onChange = { ( e ) => setEndDatePrecision ( Number ( e . target . value ) ) }
356- className = "px-3 py-2 border border-border-strong rounded-md focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-surface text-foreground"
346+ < Select
347+ options = { precisionOptions }
348+ value = { String ( endDatePrecision ) }
349+ onChange = { ( value ) => setEndDatePrecision ( Number ( value ) ) }
357350 disabled = { ! endDate }
358- >
359- < option value = { 11 } > Day</ option >
360- < option value = { 10 } > Month</ option >
361- < option value = { 9 } > Year</ option >
362- </ select >
351+ />
363352 </ div >
364353 </ div >
365354 </ div >
0 commit comments