'use client'; import { Choicebox, ChoiceboxItem, ChoiceboxItemContent, ChoiceboxItemDescription, ChoiceboxItemHeader, ChoiceboxItemIndicator, ChoiceboxItemTitle, } from '@/components/ui/nopends-ui/choicebox'; import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, } from '@/components/ui/nopends-ui/combobox'; import { Dropzone, DropzoneContent, DropzoneEmptyState } from '@/components/ui/nopends-ui/dropzone'; import { MiniCalendar, MiniCalendarDay, MiniCalendarDays, MiniCalendarNavigation, } from '@/components/ui/nopends-ui/mini-calendar'; import { Button } from '@/components/ui/button'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import { Tags, TagsContent, TagsEmpty, TagsGroup, TagsInput, TagsItem, TagsList, TagsTrigger, TagsValue, } from '@/components/ui/nopends-ui/tags'; import { CalendarIcon, ImageIcon, InfoIcon, MapPinIcon, TagIcon, UsersIcon, } from 'lucide-react'; import { type FormEventHandler, useState } from 'react'; import { toast } from 'sonner'; const eventTypes = [ { value: 'conference', label: 'Conference', description: 'Professional gathering with speakers and networking', }, { value: 'workshop', label: 'Workshop', description: 'Hands-on learning experience with practical activities', }, { value: 'meetup', label: 'Meetup', description: 'Casual gathering for like-minded individuals', }, { value: 'webinar', label: 'Webinar', description: 'Online presentation or seminar via video conference', }, ]; const venues = [ { value: 'convention-center', label: 'Downtown Convention Center' }, { value: 'hotel-ballroom', label: 'Grand Hotel Ballroom' }, { value: 'university-hall', label: 'University Main Hall' }, { value: 'co-working-space', label: 'Tech Hub Co-working Space' }, { value: 'online', label: 'Online/Virtual' }, ]; const availableTags = [ 'Technology', 'Business', 'Marketing', 'Design', 'Development', 'AI/ML', 'Startup', 'Networking', 'Education', 'Innovation', 'Remote Work', 'Leadership', ]; const Example = () => { const [eventType, setEventType] = useState(''); const [venue, setVenue] = useState(''); const [selectedDate, setSelectedDate] = useState(); const [files, setFiles] = useState([]); const [selectedTags, setSelectedTags] = useState([]); const handleTagSelect = (tag: string) => { if (!selectedTags.includes(tag)) { setSelectedTags([...selectedTags, tag]); } }; const handleTagRemove = (tagToRemove: string) => { setSelectedTags(selectedTags.filter((tag) => tag !== tagToRemove)); }; const handleSubmit: FormEventHandler = (event) => { event.preventDefault(); toast.success('Event created successfully', { description: `${eventType} event created for ${selectedDate?.toLocaleDateString()} at ${venue}`, }); }; return (

Create Your Event

Fill out the form below to create and customize your upcoming event

{/* Basic Information */}

Basic Information

Event Name

Organizer

Description

</div>
        </div>

{/* Event Type Selection */}
        <div className="space-y-4">
          <h2 className="flex items-center gap-2 font-semibold text-xl">
            <UsersIcon className="size-5" />
            Event Type
          </h2>
          <Choicebox value={eventType} onValueChange={setEventType}>
            {eventTypes.map((type) => (
              <ChoiceboxItem key={type.value} value={type.value}>
                <ChoiceboxItemHeader>
                  <ChoiceboxItemTitle>{type.label}</ChoiceboxItemTitle>
                  <ChoiceboxItemDescription>
                    {type.description}
                  </ChoiceboxItemDescription>
                </ChoiceboxItemHeader>
                <ChoiceboxItemContent>
                  <ChoiceboxItemIndicator />
                </ChoiceboxItemContent>
              </ChoiceboxItem>
            ))}
          </Choicebox>
        </div>

{/* Venue Selection */}
        <div className="space-y-4">
          <h2 className="flex items-center gap-2 font-semibold text-xl">
            <MapPinIcon className="size-5" />
            Venue
          </h2>
          <Combobox
            data={venues}
            type="venue"
            value={venue}
            onValueChange={setVenue}
          >
            <ComboboxTrigger className="w-full" />
            <ComboboxContent>
              <ComboboxInput />
              <ComboboxList>
                <ComboboxEmpty />
                <ComboboxGroup>
                  {venues.map((venue) => (
                    <ComboboxItem key={venue.value} value={venue.value}>
                      {venue.label}
                    </ComboboxItem>
                  ))}
                </ComboboxGroup>
              </ComboboxList>
            </ComboboxContent>
          </Combobox>
        </div>

{/* Date Selection */}
        <div className="space-y-4">
          <h2 className="flex items-center gap-2 font-semibold text-xl">
            <CalendarIcon className="size-5" />
            Select Date
          </h2>
          <MiniCalendar
            value={selectedDate}
            onValueChange={setSelectedDate}
            days={7}
            className="w-fit"
          >
            <MiniCalendarNavigation direction="prev" />
            <MiniCalendarDays>
              {(date) => (
                <MiniCalendarDay key={date.toISOString()} date={date} />
              )}
            </MiniCalendarDays>
            <MiniCalendarNavigation direction="next" />
          </MiniCalendar>
        </div>

{/* Tags Selection */}
        <div className="space-y-4">
          <h2 className="flex items-center gap-2 font-semibold text-xl">
            <TagIcon className="size-5" />
            Event Tags
          </h2>
          <Tags>
            <TagsTrigger>
              {selectedTags.map((tag) => (
                <TagsValue key={tag} onRemove={() => handleTagRemove(tag)}>
                  {tag}
                </TagsValue>
              ))}
            </TagsTrigger>
            <TagsContent>
              <TagsInput placeholder="Search tags..." />
              <TagsList>
                <TagsEmpty>No tags found.</TagsEmpty>
                <TagsGroup>
                  {availableTags
                    .filter((tag) => !selectedTags.includes(tag))
                    .map((tag) => (
                      <TagsItem key={tag} onSelect={() => handleTagSelect(tag)}>
                        {tag}
                      </TagsItem>
                    ))}
                </TagsGroup>
              </TagsList>
            </TagsContent>
          </Tags>
        </div>

{/* File Upload */}
        <div className="space-y-4">
          <h2 className="flex items-center gap-2 font-semibold text-xl">
            <ImageIcon className="size-5" />
            Event Images
          </h2>
          <Dropzone
            accept={{
              'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp'],
            }}
            maxFiles={5}
            maxSize={5 * 1024 * 1024} // 5MB
            onDrop={(acceptedFiles) => setFiles(acceptedFiles)}
          >
            <DropzoneEmptyState />
            <DropzoneContent />
          </Dropzone>
          {files.length > 0 && (
            <div className="text-muted-foreground text-sm">
              {files.length} file{files.length > 1 ? 's' : ''} selected
            </div>
          )}
        </div>

{/* Submit Button */}
        <div className="flex justify-end space-x-4">
          <Button type="button" variant="outline">
            Save as Draft
          </Button>
          <Button type="submit">Create Event</Button>
        </div>
      </form>
    </div>
  );
};

export default Example;
</article></body></html>