🐕

【Convex】NextJs14 と Convex【#７Create Organization Button】

2024/03/30に公開

Next.js

Clerk

Convex

tech

【#７Create Organization Button】

YouTube: https://youtu.be/XsIkmywaSww

https://youtu.be/XsIkmywaSww

今回はサイドバーとOrganizationの新規作成ボタンを実装します。

まずは新しくレイアウトファイルを作成したいので、
appディレクトリ直下に「(main)」フォルダを作成します。

そして、appディレクトリ直下の「page.tsx」をこちらのフォルダに移動します。

ここまでできましたら、「(main)」フォルダ内に「layout.tsx」を作成します。

app/(main)/layout.tsx

import { Sidebar } from "./_components/sidebar";

interface Props {
  children: React.ReactNode;
}

const MainLayout = ({ children }: Props) => {
  return (
    <div className="w-full h-full">
      <Sidebar />
      <div className="pl-[60px] overflow-hidden">{children}</div>
    </div>
  );
};

export default MainLayout;

次に「(main)」フォルダ内に「_components」フォルダを作成して、
サイドバーのコンポーネントを作成していきます。

app/(main)/_components/sidebar.tsx

"use client";

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

export const Sidebar = () => {
  return (
    <div className="w-[60px] h-full fixed z-10 bg-slate-700 p-2 flex flex-col gap-y-3">
      <NewOrgButton />
    </div>
  );
};

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

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-75 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>
  );
};

【#７Create Organization Button】

Discussion