【Convex】NextJs14 と Convex【#１１ Organization Profile】

【#１１ Organization Profile】

YouTube: https://youtu.be/9vxFDAoaozE

https://youtu.be/9vxFDAoaozE

今回はOrganizationの招待ボタンを実装します。

app/(main)/_components/org-switcher.tsx

import { OrganizationSwitcher } from "@clerk/nextjs";
import { InviteButton } from "./invite-button";

export const OrgSwitcher = () => {
  return (
    <div className="w-full flex items-center justify-between gap-x-2">
      <OrganizationSwitcher
        hidePersonal
        appearance={{
          elements: {
            rootBox: {
              display: "flex",
              justifyContent: "center",
              alignItems: "center",
              width: "100%",
              maxWidth: "380px",
            },
            organizationSwitcherTrigger: {
              padding: "6px",
              width: "100%",
              borderRadius: "8px",
              justifyContent: "center",
              backgroundColor: "#fff",
              "&:hover": {
                backgroundColor: "#fff",
              },
            },
          },
        }}
      />
      <InviteButton />
    </div>
  );
};

app/(main)/_components/invite-button.tsx

import { OrganizationProfile } from "@clerk/nextjs";
import { Plus } from "lucide-react";

import { Button } from "@/components/ui/button";
import { Dialog, DialogContent, DialogTrigger } from "@/components/ui/dialog";

export const InviteButton = () => {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline" className="h-full">
          <Plus className="w-4 h-4" />
          <span className="hidden md:block ml-2">Invite member</span>
        </Button>
      </DialogTrigger>
      <DialogContent className="p-0 bg-transparent border-none max-w-[880px]">
        <OrganizationProfile />
      </DialogContent>
    </Dialog>
  );
};