mirror of
https://github.com/arthur-pbty/binouz.git
synced 2026-06-03 15:07:17 +02:00
Puechberty Arthur
b7010a1704
- Implemented AuthButton component for Discord sign-in and sign-out functionality. - Created CopyButton component for copying server IP addresses. - Developed EventCard and GradeCard components for displaying events and grades. - Added Footer and Navbar components for site navigation and information. - Introduced PurchaseButton for handling grade purchases with Stripe integration. - Created SectionHeader component for consistent section titles. - Implemented session management with SessionProvider for NextAuth. - Set up PostgreSQL database with Docker and Prisma for data management. - Added admin guard functionality to restrict access to certain routes. - Configured NextAuth with Discord provider for user authentication. - Defined Prisma schema for user, admin, grade, event, and purchase models. - Seeded database with initial grades and events data. - Added SVG hero image for the landing page. - Extended NextAuth types to include additional user properties.
88 lines
2.9 KiB
TypeScript
88 lines
2.9 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { signIn, signOut, useSession } from "next-auth/react";
|
|
|
|
type AuthButtonProps = {
|
|
className?: string;
|
|
label?: string;
|
|
compact?: boolean;
|
|
};
|
|
|
|
export default function AuthButton({
|
|
className = "",
|
|
label = "Se connecter avec Discord",
|
|
compact = false,
|
|
}: AuthButtonProps) {
|
|
const { data: session, status } = useSession();
|
|
|
|
if (status === "loading") {
|
|
return (
|
|
<div
|
|
className={`inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-xs text-slate-200 ${className}`}
|
|
>
|
|
<span className="h-2 w-2 animate-pulse rounded-full bg-cyan-300" />
|
|
<span>Loading</span>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!session?.user) {
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={() => signIn("discord", { callbackUrl: "/" })}
|
|
className={`inline-flex items-center justify-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-white transition hover:bg-white/10 ${className}`}
|
|
>
|
|
<span className="h-2 w-2 rounded-full bg-cyan-300" />
|
|
<span>{label}</span>
|
|
</button>
|
|
);
|
|
}
|
|
|
|
const avatarUrl = session.user.discordAvatar && session.user.discordId
|
|
? `https://cdn.discordapp.com/avatars/${session.user.discordId}/${session.user.discordAvatar}.png`
|
|
: session.user.image ?? "";
|
|
|
|
return (
|
|
<div
|
|
className={`flex items-center gap-2 ${compact ? "" : "rounded-full border border-white/10 bg-white/5 px-3 py-2"} ${className}`}
|
|
>
|
|
{avatarUrl ? (
|
|
<img
|
|
src={avatarUrl}
|
|
alt={session.user.discordUsername ?? "Discord avatar"}
|
|
className="h-8 w-8 rounded-full border border-white/20 object-cover"
|
|
/>
|
|
) : (
|
|
<div className="h-8 w-8 rounded-full border border-white/20 bg-white/10" />
|
|
)}
|
|
<div className="hidden sm:flex sm:flex-col">
|
|
<span className="text-xs font-semibold text-white">
|
|
{session.user.discordUsername ?? session.user.name ?? "Player"}
|
|
</span>
|
|
<span className="text-[10px] uppercase tracking-[0.2em] text-slate-400">
|
|
{session.user.isAdmin ? "Admin" : "Connected"}
|
|
</span>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
{session.user.isAdmin ? (
|
|
<Link
|
|
href="/admin"
|
|
className="rounded-full border border-white/10 px-3 py-1 text-[10px] uppercase tracking-[0.25em] text-cyan-200/90 transition hover:border-cyan-300/40"
|
|
>
|
|
Admin
|
|
</Link>
|
|
) : null}
|
|
<button
|
|
type="button"
|
|
onClick={() => signOut({ callbackUrl: "/" })}
|
|
className="rounded-full border border-white/10 px-3 py-1 text-[10px] uppercase tracking-[0.25em] text-white/80 transition hover:border-white/30"
|
|
>
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|