'use client' import { useState } from 'react' import { Avatar, AvatarFallback, AvatarImage } from '@newtonschool/koyo-ui/avatar' import { Button } from '@newtonschool/koyo-ui/button' import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuTrigger } from '@newtonschool/koyo-ui/dropdown-menu' import { Switch } from '@newtonschool/koyo-ui/switch' const avatars = [ { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-3.png', fallback: 'OS', name: 'Olivia Sparks' }, { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-6.png', fallback: 'HL', name: 'Howard Lloyd' }, { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png', fallback: 'HR', name: 'Hallie Richards' }, { src: 'https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-16.png', fallback: 'JW', name: 'Jenny Wilson' } ] const DropdownMeetingScheduleDemo = () => { const [firstMeeting, setFirstMeeting] = useState(false) const [secondMeeting, setSecondMeeting] = useState(true) const [thirdMeeting, setThirdMeeting] = useState(false) const [forthMeeting, setForthMeeting] = useState(true) const [fifthMeeting, setFifthMeeting] = useState(false) return ( Today's meetings event.preventDefault()}> 08:30

Daily Project Review Team organization

Angel

Privacy

event.preventDefault()}> 09:00

Sprint Surge Daily Boost for Agile Progress

{avatars.map((avatar, index) => ( {avatar.fallback} ))}

Privacy

event.preventDefault()}> 11:45

Project Status Update Progress Overview Update

Angel

Privacy

event.preventDefault()}> 06:30

Team Performance Team Metrics Evaluation

{avatars.map((avatar, index) => ( {avatar.fallback} ))}

Privacy

event.preventDefault()}> 10:50

Stakeholder Feedback Feedback from Stakeholders

Angel

Privacy

) } export default DropdownMeetingScheduleDemo

Koyo Dropdown Menu

Koyo Animated Dropdown Menu