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

Available Properties

\n \n {/* Filters */}\n

\n Search\n setSearchTerm(e.target.value)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n />\n

\n \n

\n Price Range\n setPriceRange(e.target.value as any)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n \n

\n \n

\n Property Type\n setPropertyType(e.target.value as any)}\n className=\"w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500\"\n >\n \n \n \n \n \n \n

\n\n {filteredProperties.length === 0 ? (\n

\n 🏠\n

No properties found

\n {properties.length === 0 \n ? \"Be the first to list a property!\" \n : \"Try adjusting your search filters.\"}\n

\n ) : (\n

\n {filteredProperties.map((property) => (\n \n ))}\n

\n )}\n

\n );\n}\n\nfunction PropertyCard({ property }: { property: Property }) {\n const formatPrice = (price: number) => {\n return new Intl.NumberFormat('en-US', {\n style: 'currency',\n currency: 'USD',\n minimumFractionDigits: 0,\n }).format(price);\n };\n\n const getPropertyTypeIcon = (type: string) => {\n switch (type) {\n case 'house': return '🏠';\n case 'apartment': return '🏢';\n case 'condo': return '🏘️';\n case 'townhouse': return '🏘️';\n default: return '🏠';\n }\n };\n\n return (\n

\n {property.imageUrl && (\n \n )}\n \n

{property.title}

\n {getPropertyTypeIcon(property.propertyType)}\n

\n \n

{property.description}

\n \n

\n 📍\n {property.location}\n

\n \n

\n {formatPrice(property.price)}/month\n

\n \n

\n 🛏️\n {property.bedrooms} bed{property.bedrooms !== 1 ? 's' : ''}\n

\n 🚿\n {property.bathrooms} bath{property.bathrooms !== 1 ? 's' : ''}\n

\n 📐\n {property.area.toLocaleString()} sq ft\n

\n \n

{property.ownerName}

{property.ownerEmail}

{property.ownerPhone}

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