【NextJs + BetterAuth + Polar】Subcription サブスクサービスの実装【#8 Logout Btns】

【#8 Logout Button】
YouTube: https://youtu.be/9skW9BDo5s0
https://youtu.be/9skW9BDo5s0

今回はトップページに今回必要なボタンを作成していきます。

app/page.tsx

import { headers } from "next/headers";
import { redirect } from "next/navigation";

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

export default async function Home() {
  const session = await auth.api.getSession({
    headers: await headers(),
  });

  if (!session) {
    redirect("/sign-in");
  }

  return (
    <div className="w-full h-svh flex items-center justify-center">
      {/* <SubscriptionButtons /> */}
    </div>
  );
}

components/features/home/subscription-buttons.tsx

"use client";

import { CreditCardIcon, ListIcon, LogOutIcon } from "lucide-react";

import { authClient } from "@/lib/auth-client";
import { useSafeLogout } from "@/hooks/use-safe-logout";

import { Button } from "@/components/ui/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";

export const SubscriptionButtons = () => {
  const { logout, isLoading: loadingLogout } = useSafeLogout();

  return (
    <div className="flex flex-col justify-center items-center">
      <Card>
        <CardHeader>
          <CardTitle className="text-center">Polar Checkout</CardTitle>
          <CardDescription>
            <Badge className="w-full p-2 rounded-lg">Free Plan</Badge>
          </CardDescription>
        </CardHeader>
        <CardContent>
          <div className="w-full flex flex-col justify-center items-center gap-y-4">
            <Button disabled={false} onClick={() => {}} className="w-full">
              <CreditCardIcon className="size-4" />
              <span>Upgrade to Pro</span>
            </Button>
            <Button disabled={false} onClick={() => {}} className="w-full">
              <ListIcon className="size-4" />
              <span>Check Portal</span>
            </Button>
            <Button
              disabled={loadingLogout}
              onClick={logout}
              className="w-full"
            >
              <LogOutIcon className="size-4" />
              <span>Log out</span>
            </Button>
          </div>
        </CardContent>
      </Card>
    </div>
  );
};