@catalystsoftware/ui 1.0.4 → 1.0.5

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

@@ -0,0 +1,612 @@
+/**
+
+
+
+
+
+
+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>
+  )
+} */