Merge pull request #5 from Awakno/feat/join-server

Ajout page /rejoindre avec l'IP du serveur

Author: AxenoDev

.gitignore

@@ -39,3 +39,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+yarn.lock

app/join/page.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+import { useState } from "react";
+import Logo from "@/public/branding/logoomc.png";
+import { HomeIcon } from "lucide-react";
+
+export default function Page() {
+  const [copied, setCopied] = useState(false);
+  const serverIP = "play.openmc.fr";
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(serverIP).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen px-4">
+      <Image
+        src={Logo}
+        alt="Logo du serveur"
+        width={120}
+        height={120}
+        className="mb-6"
+      />
+      <h1 className="text-5xl font-extrabold text-center text-gray-800 dark:text-gray-100">
+        Rejoindre le Serveur Minecraft
+      </h1>
+      <p className="mt-4 text-lg text-center text-gray-600 dark:text-gray-400">
+        Connecte-toi et viens construire avec nous ! 🎮
+      </p>
+
+      <div className="mt-8 bg-primary/70 dark:bg-primary/10 text-white rounded-xl shadow-2xl p-6 w-full max-w-md">
+        <h2 className="text-2xl font-bold text-center mb-4">
+          Adresse du serveur
+        </h2>
+        <div className="dark:bg-black bg-white rounded-md p-4 font-mono text-lg dark:text-white text-black text-left border border-gray-700 mb-4">
+          {serverIP}
+        </div>
+        <button
+          onClick={handleCopy}
+          className="w-full bg-primary/100 hover:bg-primary/80 text-white font-semibold py-2 rounded transition"
+        >
+          {copied ? "Copié !" : "Copier l'IP"}
+        </button>
+      </div>
+
+    <Link
+      href="/"
+      className="mt-10 px-4 py-2 dark:bg-white bg-black dark:text-black text-white rounded dark:hover:bg-gray-100 hover:bg-gray-900 transition duration-200 flex items-center justify-center"
+    >
+      <HomeIcon className="inline-block mr-2" size={16} />
+      Retour à l&apos;accueil
+    </Link>
+    </div>
+  );
+}

components/home/header.tsx

@@ -1,12 +1,16 @@
+"use client";
 import Image from "next/image";
 import { AnimatedShinyText } from "@/components/magicui/animated-shiny-text";
 import { cn } from "@/lib/utils";
 import { ArrowRightIcon } from "lucide-react";
 import Link from "next/link";
 import { DotPattern } from "@/components/magicui/dot-pattern";
 import { Button } from "@/components/ui/button";
+import homePageImage from "@/public/placeholder/homepage.webp";
+import { useRouter } from "next/navigation";
 
 export default function Header() {
+    const router = useRouter();
     return (
         <div className="relative px-4 sm:px-6 lg:px-8">
             <DotPattern
@@ -38,7 +42,7 @@ export default function Header() {
                             OpenMC est un projet communautaire open-source dédié à la création d&apos;un serveur Minecraft innovant et collaboratif.
                         </p>
                         <div className="mt-6 flex flex-col sm:flex-row gap-3 justify-center items-center">
-                            <Button className="group w-full sm:w-auto">
+                            <Button className="group w-full sm:w-auto" onClick={() => router.push("/join")}>
                                 Rejoindre le Serveur
                                 <ArrowRightIcon
                                     className="-me-1 opacity-60 transition-transform group-hover:translate-x-0.5"
@@ -71,7 +75,7 @@ export default function Header() {
 
                 <div className="mt-10 w-full max-w-5xl relative rounded-4xl overflow-hidden">
                     <Image
-                        src={`./placeholder/homepage.webp`}
+                        src={homePageImage}
                         alt="Placeholder"
                         width={1280}
                         height={720}

components/navigation/navbar.tsx

@@ -6,11 +6,14 @@ import { Button } from "../ui/button";
 import { ArrowRightIcon } from "lucide-react"
 import { NAVBAR_LINKS } from "@/config";
 import { useEffect, useState } from "react";
+import Logo from "@/public/branding/logo.webp";
+import { useRouter } from "next/navigation";
 
 export default function Navbar() {
 
     const [isScrolled, setIsScrolled] = useState(false);
     const [menuOpen, setMenuOpen] = useState(false);
+    const router = useRouter();
 
     useEffect(() => {
         const handleScroll = () => setIsScrolled(window.scrollY > 20);
@@ -45,7 +48,7 @@ export default function Navbar() {
             >
                 <div className="flex items-center gap-4">
                     <Link href="/">
-                        <Image src={`./branding/logo.webp`} alt="Logo" width={200} height={50} />
+                        <Image src={Logo} alt="Logo" width={200} height={50} />
                     </Link>
                 </div>
                 <div className="hidden md:flex flex-grow justify-center gap-4 items-center">
@@ -65,7 +68,7 @@ export default function Navbar() {
                     ))}
                 </div>
                 <div className="hidden md:flex">
-                    <Button className="group">
+                    <Button className="group" onClick={() => router.push("/join")}>
                         Rejoindre le Serveur
                         <ArrowRightIcon
                             className="-me-1 opacity-60 transition-transform group-hover:translate-x-0.5"
@@ -118,7 +121,7 @@ export default function Navbar() {
                             <Button
                                 className="w-full group py-6 text-base mt-2 bg-white/10 active:bg-white/20
                                 border border-white/20 active:border-white/30 transition-all duration-300"
-                                onClick={() => setMenuOpen(false)}
+                                onClick={() => { setMenuOpen(false); router.push("/join"); }}
                             >
                                 Rejoindre le Serveur
                                 <ArrowRightIcon