@catalystsoftware/ui 1.0.5 → 1.0.6

package/components/catalyst-ui/x/dropdown-menu-x.tsx

@@ -1,612 +0,0 @@
-/**
-
-
-
-
-
-
-export function DropdownMenuX({ dropdownMenu = 'default', children, ...props }: any) {
-    switch (dropdownMenu) {
-        case 'Closable':
-            break
-        default:
-            break;
-    }
-}
-
-const DropdownMenuDemo = () => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>Basic</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='w-56'>
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>Profile</DropdownMenuItem>
-          <DropdownMenuItem>Billing</DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem>Email</DropdownMenuItem>
-                <DropdownMenuItem>Message</DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>More...</DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          <DropdownMenuItem>GitHub</DropdownMenuItem>
-          <DropdownMenuItem>Support</DropdownMenuItem>
-          <DropdownMenuItem disabled>API</DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuUserSwitcherDemo = () => {
-  const [selectUser, setSelectUser] = useState(users[0])
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger className='bg-secondary flex items-center gap-2 rounded-lg px-3 py-2.5'>
-        <Avatar>
-          <AvatarImage src={selectUser.src} alt={selectUser.name} />
-          <AvatarFallback className='text-xs'>{selectUser.fallback}</AvatarFallback>
-        </Avatar>
-        <div className='flex flex-col gap-1 text-start leading-none'>
-          <span className='max-w-[17ch] truncate text-sm leading-none font-semibold'>{selectUser.name}</span>
-          <span className='text-muted-foreground max-w-[20ch] truncate text-xs'>{selectUser.mail}</span>
-        </div>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align='start' className='w-66'>
-        <DropdownMenuLabel>Task Assignment</DropdownMenuLabel>
-        {users.map(user => (
-          <DropdownMenuItem key={user.id} onClick={() => setSelectUser(user)}>
-            <div className='flex items-center gap-2'>
-              <Avatar>
-                <AvatarImage src={user.src} alt={user.name} />
-                <AvatarFallback className='text-xs'>{user.fallback}</AvatarFallback>
-              </Avatar>
-              <div className='flex flex-col gap-1 text-start leading-none'>
-                <span className='max-w-[17ch] truncate text-sm leading-none font-semibold'>{user.name}</span>
-                <span className='text-muted-foreground max-w-[20ch] truncate text-xs'>{user.mail}</span>
-              </div>
-            </div>
-            {selectUser.id === user.id && <CheckIcon className='ml-auto' />}
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuItemAvatarDemo = () => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>Menu item with avatar</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='w-91'>
-        <DropdownMenuLabel>Chat List</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          {listItems.map((item, index) => (
-            <DropdownMenuItem key={index} className='justify-between'>
-              <Avatar>
-                <AvatarImage src={item.src} alt={item.name} />
-                <AvatarFallback className='text-xs'>{item.fallback}</AvatarFallback>
-              </Avatar>
-              <div className='flex flex-1 flex-col'>
-                <span className='text-popover-foreground'>{item.name}</span>
-                <span className='text-muted-foreground text-xs'>{item.message}</span>
-              </div>
-              {item.newMessages ? (
-                <div className='flex flex-col items-end gap-1'>
-                  <span className='text-muted-foreground text-xs'>{item.time}</span>
-                  <Badge className='h-5 min-w-5 bg-green-600 px-1 dark:bg-green-400'>{item.newMessages}</Badge>
-                </div>
-              ) : (
-                <span className='text-muted-foreground text-xs'>{item.time}</span>
-              )}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuItemActionDemo = () => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>Menu item with action</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='w-91'>
-        <DropdownMenuLabel>Contact List</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          {listItems.map((item, index) => (
-            <DropdownMenuItem key={index} className='justify-between'>
-              <Avatar>
-                <AvatarImage src={item.src} alt={item.name} />
-                <AvatarFallback className='text-xs'>{item.fallback}</AvatarFallback>
-              </Avatar>
-              <div className='flex flex-1 flex-col'>
-                <span className='text-popover-foreground'>{item.name}</span>
-                <span className='text-muted-foreground text-xs'>{item.mail}</span>
-              </div>
-              <Button variant='secondary' className='h-7 cursor-pointer rounded-md px-2'>
-                Send
-              </Button>
-            </DropdownMenuItem>
-          ))}
-          <DropdownMenuItem>
-            <Button className='grow'>Add Contact</Button>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-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 (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>Meetings Schedule</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='sm:w-124'>
-        <DropdownMenuLabel>Today&apos;s meetings</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          <DropdownMenuItem className='justify-between gap-3.5' onSelect={event => event.preventDefault()}>
-            <span className='text-popover-foreground font-medium'>08:30</span>
-            <div className='flex flex-1 flex-col'>
-              <span className='text-popover-foreground'>Daily Project Review</span>
-              <span className='text-muted-foreground text-xs'>Team organization</span>
-            </div>
-            <Avatar className='max-sm:hidden'>
-              <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-11.png' alt='Hallie Richards' />
-              <AvatarFallback className='text-xs'>Angel</AvatarFallback>
-            </Avatar>
-            <div className='flex items-center gap-2'>
-              <span className='text-popover-foreground text-sm'>Privacy</span>
-              <Switch id='airplane-mode' checked={firstMeeting} onCheckedChange={setFirstMeeting} />
-            </div>
-          </DropdownMenuItem>
-          <DropdownMenuItem className='justify-between gap-3.5' onSelect={event => event.preventDefault()}>
-            <span className='text-popover-foreground font-medium'>09:00</span>
-            <div className='flex flex-1 flex-col'>
-              <span className='text-popover-foreground'>Sprint Surge</span>
-              <span className='text-muted-foreground text-xs'>Daily Boost for Agile Progress</span>
-            </div>
-            <div className='flex -space-x-3 max-sm:hidden'>
-              {avatars.map((avatar, index) => (
-                <Avatar key={index} className='ring-background ring-2'>
-                  <AvatarImage src={avatar.src} alt={avatar.name} />
-                  <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                </Avatar>
-              ))}
-            </div>
-            <div className='flex items-center gap-2'>
-              <span className='text-popover-foreground text-sm'>Privacy</span>
-              <Switch id='airplane-mode' checked={secondMeeting} onCheckedChange={setSecondMeeting} />
-            </div>
-          </DropdownMenuItem>
-          <DropdownMenuItem className='justify-between gap-3.5' onSelect={event => event.preventDefault()}>
-            <span className='text-popover-foreground font-medium'>11:45</span>
-            <div className='flex flex-1 flex-col'>
-              <span className='text-popover-foreground'>Project Status Update</span>
-              <span className='text-muted-foreground text-xs'>Progress Overview Update</span>
-            </div>
-            <Avatar className='max-sm:hidden'>
-              <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-12.png' alt='Hallie Richards' />
-              <AvatarFallback className='text-xs'>Angel</AvatarFallback>
-            </Avatar>
-            <div className='flex items-center gap-2'>
-              <span className='text-popover-foreground text-sm'>Privacy</span>
-              <Switch id='airplane-mode' checked={thirdMeeting} onCheckedChange={setThirdMeeting} />
-            </div>
-          </DropdownMenuItem>
-          <DropdownMenuItem className='justify-between gap-3.5' onSelect={event => event.preventDefault()}>
-            <span className='text-popover-foreground font-medium'>06:30</span>
-            <div className='flex flex-1 flex-col'>
-              <span className='text-popover-foreground'>Team Performance</span>
-              <span className='text-muted-foreground text-xs'>Team Metrics Evaluation</span>
-            </div>
-            <div className='flex -space-x-3 max-sm:hidden'>
-              {avatars.map((avatar, index) => (
-                <Avatar key={index} className='ring-background ring-2'>
-                  <AvatarImage src={avatar.src} alt={avatar.name} />
-                  <AvatarFallback className='text-xs'>{avatar.fallback}</AvatarFallback>
-                </Avatar>
-              ))}
-            </div>
-            <div className='flex items-center gap-2'>
-              <span className='text-popover-foreground text-sm'>Privacy</span>
-              <Switch id='airplane-mode' checked={forthMeeting} onCheckedChange={setForthMeeting} />
-            </div>
-          </DropdownMenuItem>
-          <DropdownMenuItem className='justify-between gap-3.5' onSelect={event => event.preventDefault()}>
-            <span className='text-popover-foreground font-medium'>10:50</span>
-            <div className='flex flex-1 flex-col'>
-              <span className='text-popover-foreground'>Stakeholder Feedback</span>
-              <span className='text-muted-foreground text-xs'>Feedback from Stakeholders</span>
-            </div>
-            <Avatar className='max-sm:hidden'>
-              <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-14.png' alt='Hallie Richards' />
-              <AvatarFallback className='text-xs'>Angel</AvatarFallback>
-            </Avatar>
-            <div className='flex items-center gap-2'>
-              <span className='text-popover-foreground text-sm'>Privacy</span>
-              <Switch id='airplane-mode' checked={fifthMeeting} onCheckedChange={setFifthMeeting} />
-            </div>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuEditMenuDemo = () => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='ghost' size='icon' className='rounded-full'>
-          <PencilIcon />
-          <span className='sr-only'>Edit menu</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='w-56'>
-        <DropdownMenuLabel>Edit text</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          {listItems.map((item, index) => (
-            <DropdownMenuItem key={index}>
-              <span className='flex items-center justify-center rounded-md border p-2'>
-                <item.icon />
-              </span>
-              <div className='flex flex-col'>
-                <span className='text-popover-foreground'>{item.property}</span>
-                <span className='text-muted-foreground text-xs'>{item.description}</span>
-              </div>
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuUserMenuDemo = () => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='secondary' size='icon' className='overflow-hidden rounded-full'>
-          <img src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-5.png' alt='Hallie Richards' />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='w-56'>
-        <DropdownMenuLabel>My Account</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          {listItems.map((item, index) => (
-            <DropdownMenuItem key={index}>
-              <item.icon />
-              <span className='text-popover-foreground'>{item.property}</span>
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuUserProfileDemo = () => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>User Profile</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='w-56'>
-        <DropdownMenuLabel className='flex items-center gap-2'>
-          <Avatar>
-            <AvatarImage src='https://cdn.shadcnstudio.com/ss-assets/avatar/avatar-1.png' alt='Phillip George' />
-            <AvatarFallback className='text-xs'>PG</AvatarFallback>
-          </Avatar>
-          <div className='flex flex-1 flex-col'>
-            <span className='text-popover-foreground'>Phillip George</span>
-            <span className='text-muted-foreground text-xs'>phillip@example.com</span>
-          </div>
-        </DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuItem>Profile</DropdownMenuItem>
-          <DropdownMenuItem>Billing</DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuGroup>
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>
-            <DropdownMenuPortal>
-              <DropdownMenuSubContent>
-                <DropdownMenuItem>Email</DropdownMenuItem>
-                <DropdownMenuItem>Message</DropdownMenuItem>
-                <DropdownMenuSeparator />
-                <DropdownMenuItem>More...</DropdownMenuItem>
-              </DropdownMenuSubContent>
-            </DropdownMenuPortal>
-          </DropdownMenuSub>
-          <DropdownMenuItem>GitHub</DropdownMenuItem>
-          <DropdownMenuItem>Support</DropdownMenuItem>
-          <DropdownMenuItem disabled>API</DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuAlignStartDemo = () => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>Align Start</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align='start' className='w-34'>
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <PencilLineIcon />
-            Edit
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <UploadIcon />
-            Share
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem variant='destructive'>
-            <Trash2Icon />
-            <span>Delete</span>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuAlignEndDemo = () => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>Align End</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align='end' className='w-66'>
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            New Tab<DropdownMenuShortcut>⌘ + T</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            New Window <DropdownMenuShortcut>⌘ + N</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>
-            New Incognito Window <DropdownMenuShortcut>⌘ + ⇧ + N</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            History <DropdownMenuShortcut>⌘ + Y</DropdownMenuShortcut>
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            Downloads <DropdownMenuShortcut>⌥ + ⇧ + L</DropdownMenuShortcut>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuBorderedMenuDemo = () => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>Bordered Menu</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='w-56 shadow-none'>
-        <DropdownMenuLabel>Task priority</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          {listItems.map((item, index) => (
-            <DropdownMenuItem key={index}>
-              <item.icon className={item.color} />
-              {item.priority}
-            </DropdownMenuItem>
-          ))}
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuItemIconDemo = () => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>Menu item with icon</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='w-56'>
-        <DropdownMenuLabel>User Profile</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          <DropdownMenuItem>
-            <UserIcon />
-            Profile
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <SettingsIcon />
-            Settings
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <ReceiptIcon />
-            Billing Plans
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <DollarSignIcon />
-            Pricing
-          </DropdownMenuItem>
-          <DropdownMenuItem>
-            <CircleHelpIcon />
-            FAQ
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuCheckboxDemo = () => {
-  const [showStatusBar, setShowStatusBar] = useState(true)
-  const [showActivityBar, setShowActivityBar] = useState(false)
-  const [showPanel, setShowPanel] = useState(false)
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>With checkbox</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='w-56'>
-        <DropdownMenuLabel>Appearance</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuCheckboxItem checked={showStatusBar} onCheckedChange={setShowStatusBar}>
-          Status Bar
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem checked={showActivityBar} onCheckedChange={setShowActivityBar} disabled>
-          API
-        </DropdownMenuCheckboxItem>
-        <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
-          Invite users
-        </DropdownMenuCheckboxItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuRadioGroupDemo = () => {
-  const [position, setPosition] = useState('bottom')
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>With radio</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='w-56'>
-        <DropdownMenuLabel>Panel Position</DropdownMenuLabel>
-        <DropdownMenuSeparator />
-        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
-          <DropdownMenuRadioItem value='top'>Top</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value='bottom'>Bottom</DropdownMenuRadioItem>
-          <DropdownMenuRadioItem value='right' disabled>
-            Right
-          </DropdownMenuRadioItem>
-        </DropdownMenuRadioGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownSlideLeftAnimationDemo = () => {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>Slide Left Animation</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent
-        align='start'
-        className='data-[state=closed]:slide-out-to-left-20 data-[state=open]:slide-in-from-left-20 data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-100 w-56 duration-400'
-      >
-        <DropdownMenuLabel>Settings</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          <DropdownMenuItem>My Profile</DropdownMenuItem>
-          <DropdownMenuItem>Settings</DropdownMenuItem>
-          <DropdownMenuItem>Billing</DropdownMenuItem>
-          <DropdownMenuItem>FAQs</DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator />
-        <DropdownMenuLabel>Contact</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          <DropdownMenuItem>Call Support</DropdownMenuItem>
-          <DropdownMenuItem>Chat with us</DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-}
-
-const DropdownMenuSlideUpAnimationDemo = () => {
-  const [googleSwitch, setGoogleSwitch] = useState(false)
-  const [twitterSwitch, setTwitterSwitch] = useState(false)
-  const [linkedinSwitch, setLinkedinSwitch] = useState(false)
-  const [dribbbleSwitch, setDribbbleSwitch] = useState(false)
-  const [behanceSwitch, setBehanceSwitch] = useState(false)
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='outline'>Slide Up Animation</Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent className='data-[state=closed]:slide-out-to-left-0 data-[state=open]:slide-in-from-left-0 data-[state=closed]:slide-out-to-bottom-20 data-[state=open]:slide-in-from-bottom-20 data-[state=closed]:zoom-out-100 w-56 duration-400'>
-        <DropdownMenuLabel>Apps notification</DropdownMenuLabel>
-        <DropdownMenuGroup>
-          <DropdownMenuItem className='justify-between' onSelect={event => event.preventDefault()}>
-            <img
-              src='https://cdn.shadcnstudio.com/ss-assets/components/dropdown/google.png'
-              alt='google'
-              className='size-4'
-            ></img>
-            <span className='flex-1'>Google</span>
-            <Switch id='airplane-mode' checked={googleSwitch} onCheckedChange={setGoogleSwitch} />
-          </DropdownMenuItem>
-          <DropdownMenuItem className='justify-between' onSelect={event => event.preventDefault()}>
-            <img
-              src='https://cdn.shadcnstudio.com/ss-assets/components/dropdown/twitter.png'
-              alt='twitter'
-              className='size-4'
-            ></img>
-            <span className='flex-1'>Twitter</span>
-            <Switch id='airplane-mode' checked={twitterSwitch} onCheckedChange={setTwitterSwitch} />
-          </DropdownMenuItem>
-          <DropdownMenuItem className='justify-between' onSelect={event => event.preventDefault()}>
-            <img
-              src='https://cdn.shadcnstudio.com/ss-assets/components/dropdown/linkedin.png'
-              alt='linkedin'
-              className='size-4'
-            ></img>
-            <span className='flex-1'>Linkedin</span>
-            <Switch id='airplane-mode' checked={linkedinSwitch} onCheckedChange={setLinkedinSwitch} />
-          </DropdownMenuItem>
-          <DropdownMenuItem className='justify-between' onSelect={event => event.preventDefault()}>
-            <img
-              src='https://cdn.shadcnstudio.com/ss-assets/components/dropdown/dribbble.png'
-              alt='dribbble'
-              className='size-4'
-            ></img>
-            <span className='flex-1'>Dribbble</span>
-            <Switch id='airplane-mode' checked={dribbbleSwitch} onCheckedChange={setDribbbleSwitch} />
-          </DropdownMenuItem>
-          <DropdownMenuItem className='justify-between' onSelect={event => event.preventDefault()}>
-            <img
-              src='https://cdn.shadcnstudio.com/ss-assets/components/dropdown/behance.png'
-              alt='behance'
-              className='size-4'
-            ></img>
-            <span className='flex-1'>Behance</span>
-            <Switch id='airplane-mode' checked={behanceSwitch} onCheckedChange={setBehanceSwitch} />
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  )
-} */