add theme toggle button

2026-04-18 07:17:52 +00:00 · 2026-04-15 13:10:33 +01:00
parent f8d5e45673
commit b30b8503f9
3 changed files with 53 additions and 56 deletions
@@ -38,16 +38,13 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    // Remova o style={{ colorScheme: 'light' }} daqui, 
-    // pois o Next.js tem dificuldade em hidratar estilos inline no <html>
-    <html lang="pt" style={{ colorScheme: 'light' }} className={`${inter.variable} light h-full antialiased`} suppressHydrationWarning>
-      <body className={`min-h-full flex flex-col bg-[#f5f5f7] text-neutral-900 ${inter.className}`}>
+    // 1. We remove "light" from className so ThemeProvider can inject it
+    // 2. We remove style={{ colorScheme: 'light' }}
+    <html lang="pt" className={`${inter.variable} h-full antialiased`} suppressHydrationWarning>
+      <body className={`min-h-full flex flex-col bg-[#f5f5f7] text-neutral-900 dark:bg-black dark:text-white ${inter.className}`}>
        <GoogleOAuthProvider clientId="618391854803-gtdbtnf5t78stsmd1724s8c456tfq4lr.apps.googleusercontent.com">
-          <ThemeProvider 
-            attribute="class" 
-            defaultTheme="light"
-            enableSystem={false}
-          >
+          {/* Ensure attribute="class" is set here */}
+          <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
            {children}
          </ThemeProvider>
        </GoogleOAuthProvider>
@@ -1,29 +1,49 @@
 "use client";
 import Image from 'next/image';
-
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { useGoogleLogin } from "@react-oauth/google";
+import { useTheme } from 'next-themes';
+import { Sun, Moon } from 'lucide-react'; // Optional: install lucide-react for clean icons

 export default function AppleStyleAuth() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Avoid hydration mismatch by waiting for mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);

-  // Lógica do Google Login
  const googleLogin = useGoogleLogin({
    onSuccess: (res) => console.log("Google Success", res),
    onError: () => console.log("Google Failed"),
  });

+  if (!mounted) return null;
+
  return (
-    <div className="flex min-h-screen items-center justify-center bg-[#f5f5f7] px-4 dark:bg-black">
+    <div className="relative flex min-h-screen items-center justify-center bg-[#f5f5f7] px-4 transition-colors duration-500 dark:bg-black">
+      
+      {/* THEME TOGGLE BUTTON */}
+      <button
+        onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
+        className="absolute right-6 top-6 flex h-10 w-10 items-center justify-center rounded-full bg-white/80 shadow-sm backdrop-blur-md transition-all hover:scale-110 active:scale-95 dark:bg-neutral-800/80"
+        aria-label="Toggle Theme"
+      >
+        {theme === 'dark' ? (
+          <Sun className="h-5 w-5 text-yellow-400" />
+        ) : (
+          <Moon className="h-5 w-5 text-neutral-600" />
+        )}
+      </button>
+
      <div className="w-full max-w-[400px] space-y-8 text-center">
        
-        {/* 1. LOGOTIPO (Apple Style) */}
+        {/* 1. LOGOTIPO */}
        <div className="flex flex-col items-center">
-          <div className="flex h-16 w-16 items-center justify-center rounded-[1.2rem] bg-black text-white shadow-2xl dark:bg-white dark:text-black">
-             {/* Substitui pelo teu SVG de logo real */}
-            {/* <span className="text-2xl font-black italic">tv1</span> */}
+          <div className="flex h-16 w-16 items-center justify-center rounded-[1.2rem] bg-black text-white shadow-2xl transition-transform duration-700 hover:rotate-[360deg] dark:bg-white dark:text-black">
            <Image src="/logo.png" alt="logo" width={100} height={100} />
          </div>
          <h1 className="mt-6 text-3xl font-bold tracking-tight text-neutral-900 dark:text-white">
@@ -32,33 +52,28 @@ export default function AppleStyleAuth() {
          <p className="mt-2 text-sm text-neutral-500">Usa a tua conta TVone.</p>
        </div>

-        {/* 2. FORMULÁRIO DE CREDENCIAIS */}
+        {/* 2. FORMULÁRIO */}
        <div className="space-y-3">
-          <div className="relative">
-            <input
-              type="email"
-              placeholder="E-mail ou Telefone"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900"
-            />
-          </div>
-          <div className="relative">
-            <input
-              type="password"
-              placeholder="Palavra-passe"
-              value={password}
-              onChange={(e) => setPassword(e.target.value)}
-              className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900"
-            />
-          </div>
-          
+          <input
+            type="email"
+            placeholder="E-mail ou Telefone"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900 dark:text-white"
+          />
+          <input
+            type="password"
+            placeholder="Palavra-passe"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            className="w-full rounded-2xl border border-neutral-200 bg-white/50 px-5 py-4 text-sm outline-none transition-all focus:border-blue-500 focus:bg-white focus:ring-4 focus:ring-blue-500/10 dark:border-neutral-800 dark:bg-neutral-900 dark:text-white"
+          />
          <button className="w-full rounded-2xl bg-blue-600 py-4 text-sm font-bold text-white transition-all hover:bg-blue-700 active:scale-[0.98]">
            Continuar
          </button>
        </div>

-        {/* 3. DIVISOR COM "OU" */}
+        {/* 3. DIVISOR */}
        <div className="relative flex items-center py-4">
          <div className="flex-grow border-t border-neutral-200 dark:border-neutral-800"></div>
          <span className="mx-4 flex-shrink text-[11px] font-bold uppercase tracking-widest text-neutral-400">
@@ -67,7 +82,7 @@ export default function AppleStyleAuth() {
          <div className="flex-grow border-t border-neutral-200 dark:border-neutral-800"></div>
        </div>

-        {/* 4. BOTÃO GOOGLE (Melhorado) */}
+        {/* 4. BOTÃO GOOGLE */}
        <button
          onClick={() => googleLogin()}
          className="group flex w-full items-center justify-center gap-3 rounded-2xl border border-neutral-200 bg-white px-6 py-3.5 transition-all hover:bg-neutral-50 active:scale-[0.98] dark:border-neutral-800 dark:bg-transparent dark:hover:bg-neutral-900"
@@ -83,7 +98,7 @@ export default function AppleStyleAuth() {
          </span>
        </button>

-        {/* 5. LINKS ADICIONAIS */}
+        {/* 5. LINKS */}
        <div className="pt-4 text-center">
          <a href="#" className="text-xs font-medium text-blue-600 hover:underline">
            Esqueceste-te da palavra-passe?
@@ -1,15 +0,0 @@
-import type { Config } from "tailwindcss";
-
-const config: Config = {
-  darkMode: "class", // Isto desativa o modo automático do sistema
-  content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-export default config;