peter/tvone
1
0
Fork 0
mirror of https://github.com/PeterMaquiran/tvone.git synced 2026-04-18 15:27:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

add theme toggle button
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Peter Maquiran
2026-04-15 13:10:33 +01:00
parent f8d5e45673
commit b30b8503f9
3 changed files with 53 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/layout.tsx
+6 -9
View File
@@ -38,16 +38,13 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
// Remova o style={{ colorScheme: 'light' }} daqui, // 1. We remove "light" from className so ThemeProvider can inject it
// pois o Next.js tem dificuldade em hidratar estilos inline no <html> // 2. We remove style={{ colorScheme: 'light' }}
<html lang="pt" style={{ colorScheme: 'light' }} className={`${inter.variable} light h-full antialiased`} suppressHydrationWarning> <html lang="pt" className={`${inter.variable} h-full antialiased`} suppressHydrationWarning>
<body className={`min-h-full flex flex-col bg-[#f5f5f7] text-neutral-900 ${inter.className}`}> <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"> <GoogleOAuthProvider clientId="618391854803-gtdbtnf5t78stsmd1724s8c456tfq4lr.apps.googleusercontent.com">
<ThemeProvider {/* Ensure attribute="class" is set here */}
attribute="class" <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
defaultTheme="light"
enableSystem={false}
>
{children} {children}
</ThemeProvider> </ThemeProvider>
</GoogleOAuthProvider> </GoogleOAuthProvider>
app/login/page.tsx
+47 -32
View File
@@ -1,29 +1,49 @@
"use client"; "use client";
import Image from 'next/image'; import Image from 'next/image';
import React, { useState, useEffect } from "react";
import React, { useState } from "react";
import { useGoogleLogin } from "@react-oauth/google"; 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() { export default function AppleStyleAuth() {
const [email, setEmail] = useState(""); const [email, setEmail] = useState("");
const [password, setPassword] = 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({ const googleLogin = useGoogleLogin({
onSuccess: (res) => console.log("Google Success", res), onSuccess: (res) => console.log("Google Success", res),
onError: () => console.log("Google Failed"), onError: () => console.log("Google Failed"),
}); });
if (!mounted) return null;
return ( 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"> <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 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"> <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">
{/* Substitui pelo teu SVG de logo real */}
{/* <span className="text-2xl font-black italic">tv1</span> */}
<Image src="/logo.png" alt="logo" width={100} height={100} /> <Image src="/logo.png" alt="logo" width={100} height={100} />
</div> </div>
<h1 className="mt-6 text-3xl font-bold tracking-tight text-neutral-900 dark:text-white"> <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> <p className="mt-2 text-sm text-neutral-500">Usa a tua conta TVone.</p>
</div> </div>
{/* 2. FORMULÁRIO DE CREDENCIAIS */} {/* 2. FORMULÁRIO */}
<div className="space-y-3"> <div className="space-y-3">
<div className="relative"> <input
<input type="email"
type="email" placeholder="E-mail ou Telefone"
placeholder="E-mail ou Telefone" value={email}
value={email} onChange={(e) => setEmail(e.target.value)}
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"
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" />
/> <input
</div> type="password"
<div className="relative"> placeholder="Palavra-passe"
<input value={password}
type="password" onChange={(e) => setPassword(e.target.value)}
placeholder="Palavra-passe" 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"
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>
<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]"> <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 Continuar
</button> </button>
</div> </div>
{/* 3. DIVISOR COM "OU" */} {/* 3. DIVISOR */}
<div className="relative flex items-center py-4"> <div className="relative flex items-center py-4">
<div className="flex-grow border-t border-neutral-200 dark:border-neutral-800"></div> <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"> <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 className="flex-grow border-t border-neutral-200 dark:border-neutral-800"></div>
</div> </div>
{/* 4. BOTÃO GOOGLE (Melhorado) */} {/* 4. BOTÃO GOOGLE */}
<button <button
onClick={() => googleLogin()} 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" 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> </span>
</button> </button>
{/* 5. LINKS ADICIONAIS */} {/* 5. LINKS */}
<div className="pt-4 text-center"> <div className="pt-4 text-center">
<a href="#" className="text-xs font-medium text-blue-600 hover:underline"> <a href="#" className="text-xs font-medium text-blue-600 hover:underline">
Esqueceste-te da palavra-passe? Esqueceste-te da palavra-passe?
tailwind.config.ts
-15
View File
@@ -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;