\n {/* Header */}\n

\n {step === \"location\" && \"Get Location\"}\n {step === \"venue\" && \"Choose Venue\"}\n {step === \"compose\" && \"Create Check-in\"}\n

\n\n \n \n \n \n \n \n

\n\n {/* Body */}\n

\n {/* Step 1: Location */}\n {step === \"location\" && (\n

\n \n \n \n \n

\n\n

We need your location

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

\n\n {locationError && (\n

{locationError}

\n )}\n\n \n {loadingLocation\n ? (\n <>\n

\n Getting location...\n \n )\n : (\n \"Allow Location Access\"\n )}\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 className={segmentButtonStyle(venueTab === \"nearby\")}\n >\n Nearby\n \n setVenueTab(\"search\")}\n className={segmentButtonStyle(venueTab === \"search\")}\n >\n Search\n \n

\n\n {/* Search Input */}\n {venueTab === \"search\" && (\n

\n \n \n \n \n setSearchQuery(e.target.value)}\n onKeyDown={(e) => {\n if (e.key === \"Enter\") {\n searchVenuesByName();\n }\n }}\n className={searchInputStyle}\n />\n

\n \n Search\n \n

\n )}\n\n {/* Loading State */}\n {loadingVenues && (\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 className={venueButtonStyle}\n >\n

\n {venue.icon || \"📍\"}\n

{venue.name}

\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 {selectedVenue.icon || \"📍\"}\n

\n {selectedVenue.name}\n

\n {selectedVenue.address && (\n

\n {[\n selectedVenue.address.street,\n selectedVenue.address.locality,\n ]\n .filter(Boolean)\n .join(\", \")}\n

\n )}\n

\n {\n setSelectedVenue(null);\n setStep(\"venue\");\n }}\n className={changeVenueButtonStyle}\n >\n Change\n \n

\n\n {/* Message Input */}\n

\n \n What's happening? (optional)\n \n \n setCheckinMessage(e.target.value)}\n placeholder=\"Share your thoughts...\"\n maxLength={280}\n className={textareaStyle}\n />\n

\n {checkinMessage.length}/280\n

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

\n Add a photo (optional)\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 className={imageAltInputStyle}\n />\n

\n {imageAlt.length}/200\n

\n )}\n

\n\n {/* Footer */}\n {step === \"compose\" && (\n

\n {\n setSelectedVenue(null);\n setStep(\"venue\");\n }}\n className={backButtonStyle}\n >\n Back\n \n \n {submitting\n ? (\n <>\n

\n Posting...\n \n )\n : (\n \"Post Check-in\"\n )}\n \n

\n )}\n

\n );\n}\n","deleted","label",[174,175,156],"frontend","components","permalink","https://www.val.town/x/tijs/anchor-appview/code/frontend/components/CheckinComposer.tsx","extension","actionData","errors"]