Premier commit de la v2 de l'app
This commit is contained in:
UltraLionFr
@@ -0,0 +1,87 @@
|
||||
'use client';
|
||||
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const TAGS = [
|
||||
{ id: 'spawn', label: 'Spawn', cls: 'bg-purple-700/30 text-purple-300' },
|
||||
{ id: 'build', label: 'Build', cls: 'bg-emerald-600/25 text-emerald-300' },
|
||||
{ id: 'usine', label: 'Usine', cls: 'bg-orange-600/20 text-orange-300' },
|
||||
];
|
||||
|
||||
export default function AProposPage() {
|
||||
return (
|
||||
<main className="flex min-h-screen flex-col bg-[#0e0e10]">
|
||||
<section className="mx-auto w-full max-w-4xl flex-1 px-4 py-16 text-gray-200">
|
||||
<motion.h1
|
||||
className="relative mb-10 text-4xl font-extrabold tracking-tight text-red-600"
|
||||
initial={{ opacity: 0, y: -20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: .6 }}
|
||||
>
|
||||
À propos
|
||||
</motion.h1>
|
||||
|
||||
<motion.div
|
||||
className="space-y-6 leading-relaxed text-lg"
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: .15, duration: .6 }}
|
||||
>
|
||||
<p>
|
||||
Cette application web permet à la communauté du serveur
|
||||
<strong className="text-red-600">Aystone</strong> de référencer, suivre
|
||||
et partager ses projets Minecraft dans les différents mondes :
|
||||
<span className="ml-1 rounded-full bg-emerald-600/25 px-2 py-0.5 text-xs font-semibold text-emerald-300">Overworld</span>,
|
||||
<span className="mx-1 rounded-full bg-red-700/25 px-2 py-0.5 text-xs font-semibold text-red-300">Nether</span>,
|
||||
<span className="rounded-full bg-purple-700/30 px-2 py-0.5 text-xs font-semibold text-purple-300">End</span>.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Le tableau liste : joueur, état, monde, nom, description,
|
||||
coordonnées et tags personnalisés. L’interface responsive et
|
||||
épurée garantit une expérience fluide sur mobile comme sur desktop.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
Sous le capot : <strong>Next 15</strong>, <strong>React 19</strong>,
|
||||
<strong> Tailwind 4</strong> et <strong>Framer Motion</strong> pour les
|
||||
animations. Aucune donnée sensible n’est stockée : on se connecte
|
||||
simplement via discord .
|
||||
<br />
|
||||
Sur le dashboard, vous pouvez ajouter votre pseudo Minecraft dans la section <strong>Infos du compte</strong>
|
||||
</p>
|
||||
|
||||
<section>
|
||||
<h2 className="mb-3 text-2xl font-semibold">Légende des tags</h2>
|
||||
<div className="flex flex-wrap gap-3">
|
||||
{TAGS.map(t => (
|
||||
<span
|
||||
key={t.id}
|
||||
className={`${t.cls} inline-block rounded-full px-3 py-1 text-sm font-semibold`}
|
||||
>
|
||||
{t.label}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section>
|
||||
<h2 className="mb-3 text-2xl font-semibold">Code source</h2>
|
||||
<p>
|
||||
Le projet est entièrement open-source :{" "}
|
||||
<a
|
||||
href="https://github.com/UltraLionfr/aystone-manager"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-orange-400 underline hover:text-orange-500"
|
||||
>
|
||||
dépôt GitHub
|
||||
</a>.
|
||||
Déployé sur <strong>Coolify</strong>.
|
||||
</p>
|
||||
</section>
|
||||
</motion.div>
|
||||
</section>
|
||||
</main>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,11 @@
|
||||
import AdsGalleryClient from "@/components/AdsGalleryClient";
|
||||
import { getAdFiles } from "@/lib/getAds";
|
||||
|
||||
export const metadata = {
|
||||
title: "Galerie des publicités – Aystone",
|
||||
};
|
||||
|
||||
export default async function AdsGalleryPage() {
|
||||
const files = await getAdFiles();
|
||||
return <AdsGalleryClient files={files} />;
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import { handlers } from "@/auth";
|
||||
|
||||
export const { GET, POST } = handlers;
|
||||
@@ -0,0 +1,23 @@
|
||||
import Image from "next/image";
|
||||
|
||||
export const metadata = {
|
||||
title: "Charte des couleurs Minecraft",
|
||||
};
|
||||
export default function CouleursPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0e0e10] text-white px-4 py-12 flex flex-col items-center">
|
||||
<h1 className="text-4xl font-bold mb-6 text-center">
|
||||
🎨 Charte des couleurs Minecraft
|
||||
</h1>
|
||||
<div className="w-full max-w-4xl">
|
||||
<Image
|
||||
src="/charte-couleurs.png"
|
||||
alt="Charte des couleurs Minecraft"
|
||||
width={1000}
|
||||
height={563}
|
||||
className="rounded-xl shadow-xl w-full h-auto"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
LayoutDashboard,
|
||||
PlusCircle,
|
||||
TableProperties,
|
||||
User
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
|
||||
const LINKS = [
|
||||
{ name: "Tableau", href: "/dashboard", icon: LayoutDashboard },
|
||||
{ name: "Profil", href: "/dashboard/profil", icon: User },
|
||||
{ name: "Ajouter", href: "/dashboard/ajouter", icon: PlusCircle },
|
||||
{ name: "Mes Projets", href: "/dashboard/projets", icon: TableProperties },
|
||||
];
|
||||
|
||||
export default function Sidebar() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<aside className="flex flex-col w-56 bg-[#0e0e10]/80 backdrop-blur-lg border-r border-white/10">
|
||||
{/* Liens de navigation */}
|
||||
<nav className="flex-1 px-4 py-6 space-y-1">
|
||||
{LINKS.map(({ name, href, icon: Icon }) => {
|
||||
const active = pathname === href;
|
||||
return (
|
||||
<Link
|
||||
key={href}
|
||||
href={href}
|
||||
className={`
|
||||
group flex items-center gap-3 px-3 py-2 text-sm rounded-lg transition
|
||||
${active
|
||||
? "bg-white/10 border-l-4 border-red-500"
|
||||
: "hover:bg-white/10"}
|
||||
`}
|
||||
>
|
||||
<Icon
|
||||
size={18}
|
||||
className={`
|
||||
flex-shrink-0 transition
|
||||
${active
|
||||
? "text-red-500"
|
||||
: "text-white/60 group-hover:text-white"}
|
||||
`}
|
||||
/>
|
||||
<span
|
||||
className={`transition ${
|
||||
active
|
||||
? "text-red-500"
|
||||
: "text-white/60 group-hover:text-white"
|
||||
}`}
|
||||
>
|
||||
{name}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
type Props = {
|
||||
title: string;
|
||||
value: string | number;
|
||||
icon?: ReactNode;
|
||||
};
|
||||
|
||||
export default function StatCard({ title, value, icon }: Props) {
|
||||
return (
|
||||
<motion.div
|
||||
whileHover={{ translateY: -4, boxShadow: "0 8px 24px rgba(0,0,0,0.4)" }}
|
||||
className="relative rounded-lg bg-white/5 p-6 backdrop-blur
|
||||
ring-1 ring-white/10 transition"
|
||||
>
|
||||
{icon && (
|
||||
<div className="absolute -top-4 right-4 text-4xl opacity-20">
|
||||
{icon}
|
||||
</div>
|
||||
)}
|
||||
<h3 className="text-sm font-medium text-white/70">{title}</h3>
|
||||
<p className="mt-2 text-3xl font-semibold text-white">{value}</p>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,90 @@
|
||||
"use server";
|
||||
|
||||
import { auth } from "@/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export async function createProject(form: FormData) {
|
||||
const session = await auth();
|
||||
if (!session) throw new Error("unauth");
|
||||
|
||||
const currentUser = await prisma.user.findUnique({
|
||||
where: { email: session.user!.email! },
|
||||
});
|
||||
|
||||
const joueur =
|
||||
(form.get("joueur") as string | null)?.trim() ||
|
||||
currentUser?.mcName ||
|
||||
session.user!.name!;
|
||||
|
||||
const coords = form.get("coords")?.toString().trim();
|
||||
const tagsRaw = form.get("tags")?.toString() ?? "";
|
||||
|
||||
const data = {
|
||||
joueur,
|
||||
etat: (form.get("etat") as string) ?? "En cours",
|
||||
monde: (form.get("monde") as string) ?? "Overworld",
|
||||
projet: (form.get("projet") as string).trim(),
|
||||
description: (form.get("description") as string).trim(),
|
||||
coords: coords && coords.length > 0 ? coords : null,
|
||||
tags: tagsRaw
|
||||
.split(",")
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean),
|
||||
};
|
||||
|
||||
await prisma.project.create({ data });
|
||||
revalidatePath("/dashboard");
|
||||
redirect("/dashboard");
|
||||
}
|
||||
|
||||
export async function updateProject(projectId: string, form: FormData) {
|
||||
const session = await auth();
|
||||
if (!session) throw new Error("unauth");
|
||||
|
||||
const coords = form.get("coords")?.toString().trim();
|
||||
const tagsRaw = form.get("tags")?.toString() ?? "";
|
||||
|
||||
const data = {
|
||||
etat: (form.get("etat") as string),
|
||||
monde: (form.get("monde") as string),
|
||||
projet: (form.get("projet") as string).trim(),
|
||||
description: (form.get("description") as string).trim(),
|
||||
coords: coords && coords.length > 0 ? coords : null,
|
||||
tags: tagsRaw
|
||||
.split(",")
|
||||
.map((t) => t.trim())
|
||||
.filter(Boolean),
|
||||
};
|
||||
|
||||
await prisma.project.update({
|
||||
where: { id: projectId },
|
||||
data,
|
||||
});
|
||||
|
||||
revalidatePath("/dashboard");
|
||||
redirect("/dashboard");
|
||||
}
|
||||
|
||||
export async function updateMinecraftName(form: FormData) {
|
||||
const session = await auth();
|
||||
if (!session) throw new Error("unauth");
|
||||
|
||||
const mcName = (form.get("mcName") as string).trim();
|
||||
if (!/^[A-Za-z0-9_]{3,16}$/.test(mcName)) throw new Error("invalid");
|
||||
|
||||
await prisma.user.upsert({
|
||||
where: { email: session.user!.email! },
|
||||
update: { mcName },
|
||||
create: {
|
||||
email: session.user!.email!,
|
||||
name: session.user!.name,
|
||||
image: session.user!.image,
|
||||
mcName,
|
||||
},
|
||||
});
|
||||
|
||||
revalidatePath("/dashboard");
|
||||
revalidatePath("/");
|
||||
}
|
||||
@@ -0,0 +1,192 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Layers3, MapPin, Plus, Tags, User, X } from "lucide-react";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useState } from "react";
|
||||
import { createProject } from "../actions";
|
||||
|
||||
const PREDEF = ["build", "usine", "spawn"] as const;
|
||||
type TagColor = (typeof PREDEF)[number];
|
||||
|
||||
const palette: Record<TagColor, string> = {
|
||||
build: "bg-emerald-600/90",
|
||||
usine: "bg-orange-600/90",
|
||||
spawn: "bg-fuchsia-700/90",
|
||||
};
|
||||
|
||||
const isValidCoord = (value: string) => /^-?\d*$/.test(value);
|
||||
|
||||
export default function AddProjectForm() {
|
||||
const { data: session } = useSession();
|
||||
const [tags, setTags] = useState<string[]>([]);
|
||||
const [tagInput, setInput] = useState("");
|
||||
|
||||
const [x, setX] = useState("");
|
||||
const [y, setY] = useState("");
|
||||
const [z, setZ] = useState("");
|
||||
|
||||
const addTag = (t: string) => {
|
||||
const val = t.trim().toLowerCase();
|
||||
if (!val || tags.includes(val) || tags.length >= 5) return;
|
||||
setTags([...tags, val]);
|
||||
};
|
||||
|
||||
const del = (t: string) => setTags(tags.filter((x) => x !== t));
|
||||
|
||||
const getTagClass = (t: string) => {
|
||||
return palette[t as TagColor] ?? "bg-gray-600";
|
||||
};
|
||||
|
||||
return (
|
||||
<motion.form
|
||||
action={createProject}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="max-w-xl mx-auto bg-gray-800/60 rounded-xl shadow-lg p-6 space-y-6"
|
||||
>
|
||||
{/* nom */}
|
||||
<div className="relative">
|
||||
<Layers3 className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
||||
<input
|
||||
name="projet"
|
||||
placeholder="Nom du projet"
|
||||
required
|
||||
className="w-full rounded-lg bg-gray-700 py-2 pl-10 pr-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* joueur */}
|
||||
{session?.user?.email === "ultralionfr@gmail.com" && (
|
||||
<div className="relative">
|
||||
<User className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={18} />
|
||||
<input
|
||||
name="joueur"
|
||||
placeholder="Pseudo Minecraft"
|
||||
required
|
||||
className="w-full rounded-lg bg-gray-700 py-2 pl-10 pr-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* coords */}
|
||||
<div className="grid grid-cols-3 gap-3">
|
||||
{[
|
||||
{ name: "x", value: x, setValue: setX },
|
||||
{ name: "y", value: y, setValue: setY },
|
||||
{ name: "z", value: z, setValue: setZ },
|
||||
].map(({ name, value, setValue }) => (
|
||||
<div className="relative" key={name}>
|
||||
<MapPin className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400" size={16} />
|
||||
<input
|
||||
name={name}
|
||||
placeholder={name.toUpperCase()}
|
||||
value={value}
|
||||
onChange={(e) => {
|
||||
if (isValidCoord(e.target.value)) setValue(e.target.value);
|
||||
}}
|
||||
className="w-full rounded-lg bg-gray-700 py-2 pl-9 pr-3 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-1 text-sm text-gray-300">
|
||||
<Tags size={16} /> Tags <span className="text-xs text-gray-400">(max 5)</span>
|
||||
</label>
|
||||
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tags.map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
type="button"
|
||||
onClick={() => del(t)}
|
||||
className={`rounded-full px-3 py-1 text-xs ${getTagClass(t)} text-white flex items-center gap-1 hover:opacity-80`}
|
||||
>
|
||||
{t} <X size={12} />
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<select
|
||||
onChange={(e) => {
|
||||
addTag(e.target.value);
|
||||
e.target.value = "";
|
||||
}}
|
||||
className="w-full sm:w-1/2 rounded-lg bg-gray-700 py-2 px-3 text-white focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
defaultValue=""
|
||||
>
|
||||
<option value="">Choisir un tag pré-défini</option>
|
||||
{PREDEF.map((t) => (
|
||||
<option key={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
<div className="relative flex-1">
|
||||
<input
|
||||
value={tagInput}
|
||||
onChange={(e) => setInput(e.target.value)}
|
||||
onKeyDown={(e) =>
|
||||
e.key === "Enter" && (e.preventDefault(), addTag(tagInput), setInput(""))
|
||||
}
|
||||
placeholder="Ajouter un tag personnalisé"
|
||||
className="w-full rounded-lg bg-gray-700 py-2 pl-3 pr-12 text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
addTag(tagInput);
|
||||
setInput("");
|
||||
}}
|
||||
className="absolute right-1 top-1 rounded-lg bg-indigo-500 hover:bg-indigo-600 p-1"
|
||||
>
|
||||
<Plus size={16} className="text-white" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* description */}
|
||||
<textarea
|
||||
name="description"
|
||||
rows={4}
|
||||
placeholder="Description du projet"
|
||||
className="w-full rounded-lg bg-gray-700 p-3 text-white placeholder-gray-400 resize-y focus:outline-none focus:ring-2 focus:ring-indigo-500"
|
||||
/>
|
||||
|
||||
{/* état + monde */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<select name="etat" className="input-style bg-gray-700 text-white">
|
||||
<option>En cours</option>
|
||||
<option>Terminé</option>
|
||||
<option>Pause</option>
|
||||
</select>
|
||||
<select name="monde" className="input-style bg-gray-700 text-white">
|
||||
<option>Overworld</option>
|
||||
<option>Nether</option>
|
||||
<option>End</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* hidden */}
|
||||
<input type="hidden" name="tags" value={tags.join(",")} />
|
||||
<input type="hidden" name="coords" id="coordsField" value="" />
|
||||
|
||||
{/* submit */}
|
||||
<button
|
||||
type="submit"
|
||||
className="cursor-pointer w-full rounded-lg bg-gradient-to-r from-green-500 to-emerald-500 py-3 text-white font-semibold shadow-md hover:shadow-lg transition duration-300"
|
||||
onClick={(e) => {
|
||||
const form = (e.target as HTMLButtonElement).form!;
|
||||
const coordsField = form.coords as HTMLInputElement;
|
||||
coordsField.value = [form.x.value, form.y.value, form.z.value].filter(Boolean).join(" ");
|
||||
}}
|
||||
>
|
||||
Ajouter le projet
|
||||
</button>
|
||||
</motion.form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
import { auth } from "@/auth";
|
||||
import { redirect } from "next/navigation";
|
||||
import AddProjectForm from "./AddProjectForm";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const metadata = { title: "Ajouter un projet | Dashboard" };
|
||||
|
||||
export default async function AddProjectPage() {
|
||||
const session = await auth();
|
||||
if (!session) redirect("/");
|
||||
|
||||
return (
|
||||
<section className="mx-auto max-w-xl px-4 py-10">
|
||||
<div className="">
|
||||
<h1 className="text-xl font-semibold text-red-400">
|
||||
Ajouter un projet
|
||||
</h1><br />
|
||||
<AddProjectForm />
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
import Providers from "@/app/providers";
|
||||
import Sidebar from "./Sidebar";
|
||||
|
||||
export const metadata = { title: "Dashboard | Aystone" };
|
||||
|
||||
export default function DashboardLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<Providers>
|
||||
<div className="flex min-h-screen bg-[#0e0e10] text-white">
|
||||
<Sidebar />
|
||||
<main className="flex-1 p-6">{children}</main>
|
||||
</div>
|
||||
</Providers>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,45 @@
|
||||
import { auth } from "@/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { Info } from "lucide-react";
|
||||
import { redirect } from "next/navigation";
|
||||
import StatCard from "./StatCard";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const revalidate = 0;
|
||||
|
||||
export default async function DashboardHome() {
|
||||
const session = await auth();
|
||||
if (!session) return redirect("/");
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { email: session.user!.email! },
|
||||
});
|
||||
|
||||
const joueur = user?.mcName ?? session.user!.name!;
|
||||
|
||||
const [projectCount, userCount] = await Promise.all([
|
||||
prisma.project.count({ where: { joueur } }),
|
||||
prisma.user.count(),
|
||||
]);
|
||||
|
||||
return (
|
||||
<div className="p-6 space-y-8">
|
||||
<h1 className="text-4xl font-bold tracking-tight">Tableau de bord</h1>
|
||||
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4 flex items-start gap-3">
|
||||
<Info className="h-6 w-6 text-blue-600" />
|
||||
<div>
|
||||
<h2 className="font-semibold text-blue-800">Important</h2>
|
||||
<p className="text-blue-700">
|
||||
Pensez à compléter votre profil avec votre pseudo Minecraft pour pouvoir créer et associer vos projets à votre compte.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-6">
|
||||
<StatCard title="Mes projets" value={projectCount} />
|
||||
<StatCard title="Membres inscrits" value={userCount} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,77 @@
|
||||
import { auth } from "@/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import Image from "next/image";
|
||||
import { redirect } from "next/navigation";
|
||||
import { updateMinecraftName } from "../actions";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
export const metadata = { title: "Profil | Dashboard" };
|
||||
|
||||
export default async function ProfilPage() {
|
||||
const session = await auth();
|
||||
if (!session) redirect("/");
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { email: session.user!.email! },
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="mx-auto max-w-lg px-4 py-10">
|
||||
<h1 className="mb-6 text-2xl font-bold">Profil</h1>
|
||||
|
||||
<div className="card space-y-8">
|
||||
{/* avatar Discord */}
|
||||
<div className="flex items-center gap-4">
|
||||
<Image
|
||||
src={session.user?.image ?? ""}
|
||||
alt=""
|
||||
width={56}
|
||||
height={56}
|
||||
className="rounded-full"
|
||||
/>
|
||||
<div>
|
||||
<p className="text-lg font-semibold">{session.user?.name}</p>
|
||||
<p className="text-sm text-white/60">{session.user?.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* pseudo Minecraft */}
|
||||
<form action={updateMinecraftName} className="space-y-4">
|
||||
<label className="mb-1 block text-sm text-white/70">
|
||||
Pseudo Minecraft
|
||||
</label>
|
||||
|
||||
<div className="relative w-full max-w-md">
|
||||
{user?.mcName && (
|
||||
<Image
|
||||
src={`https://mc-heads.net/avatar/${user.mcName}/28`}
|
||||
alt=""
|
||||
width={28}
|
||||
height={28}
|
||||
className="absolute left-2 top-1/2 -translate-y-1/2 rounded"
|
||||
unoptimized
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* padding-left 48 px pour laisser la place à l’avatar */}
|
||||
<input
|
||||
name="mcName"
|
||||
defaultValue={user?.mcName ?? ""}
|
||||
placeholder="Pseudo MC"
|
||||
required
|
||||
pattern="[A-Za-z0-9_]{3,16}"
|
||||
className="input pl-12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
className="rounded bg-indigo-600 px-4 py-2 text-sm font-medium hover:bg-indigo-700"
|
||||
>
|
||||
Enregistrer
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
"use client";
|
||||
|
||||
import { SafeProject } from "@/lib/validators/project";
|
||||
import { motion } from "framer-motion";
|
||||
import {
|
||||
BadgeCheck,
|
||||
FileText,
|
||||
Globe,
|
||||
MapPin,
|
||||
Pencil,
|
||||
Tag,
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function UserProjectsTable({ projects }: { projects: SafeProject[] }) {
|
||||
const headers = [
|
||||
{ label: "Projet", icon: FileText },
|
||||
{ label: "État", icon: BadgeCheck },
|
||||
{ label: "Monde", icon: Globe },
|
||||
{ label: "Coordonnées", icon: MapPin },
|
||||
{ label: "Tags", icon: Tag },
|
||||
{ label: "Actions", icon: Pencil },
|
||||
];
|
||||
|
||||
return (
|
||||
<section className="mx-auto max-w-6xl px-4 py-10">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4 }}
|
||||
className="flex items-center justify-between mb-6"
|
||||
>
|
||||
<h1 className="text-2xl font-bold text-white">Mes projets</h1>
|
||||
<Link
|
||||
href="/dashboard/ajouter"
|
||||
className="inline-flex items-center gap-2 rounded bg-green-600 px-3 py-1.5 text-sm font-medium hover:bg-green-700"
|
||||
>
|
||||
➕ Ajouter un projet
|
||||
</Link>
|
||||
</motion.div>
|
||||
|
||||
{projects.length === 0 ? (
|
||||
<p className="mt-6 text-center text-white/60">Vous n’avez encore créé aucun projet.</p>
|
||||
) : (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, delay: 0.1 }}
|
||||
className="overflow-x-auto rounded-t-2xl"
|
||||
>
|
||||
<table className="w-full border-collapse text-left text-[13px]">
|
||||
<thead>
|
||||
<tr className="bg-slate-800 text-amber-50 [&>th:first-child]:rounded-tl-xl [&>th:last-child]:rounded-tr-xl">
|
||||
{headers.map(({ label, icon: Icon }) => (
|
||||
<th key={label} className="px-3 py-2 font-semibold">
|
||||
<div className="flex items-center gap-1">
|
||||
<Icon size={14} className="opacity-70" />
|
||||
{label}
|
||||
</div>
|
||||
</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{projects.map((p) => (
|
||||
<tr key={p.id} className="bg-[#0f111c]">
|
||||
<td className="px-3 py-2">{p.projet}</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={`rounded-full px-2 py-0.5 text-[11px] font-medium ${
|
||||
p.etat === "En cours" ? "bg-yellow-400/90 text-black" :
|
||||
p.etat === "Terminé" ? "bg-green-600/90" : "bg-red-600/90"
|
||||
}`}>{p.etat}</span>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<span className={`rounded-full px-2 py-0.5 text-[11px] ${
|
||||
p.monde === "Overworld" ? "bg-emerald-700/80" :
|
||||
p.monde === "Nether" ? "bg-red-700/80" : "bg-violet-800/90"
|
||||
}`}>{p.monde}</span>
|
||||
</td>
|
||||
<td className="px-3 py-2 font-mono tabular-nums">{p.coords ?? "—"}</td>
|
||||
<td className="px-3 py-2">
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{p.tags.map((t, i) => (
|
||||
<span key={t + i} className="rounded-full bg-white/10 px-2 py-0.5 text-xs">
|
||||
{t}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</td>
|
||||
<td className="px-3 py-2">
|
||||
<Link
|
||||
href={`/dashboard/projets/${p.id}`}
|
||||
className="inline-flex items-center gap-1 rounded px-2 py-1 text-xs text-indigo-400 hover:bg-white/10"
|
||||
>
|
||||
<Pencil size={12} /> Modifier
|
||||
</Link>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</motion.div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,165 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Layers3, MapPin, Tags } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { Project } from "../../../../components/ProjectsTable";
|
||||
import { updateProject } from "../../actions";
|
||||
|
||||
type Props = {
|
||||
project: Project;
|
||||
};
|
||||
|
||||
/** Formulaire client pour éditer un projet existant */
|
||||
export default function EditProjectForm({ project }: Props) {
|
||||
const [tags, setTags] = useState<string[]>(project.tags ?? []);
|
||||
const [customTag, setCustomTag] = useState("");
|
||||
|
||||
const PREDEF = ["build", "usine", "spawn"] as const;
|
||||
|
||||
const addTag = (t: string) => {
|
||||
const val = t.trim().toLowerCase();
|
||||
if (!val || tags.includes(val) || tags.length >= 5) return;
|
||||
setTags([...tags, val]);
|
||||
};
|
||||
|
||||
const removeTag = (t: string) => {
|
||||
setTags(tags.filter((x) => x !== t));
|
||||
};
|
||||
|
||||
const coordsParts = (project.coords ?? "").split(" ");
|
||||
|
||||
return (
|
||||
<motion.form
|
||||
action={(formData: FormData) => updateProject(project.id!, formData)}
|
||||
initial={{ opacity: 0, y: 12 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="space-y-6"
|
||||
>
|
||||
{/* Titre du projet */}
|
||||
<div className="relative">
|
||||
<Layers3 size={18} className="absolute left-3 top-3 text-white/40" />
|
||||
<input
|
||||
name="projet"
|
||||
defaultValue={project.projet}
|
||||
placeholder="Titre du projet"
|
||||
required
|
||||
className="input pl-10"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Coordonnées X Y Z */}
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
{["X", "Y", "Z"].map((axis, idx) => (
|
||||
<div key={axis} className="relative">
|
||||
<MapPin size={16} className="absolute left-3 top-3 text-white/40" />
|
||||
<input
|
||||
name={axis.toLowerCase()}
|
||||
defaultValue={coordsParts[idx] ?? ""}
|
||||
placeholder={axis}
|
||||
className="input pl-10"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Description */}
|
||||
<textarea
|
||||
name="description"
|
||||
defaultValue={project.description}
|
||||
rows={4}
|
||||
placeholder="Description détaillée"
|
||||
className="input w-full resize-y"
|
||||
/>
|
||||
|
||||
{/* État & Monde */}
|
||||
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
||||
<select name="etat" defaultValue={project.etat} className="input">
|
||||
<option>En cours</option>
|
||||
<option>Terminé</option>
|
||||
<option>Pause</option>
|
||||
</select>
|
||||
<select name="monde" defaultValue={project.monde} className="input">
|
||||
<option>Overworld</option>
|
||||
<option>Nether</option>
|
||||
<option>End</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div className="space-y-2">
|
||||
<label className="flex items-center gap-2 text-sm text-white/70">
|
||||
<Tags size={16} /> Tags (max 5)
|
||||
</label>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{tags.map((t) => (
|
||||
<button
|
||||
key={t}
|
||||
type="button"
|
||||
onClick={() => removeTag(t)}
|
||||
className="rounded-full bg-slate-700/70 px-2 py-0.5 text-xs hover:bg-red-600/80"
|
||||
>
|
||||
{t} ✕
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<select
|
||||
onChange={(e) => {
|
||||
addTag(e.target.value);
|
||||
e.target.value = "";
|
||||
}}
|
||||
className="input flex-1"
|
||||
defaultValue=""
|
||||
>
|
||||
<option value="">Tag prédéfini</option>
|
||||
{PREDEF.map((t) => (
|
||||
<option key={t}>{t}</option>
|
||||
))}
|
||||
</select>
|
||||
<input
|
||||
value={customTag}
|
||||
onChange={(e) => setCustomTag(e.target.value)}
|
||||
onKeyDown={(e) =>
|
||||
e.key === "Enter" &&
|
||||
(e.preventDefault(), addTag(customTag), setCustomTag(""))
|
||||
}
|
||||
placeholder="Ajouter tag..."
|
||||
className="input flex-1"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
addTag(customTag);
|
||||
setCustomTag("");
|
||||
}}
|
||||
className="rounded bg-indigo-600 px-4 py-2 text-sm hover:bg-indigo-700"
|
||||
>
|
||||
Ajouter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Champs cachés */}
|
||||
<input type="hidden" name="tags" value={tags.join(",")} />
|
||||
<input type="hidden" name="coords" value="" />
|
||||
|
||||
{/* Bouton de soumission */}
|
||||
<button
|
||||
type="submit"
|
||||
className="w-full rounded-full bg-gradient-to-r from-green-500 to-emerald-600 py-2.5 font-semibold shadow hover:brightness-110"
|
||||
onClick={(e) => {
|
||||
const f = (e.target as HTMLButtonElement).form!;
|
||||
const x = (f.x as HTMLInputElement).value;
|
||||
const y = (f.y as HTMLInputElement).value;
|
||||
const z = (f.z as HTMLInputElement).value;
|
||||
(f.coords as HTMLInputElement).value = [x, y, z]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
}}
|
||||
>
|
||||
Mettre à jour le projet
|
||||
</button>
|
||||
</motion.form>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { auth } from "@/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
import { z } from "zod";
|
||||
import EditProjectForm from "./EditProjectForm";
|
||||
|
||||
type Props = { params: { id: string } };
|
||||
|
||||
// Définition stricte du schéma
|
||||
const ProjectSchema = z.object({
|
||||
id: z.string(),
|
||||
joueur: z.string(),
|
||||
projet: z.string(),
|
||||
description: z.string(),
|
||||
coords: z.string().nullable().transform((val) => val ?? ""),
|
||||
tags: z.string().array(),
|
||||
etat: z.enum(["En cours", "Terminé", "Pause"]),
|
||||
monde: z.enum(["Overworld", "Nether", "End"]),
|
||||
createdAt: z.date(),
|
||||
});
|
||||
|
||||
export default async function EditProjectPage({ params }: Props) {
|
||||
const session = await auth();
|
||||
if (!session) redirect("/");
|
||||
|
||||
const data = await prisma.project.findUnique({
|
||||
where: { id: params.id },
|
||||
});
|
||||
|
||||
if (!data) notFound();
|
||||
|
||||
// ✅ Cast via zod
|
||||
const project = ProjectSchema.parse(data);
|
||||
|
||||
return (
|
||||
<section className="mx-auto max-w-xl px-4 py-10">
|
||||
<h1 className="text-2xl font-bold mb-6">Modifier le projet</h1>
|
||||
<EditProjectForm project={project} />
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import { auth } from "@/auth";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { redirect } from "next/navigation";
|
||||
import { z } from "zod";
|
||||
import UserProjectsTable from "./UserProjectsTable";
|
||||
|
||||
// Définition stricte du schéma
|
||||
const ProjectSchema = z.object({
|
||||
id: z.string(),
|
||||
joueur: z.string(),
|
||||
projet: z.string(),
|
||||
description: z.string(),
|
||||
coords: z.string().nullable(),
|
||||
tags: z.string().array(),
|
||||
etat: z.enum(["En cours", "Terminé", "Pause"]),
|
||||
monde: z.enum(["Overworld", "Nether", "End"]),
|
||||
createdAt: z.date(),
|
||||
});
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function UserProjectsPage() {
|
||||
const session = await auth();
|
||||
if (!session) redirect("/");
|
||||
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { email: session.user.email! },
|
||||
});
|
||||
|
||||
const joueur = user?.mcName ?? session.user.name!;
|
||||
|
||||
const projectsRaw = await prisma.project.findMany({
|
||||
where: { joueur },
|
||||
orderBy: { createdAt: "desc" },
|
||||
});
|
||||
|
||||
// ✅ Valide les projets pour forcer le bon typage
|
||||
const projects = projectsRaw.map((p) => ProjectSchema.parse(p));
|
||||
|
||||
return <UserProjectsTable projects={projects} />;
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
+9
-40
@@ -1,42 +1,11 @@
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
}
|
||||
@import "tailwindcss";
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html {
|
||||
color-scheme: dark;
|
||||
}
|
||||
.input {
|
||||
@apply w-full rounded-md bg-[#20222e] px-10 py-2.5 text-sm text-white
|
||||
placeholder-white/40 ring-1 ring-white/10 outline-none
|
||||
focus:ring-2 focus:ring-indigo-500 transition;
|
||||
}
|
||||
.card {
|
||||
@apply rounded-2xl bg-[#111320]/70 p-8 ring-1 ring-white/10 backdrop-blur
|
||||
shadow-[0_6px_20px_rgba(0,0,0,0.45)];
|
||||
}
|
||||
+18
-20
@@ -1,32 +1,30 @@
|
||||
import Providers from "@/app/providers";
|
||||
import AdsSideBanners from "@/components/AdsSideBanners";
|
||||
import Footer from "@/components/Footer";
|
||||
import Navbar from "@/components/Navbar";
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
title: "Aystone - Instance Cobble",
|
||||
description: "Site communautaire Aystone",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`${geistSans.variable} ${geistMono.variable}`}>
|
||||
{children}
|
||||
<html lang="fr">
|
||||
<body className="bg-[#0e0e10] text-white antialiased">
|
||||
<AdsSideBanners />
|
||||
<Providers>
|
||||
<Navbar />
|
||||
<main className="min-h-screen">{children}</main>
|
||||
<Footer />
|
||||
</Providers>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
"use client";
|
||||
import { signIn, useSession } from "next-auth/react";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function LoginPage() {
|
||||
const { data: session } = useSession();
|
||||
|
||||
useEffect(() => {
|
||||
if (session) window.location.replace("/dashboard");
|
||||
else signIn("discord", { callbackUrl: "/dashboard" });
|
||||
}, [session]);
|
||||
|
||||
return <p className="p-8 text-center">Redirection vers Discord…</p>;
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
import MapsClient from "@/components/MapsClient";
|
||||
|
||||
export const metadata = {
|
||||
title: "Carte dynamique | Aystone",
|
||||
};
|
||||
|
||||
export default function MapsPage() {
|
||||
return <MapsClient />;
|
||||
}
|
||||
@@ -0,0 +1,32 @@
|
||||
"use client";
|
||||
|
||||
import { motion } from "framer-motion";
|
||||
import { Frown } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-[#0f1117] px-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 15 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ duration: 0.4, ease: "easeOut" }}
|
||||
className="text-center max-w-md"
|
||||
>
|
||||
<div className="mb-4 flex justify-center">
|
||||
<Frown className="h-12 w-12 text-red-500" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white mb-2">404 — Page introuvable</h1>
|
||||
<p className="text-white/70 mb-6">
|
||||
La page que tu cherches n'existe pas ou a été déplacée.
|
||||
</p>
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-block rounded-lg bg-red-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-red-600"
|
||||
>
|
||||
Retour à l'accueil
|
||||
</Link>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import OutilsPage from "@/components/OutilsPage";
|
||||
import { Metadata } from "next";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Outils | Aystone",
|
||||
};
|
||||
|
||||
export default function Page() {
|
||||
return <OutilsPage />;
|
||||
}
|
||||
@@ -1,167 +0,0 @@
|
||||
.page {
|
||||
--gray-rgb: 0, 0, 0;
|
||||
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
|
||||
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
|
||||
|
||||
--button-primary-hover: #383838;
|
||||
--button-secondary-hover: #f2f2f2;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: 20px 1fr 20px;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
min-height: 100svh;
|
||||
padding: 80px;
|
||||
gap: 64px;
|
||||
font-family: var(--font-geist-sans);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.page {
|
||||
--gray-rgb: 255, 255, 255;
|
||||
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
|
||||
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
|
||||
|
||||
--button-primary-hover: #ccc;
|
||||
--button-secondary-hover: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
.main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 32px;
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.main ol {
|
||||
font-family: var(--font-geist-mono);
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
letter-spacing: -0.01em;
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
.main li:not(:last-of-type) {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.main code {
|
||||
font-family: inherit;
|
||||
background: var(--gray-alpha-100);
|
||||
padding: 2px 4px;
|
||||
border-radius: 4px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.ctas {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.ctas a {
|
||||
appearance: none;
|
||||
border-radius: 128px;
|
||||
height: 48px;
|
||||
padding: 0 20px;
|
||||
border: 1px solid transparent;
|
||||
transition:
|
||||
background 0.2s,
|
||||
color 0.2s,
|
||||
border-color 0.2s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
a.primary {
|
||||
background: var(--foreground);
|
||||
color: var(--background);
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
a.secondary {
|
||||
border-color: var(--gray-alpha-200);
|
||||
min-width: 158px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-row-start: 3;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.footer img {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Enable hover only on non-touch devices */
|
||||
@media (hover: hover) and (pointer: fine) {
|
||||
a.primary:hover {
|
||||
background: var(--button-primary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
a.secondary:hover {
|
||||
background: var(--button-secondary-hover);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.footer a:hover {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.page {
|
||||
padding: 32px;
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
.main {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main ol {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.ctas {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.ctas a {
|
||||
font-size: 14px;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
a.secondary {
|
||||
min-width: auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.logo {
|
||||
filter: invert();
|
||||
}
|
||||
}
|
||||
+28
-92
@@ -1,95 +1,31 @@
|
||||
import Image from "next/image";
|
||||
import styles from "./page.module.css";
|
||||
import Banner from "@/components/Banner";
|
||||
import ProjectsTable, { Project } from "@/components/ProjectsTable";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import MotionHeading from "../components/MotionHeading";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
export default async function Home() {
|
||||
const rawProjects = await prisma.project.findMany({
|
||||
orderBy: { createdAt: "desc" },
|
||||
});
|
||||
|
||||
const projects: Project[] = rawProjects.map((p) => ({
|
||||
id: p.id,
|
||||
joueur: p.joueur,
|
||||
etat: p.etat as Project["etat"],
|
||||
monde: p.monde as Project["monde"],
|
||||
projet: p.projet,
|
||||
description: p.description,
|
||||
coords: p.coords ?? "",
|
||||
tags: p.tags,
|
||||
}));
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<main className={styles.main}>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol>
|
||||
<li>
|
||||
Get started by editing <code>app/page.tsx</code>.
|
||||
</li>
|
||||
<li>Save and see your changes instantly.</li>
|
||||
</ol>
|
||||
|
||||
<div className={styles.ctas}>
|
||||
<a
|
||||
className={styles.primary}
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className={styles.logo}
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className={styles.secondary}
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className={styles.footer}>
|
||||
<a
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
<>
|
||||
<Banner />
|
||||
<MotionHeading />
|
||||
<ProjectsTable data={projects} />
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
"use client";
|
||||
import { SessionProvider } from "next-auth/react";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
export default function Providers({ children }: { children: ReactNode }) {
|
||||
return <SessionProvider>{children}</SessionProvider>;
|
||||
}
|
||||
@@ -0,0 +1,51 @@
|
||||
import { auth } from "@/auth";
|
||||
import Banner from "@/components/Banner";
|
||||
import ProjectsTable, { Project } from "@/components/ProjectsTable";
|
||||
import { prisma } from "@/lib/prisma";
|
||||
import { notFound, redirect } from "next/navigation";
|
||||
|
||||
type Props = {
|
||||
params: { username: string };
|
||||
};
|
||||
|
||||
export default async function UserProfilePage({ params }: Props) {
|
||||
const session = await auth();
|
||||
if (!session) return redirect("/");
|
||||
|
||||
const username = params.username;
|
||||
const user = await prisma.user.findUnique({
|
||||
where: { mcName: username },
|
||||
});
|
||||
if (!user) return notFound();
|
||||
|
||||
const rawProjects = await prisma.project.findMany({
|
||||
where: { joueur: username },
|
||||
orderBy: { createdAt: "desc" },
|
||||
});
|
||||
|
||||
const projects: Project[] = rawProjects.map((p) => ({
|
||||
id: p.id,
|
||||
joueur: p.joueur,
|
||||
etat: p.etat as Project["etat"],
|
||||
monde: p.monde as Project["monde"],
|
||||
projet: p.projet,
|
||||
description: p.description,
|
||||
coords: p.coords ?? "",
|
||||
tags: p.tags,
|
||||
}));
|
||||
|
||||
return (
|
||||
<section className="p-4">
|
||||
<Banner />
|
||||
<h1 className="text-2xl font-bold text-white text-center">
|
||||
Projets de <span className="text-yellow-300">{username}</span>
|
||||
</h1>
|
||||
|
||||
{projects.length === 0 ? (
|
||||
<p className="mt-4 text-white/60">Aucun projet enregistré.</p>
|
||||
) : (
|
||||
<ProjectsTable data={projects} hidePlayerFilter />
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user