\n \n We need your location\n \n \n Allow location access to find nearby venues and create\n check-ins.\n

\n\n {locationError && (\n \n {locationError}\n \n )}\n\n \n {loadingLocation\n ? (\n <>\n \n Getting location...\n \n )\n : \"Allow Location Access\"}\n \n \n )}\n\n {/* Step 2: Venue Selection */}\n {step === \"venue\" && (\n \n {/* Segmented Control */}\n \n {\n setVenueTab(\"nearby\");\n if (userLocation && venues.length === 0) {\n loadNearbyVenues(userLocation.lat, userLocation.lng);\n }\n }}\n style={{\n flex: 1,\n padding: \"8px 16px\",\n border: \"none\",\n borderRadius: \"8px\",\n background: venueTab === \"nearby\" ? \"white\" : \"transparent\",\n color: venueTab === \"nearby\" ? \"#007aff\" : \"#8e8e93\",\n fontSize: \"15px\",\n fontWeight: venueTab === \"nearby\" ? \"600\" : \"500\",\n cursor: \"pointer\",\n transition: \"all 0.2s ease\",\n }}\n >\n Nearby\n \n setVenueTab(\"search\")}\n style={{\n flex: 1,\n padding: \"8px 16px\",\n border: \"none\",\n borderRadius: \"8px\",\n background: venueTab === \"search\" ? \"white\" : \"transparent\",\n color: venueTab === \"search\" ? \"#007aff\" : \"#8e8e93\",\n fontSize: \"15px\",\n fontWeight: venueTab === \"search\" ? \"600\" : \"500\",\n cursor: \"pointer\",\n transition: \"all 0.2s ease\",\n }}\n >\n Search\n \n \n\n {/* Search Input (only for search tab) */}\n {venueTab === \"search\" && (\n

\n \n \n \n \n \n \n setSearchQuery(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n searchVenuesByName();\n }\n }}\n style={{\n flex: 1,\n border: \"none\",\n background: \"transparent\",\n outline: \"none\",\n fontSize: \"15px\",\n color: \"#1c1c1e\",\n }}\n />\n

\n \n Search\n \n \n )}\n\n {/* Loading State */}\n {loadingVenues && (\n \n \n \n {venueTab === \"nearby\"\n ? \"Finding nearby venues...\"\n : \"Searching...\"}\n \n \n )}\n\n {/* Error State */}\n {venuesError && !loadingVenues && (\n \n {venuesError}\n \n )}\n\n {/* Venues List */}\n {!loadingVenues && venues.length > 0 && (\n \n {venues.map((venue) => (\n {\n setSelectedVenue(venue);\n setStep(\"compose\");\n }}\n style={{\n background: \"white\",\n border: \"1px solid #e5e5ea\",\n borderRadius: \"12px\",\n padding: \"12px\",\n cursor: \"pointer\",\n textAlign: \"left\",\n transition: \"all 0.2s ease\",\n }}\n onMouseEnter={(e) => {\n e.currentTarget.style.background = \"#f8f9fa\";\n e.currentTarget.style.borderColor = \"#007aff\";\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.background = \"white\";\n e.currentTarget.style.borderColor = \"#e5e5ea\";\n }}\n >\n \n \n {venue.icon || \"📍\"}\n \n

\n \n {venue.name}\n

\n {venue.address?.locality && (\n \n {venue.address.locality}\n \n )}\n \n \n \n \n \n \n ))}\n \n )}\n \n )}\n\n {/* Step 3: Compose Check-in */}\n {step === \"compose\" && selectedVenue && (\n \n {/* Selected Venue Preview */}\n \n \n \n {selectedVenue.icon || \"📍\"}\n \n

\n \n {selectedVenue.name}\n

\n {selectedVenue.address && (\n \n {[\n selectedVenue.address.street,\n selectedVenue.address.locality,\n ].filter(Boolean).join(\", \")}\n \n )}\n \n {\n setSelectedVenue(null);\n setStep(\"venue\");\n }}\n style={{\n background: \"none\",\n border: \"none\",\n color: \"#007aff\",\n fontSize: \"14px\",\n fontWeight: \"500\",\n cursor: \"pointer\",\n }}\n >\n Change\n \n \n \n\n {/* Message Input */}\n

\n \n What's happening? (optional)\n \n setCheckinMessage(e.target.value)}\n placeholder=\"Share your thoughts...\"\n maxLength={280}\n style={{\n width: \"100%\",\n minHeight: \"120px\",\n padding: \"12px\",\n border: \"1px solid #e5e5ea\",\n borderRadius: \"10px\",\n fontSize: \"15px\",\n color: \"#1c1c1e\",\n fontFamily: \"inherit\",\n resize: \"vertical\",\n outline: \"none\",\n }}\n onFocus={(e) => {\n e.currentTarget.style.borderColor = \"#007aff\";\n }}\n onBlur={(e) => {\n e.currentTarget.style.borderColor = \"#e5e5ea\";\n }}\n />\n \n {checkinMessage.length}/280\n

\n \n\n {/* Image Attachment */}\n

\n \n Add a photo (optional)\n \n\n {!selectedImage && (\n

\n \n \n 📷\n {processingImage ? \"Processing...\" : \"Choose Photo\"}\n \n \n Max 30MB • JPEG, PNG, WebP, or GIF\n

\n )}\n\n {selectedImage && imagePreview && (\n \n

\n \n \n ×\n \n

\n setImageAlt(e.target.value)}\n placeholder=\"Describe this image (for accessibility)\"\n maxLength={200}\n style={{\n width: \"100%\",\n padding: \"8px 12px\",\n border: \"1px solid #e5e5ea\",\n borderRadius: \"8px\",\n fontSize: \"14px\",\n color: \"#1c1c1e\",\n fontFamily: \"inherit\",\n outline: \"none\",\n }}\n onFocus={(e) => {\n e.currentTarget.style.borderColor = \"#007aff\";\n }}\n onBlur={(e) => {\n e.currentTarget.style.borderColor = \"#e5e5ea\";\n }}\n />\n \n {imageAlt.length}/200\n

\n \n \n )}\n \n \n )}\n \n\n {/* Footer */}\n {step === \"compose\" && (\n \n {\n setSelectedVenue(null);\n setStep(\"venue\");\n }}\n style={{\n flex: 1,\n background: \"#f2f2f7\",\n color: \"#1c1c1e\",\n border: \"none\",\n borderRadius: \"10px\",\n padding: \"12px\",\n fontSize: \"16px\",\n fontWeight: \"600\",\n cursor: \"pointer\",\n }}\n >\n Back\n \n \n {submitting\n ? (\n <>\n \n Posting...\n \n )\n : \"Post Check-in\"}\n \n \n )}\n \n \n );\n}\n","deleted","label",[171,172,152],"frontend","components","permalink","https://www.val.town/x/tijs/location-feed-generator/code/frontend/components/CheckinComposer.tsx","extension","actionData","errors"]