highperfocused/lumina
1
0
Fork 0
mirror of https://github.com/lumina-rocks/lumina.git synced 2026-06-05 10:11:16 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add collapsible advanced options for location input in upload form

Browse Source
This commit is contained in:
highperfocused
2025-11-27 22:57:00 +01:00
parent f9104d8b8b
commit 69eaae0eba
1 changed files with 30 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/pages/Upload.tsx
View File

@@ -6,13 +6,14 @@ import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea'; import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label'; import { Label } from '@/components/ui/label';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
import { useUploadFile } from '@/hooks/useUploadFile'; import { useUploadFile } from '@/hooks/useUploadFile';
import { useNostrPublish } from '@/hooks/useNostrPublish'; import { useNostrPublish } from '@/hooks/useNostrPublish';
import { useCurrentUser } from '@/hooks/useCurrentUser'; import { useCurrentUser } from '@/hooks/useCurrentUser';
import { useToast } from '@/hooks/useToast'; import { useToast } from '@/hooks/useToast';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { LoginArea } from '@/components/auth/LoginArea'; import { LoginArea } from '@/components/auth/LoginArea';
import { ImageIcon, X, Loader2 } from 'lucide-react'; import { ImageIcon, X, Loader2, ChevronDown } from 'lucide-react';
export function Upload() { export function Upload() {
useSeoMeta({ useSeoMeta({
@@ -32,6 +33,7 @@ export function Upload() {
const [location, setLocation] = useState(''); const [location, setLocation] = useState('');
const [selectedFiles, setSelectedFiles] = useState<File[]>([]); const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
const [previewUrls, setPreviewUrls] = useState<string[]>([]); const [previewUrls, setPreviewUrls] = useState<string[]>([]);
const [isAdvancedOpen, setIsAdvancedOpen] = useState(false);
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => { const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -328,17 +330,33 @@ export function Upload() {
</p> </p>
</div> </div>
{/* Location */} {/* Advanced Options */}
<div className="space-y-2"> <Collapsible open={isAdvancedOpen} onOpenChange={setIsAdvancedOpen}>
<Label htmlFor="location">Location</Label> <CollapsibleTrigger asChild>
<Input <Button
id="location" type="button"
value={location} variant="ghost"
onChange={(e) => setLocation(e.target.value)} className="w-full justify-between"
placeholder="San José, Costa Rica" disabled={isLoading}
disabled={isLoading} >
/> <span>Advanced Options</span>
</div> <ChevronDown className={`h-4 w-4 transition-transform duration-200 ${isAdvancedOpen ? 'rotate-180' : ''}`} />
</Button>
</CollapsibleTrigger>
<CollapsibleContent className="space-y-4 pt-4">
{/* Location */}
<div className="space-y-2">
<Label htmlFor="location">Location</Label>
<Input
id="location"
value={location}
onChange={(e) => setLocation(e.target.value)}
placeholder="San José, Costa Rica"
disabled={isLoading}
/>
</div>
</CollapsibleContent>
</Collapsible>
{/* Submit Button */} {/* Submit Button */}
<div className="flex gap-4"> <div className="flex gap-4">