【NextJs14】NextJs14 と 便利なライブラリ【#３９Clerk CreateOrganization】

【#３９Clerk Organization List】

YouTube: https://youtu.be/A8nopZIeX0k

https://youtu.be/A8nopZIeX0k

今回はOrganizationのリストの下にOrganizationの作成ボタンを表示します。

/app/(main)/account/_components/sidebar/index.tsx

import { List } from "./list";
import { NewOrgButton } from "./new-org-button";

export const Sidebar = () => {
  return (
    <div className="h-full w-[60px] flex flex-col px-3 py-1 gap-y-4 text-white border-r">
      <List />
      <NewOrgButton />
    </div>
  );
};

/app/(main)/account/_components/sidebar/new-org-button.tsx

"use client";

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

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

export const NewOrgButton = () => {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <div className="aspect-square">
          <button className=" bg-slate-600 h-full w-full rounded-md flex items-center justify-center opacity-60 hover:opacity-100 transition">
            <Plus className="text-white" />
          </button>
        </div>
      </DialogTrigger>
      <DialogContent className="p-0 bg-transparent border-none max-w-[480px]">
        <CreateOrganization />
      </DialogContent>
    </Dialog>
  );
};