【NextJs14】NextJs14 と 便利なライブラリ【#３６Clerk Organization Profile】

【#３６Clerk Organization Profile】

YouTube: https://youtu.be/A7YSSqxC6f4

https://youtu.be/A7YSSqxC6f4

今回はユーザーの招待画面を表示するボタンを実装します。

app/(main)/account/_components/org-navbar.tsx

import { OrganizationSwitcher } from "@clerk/nextjs";

import { InvitationButton } from "./invitation-button";

export const OrgNavbar = () => {
  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: "space-between",
              backgroundColor: "#fff",
              "&:hover": {
                backgroundColor: "#fff",
              },
            },
          },
        }}
      />
      <InvitationButton />
    </div>
  );
};

app/(main)/account/_components/invitation-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 InvitationButton = () => {
  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>
  );
};