【NextJs14】NextJs14 と 便利なライブラリ【#３５Clerk Organization Switcher】

【#３５Clerk Organization Switcher】

YouTube: https://youtu.be/ur_cAX5_eGw

https://youtu.be/ur_cAX5_eGw

今回は前回設定したOrganizationをアプリに表示します。

app/(main)/account/page.tsx

import { formatDistanceToNow } from "date-fns";

import { db } from "@/lib/db";

import { Separator } from "@/components/ui/separator";

import { TodoForm } from "./_components/todo-form";
import { TodoActions } from "./_components/todo-actions";
import { OrgNavbar } from "./_components/org-navbar";

const getTodos = async () => {
  const todos = await db.todo.findMany({
    orderBy: {
      createdAt: "asc",
    },
  });
  return todos;
};

const AccountPage = async () => {
  const todos = await getTodos();

  return (
    <div className="p-6 w-full h-full">
      <div className="w-full h-full flex flex-col gap-y-3">
        <OrgNavbar />
        <div className="flex flex-col md:flex-row items-center justify-between gap-2">
          <h2 className="text-center md:text-left text-3xl font-bold">Todos</h2>
          <TodoForm />
        </div>
        <Separator />
        <ul className="w-full space-y-3">
          {todos.map((todo, idx) => (
            <li
              key={todo.id}
              className="flex flex-col md:flex-row items-center justify-between gap-x-4 gap-y-2"
            >
              <div className="flex flex-col md:flex-row flex-1 items-center justify-between gap-x-3">
                <p className="text-xl font-semibold">
                  <span className="pr-2">{idx + 1}</span>
                  <span className={todo.isCompleted ? "line-through" : ""}>
                    {todo.title}
                  </span>
                </p>
                <p>
                  {formatDistanceToNow(todo.createdAt, { addSuffix: true })}
                </p>
              </div>
              <TodoActions todoId={todo.id} isCompleted={todo.isCompleted} />
            </li>
          ))}
        </ul>
      </div>
    </div>
  );
};

export default AccountPage;

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

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

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",
              },
            },
          },
        }}
      />
    </div>
  );
};