<>
  <ModalTrigger>
    <Button>
      <UserPlusIcon className="h-5 w-5 opacity-50" />
      invite members
    </Button>
  </ModalTrigger>
  <ModalBody>
    <ModalContent>
      <Typography.Paragraph
        className="text-base"
        extraContrast={true}
      >
        Invite members
      </Typography.Paragraph>
      <Typography.Paragraph className="pt-2">
        Invite your colleagues to join your workspace and start collaborating on your projects.
      </Typography.Paragraph>
    </ModalContent>
    <div className="flex flex-col gap-6 border-t border-gray-800 bg-white/[0.02] p-6">
      <div className="flex flex-1 items-end gap-2">
        <Input
          className="w-full min-w-0"
          label="Email"
          placeholder="name@company.com"
        />
        <Button size="lg">
          Send
        </Button>
      </div>
      <div className="flex flex-col gap-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Avatar
              name="john@doe.com"
              picture={undefined}
              size="sm"
            />
            <Typography.Paragraph>
              john@doe.com
            </Typography.Paragraph>
            <Badge size="xs">
              Pending
            </Badge>
          </div>
          <Dropdown align="end">
            <DropdownTrigger>
              <Button
                className="active:scale-100"
                isIcon={true}
                size="sm"
                variant="ghost"
              >
                <EllipsisHorizontalIcon className="h-5 w-5 shrink-0 opacity-50" />
              </Button>
            </DropdownTrigger>
            <DropdownBody>
              <React.Fragment key=".0">
                <DropdownItem>
                  <PaperAirplaneIcon className="h-5 w-5 opacity-50" />
                  Resend invite
                </DropdownItem>
                <DropdownItem>
                  <UserMinusIcon className="h-5 w-5 opacity-50" />
                  Revoke access
                </DropdownItem>
              </React.Fragment>
            </DropdownBody>
          </Dropdown>
        </div>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Avatar
              name="foo@bar.com"
              picture={undefined}
              size="sm"
            />
            <Typography.Paragraph>
              foo@bar.com
            </Typography.Paragraph>
            <Badge size="xs">
              Pending
            </Badge>
          </div>
          <Dropdown align="end">
            <DropdownTrigger>
              <Button
                className="active:scale-100"
                isIcon={true}
                size="sm"
                variant="ghost"
              >
                <EllipsisHorizontalIcon className="h-5 w-5 shrink-0 opacity-50" />
              </Button>
            </DropdownTrigger>
            <DropdownBody>
              <React.Fragment key=".0">
                <DropdownItem>
                  <PaperAirplaneIcon className="h-5 w-5 opacity-50" />
                  Resend invite
                </DropdownItem>
                <DropdownItem>
                  <UserMinusIcon className="h-5 w-5 opacity-50" />
                  Revoke access
                </DropdownItem>
              </React.Fragment>
            </DropdownBody>
          </Dropdown>
        </div>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Avatar
              name="littleknight@hk.com"
              picture="./assets/knight.jpeg"
              size="sm"
            />
            <Typography.Paragraph>
              little knight
            </Typography.Paragraph>
          </div>
          <Dropdown align="end">
            <DropdownTrigger>
              <Button
                className="active:scale-100"
                isIcon={true}
                size="sm"
                variant="ghost"
              >
                <EllipsisHorizontalIcon className="h-5 w-5 shrink-0 opacity-50" />
              </Button>
            </DropdownTrigger>
            <DropdownBody>
              <DropdownItem onClick={function noRefCheck(){}}>
                <ModalConfirmation
                  message="Are you sure you want to remove this member? This action is irreversible"
                  onSubmit={function noRefCheck(){}}
                  submitButtonLabel="Remove little knight"
                  title="Remove little knight?"
                  trigger={<><UserMinusIcon className="h-5 w-5 opacity-50" />Remove from team</>}
                />
              </DropdownItem>
            </DropdownBody>
          </Dropdown>
        </div>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Avatar
              name="hornet@hk.com"
              picture="./assets/hornet.webp"
              size="sm"
            />
            <Typography.Paragraph>
              hornet
            </Typography.Paragraph>
          </div>
          <Dropdown align="end">
            <DropdownTrigger>
              <Button
                className="active:scale-100"
                isIcon={true}
                size="sm"
                variant="ghost"
              >
                <EllipsisHorizontalIcon className="h-5 w-5 shrink-0 opacity-50" />
              </Button>
            </DropdownTrigger>
            <DropdownBody>
              <DropdownItem onClick={function noRefCheck(){}}>
                <ModalConfirmation
                  message="Are you sure you want to remove this member? This action is irreversible"
                  onSubmit={function noRefCheck(){}}
                  submitButtonLabel="Remove hornet"
                  title="Remove hornet?"
                  trigger={<><UserMinusIcon className="h-5 w-5 opacity-50" />Remove from team</>}
                />
              </DropdownItem>
            </DropdownBody>
          </Dropdown>
        </div>
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Avatar
              name="quirrel@hk.com"
              picture="./assets/quirrel.jpeg"
              size="sm"
            />
            <Typography.Paragraph>
              quirrel
            </Typography.Paragraph>
          </div>
          <Dropdown align="end">
            <DropdownTrigger>
              <Button
                className="active:scale-100"
                isIcon={true}
                size="sm"
                variant="ghost"
              >
                <EllipsisHorizontalIcon className="h-5 w-5 shrink-0 opacity-50" />
              </Button>
            </DropdownTrigger>
            <DropdownBody>
              <DropdownItem onClick={function noRefCheck(){}}>
                <ModalConfirmation
                  message="Are you sure you want to remove this member? This action is irreversible"
                  onSubmit={function noRefCheck(){}}
                  submitButtonLabel="Remove quirrel"
                  title="Remove quirrel?"
                  trigger={<><UserMinusIcon className="h-5 w-5 opacity-50" />Remove from team</>}
                />
              </DropdownItem>
            </DropdownBody>
          </Dropdown>
        </div>
      </div>
    </div>
  </ModalBody>
</>