\n {[1, 2, 3, 4, 5].map((star) => (\n setFormData(prev => ({ \n ...prev, \n rating: star === currentRating ? '' : star.toString() \n }))}\n className={`text-2xl transition-colors ${\n star <= currentRating \n ? 'text-yellow-400 hover:text-yellow-500' \n : 'text-gray-300 hover:text-yellow-300'\n }`}\n >\n ★\n \n ))}\n {currentRating > 0 && (\n setFormData(prev => ({ ...prev, rating: '' }))}\n className=\"ml-2 text-sm text-gray-500 hover:text-gray-700\"\n >\n Clear\n \n )}\n

\n );\n };\n\n return (\n

\n {book ? 'Edit Book' : 'Add New Book'}\n

\n \n ×\n \n

\n\n

\n {/* Title and Author */}\n

\n \n Title *\n \n \n {errors.title &&

{errors.title}

}\n

\n\n

\n \n Author *\n \n \n {errors.author &&

{errors.author}

}\n

\n\n {/* Genre and Status */}\n

\n \n Genre\n \n \n \n {genres.map((g) => (\n \n

\n\n

\n \n Reading Status\n \n \n \n \n \n \n

\n\n {/* ISBN and Pages */}\n

\n \n ISBN\n \n \n

\n\n

\n \n Pages\n \n \n {errors.pages &&

{errors.pages}

}\n

\n\n

\n \n Published Year\n \n \n {errors.publishedYear &&

{errors.publishedYear}

}\n

\n\n {/* Rating */}\n

\n \n Rating\n \n {renderStarRating()}\n {errors.rating &&

{errors.rating}

}\n

\n\n {/* Dates */}\n

\n \n Date Added\n \n \n

\n\n {formData.status === 'read' && (\n

\n \n Date Finished\n \n \n

\n )}\n

\n\n {/* Description */}\n

\n \n Description\n \n \n

\n\n {/* Notes */}\n

\n \n Personal Notes\n \n \n

\n\n {/* Form Actions */}\n

\n \n Cancel\n \n \n {book ? 'Update Book' : 'Add Book'}\n \n

\n );\n}","deleted","label",[170,171,153],"frontend","components","permalink","https://www.val.town/x/lilac/simanon/code/frontend/components/BookForm.tsx","extension","actionData","errors"]