add theme toggle button

add theme button
add login page
2026-04-18 15:27:52 +00:00 · 2026-04-15 13:10:33 +01:00 · 2026-04-15 12:58:16 +01:00 · 2026-04-15 12:50:44 +01:00 · 2026-04-15 10:48:07 +01:00
6 changed files with 191 additions and 11 deletions
@@ -208,12 +208,22 @@ export default function NewsArticlePage() {
                    </div>
                </div>

-                <div className="py-4">
-                    <h3 className="line-clamp-2 text-base font-bold leading-snug text-neutral-900 transition-colors group-hover:text-blue-600">
-                    {item.title}
-                    </h3>
-                    <p className="mt-1.5 text-xs font-medium text-neutral-500">{item.date}</p>
+              <div className="py-4">
+                <div className="flex items-center gap-3 pb-2">
+                  <span className="text-[10px] font-bold uppercase tracking-wider text-blue-600">
+                    {item.cat}
+                  </span>
+                  <span className="h-1 w-1 rounded-2xl bg-neutral-300" />
+                  {/* Data de Publicação em destaque suave */}
+                  <span className="text-[10px] font-semibold text-neutral-500 uppercase tracking-tight">
+                    {item.date}
+                  </span>
                </div>
+
+                <h3 className="line-clamp-4 text-base font-bold leading-snug text-neutral-900 transition-colors group-hover:text-blue-600">
+                  {item.title}
+                </h3>
+              </div>
                </Link>
            </article>
            ))}
@@ -3,6 +3,8 @@
 import Link from "next/link";
 import { useCallback, useEffect, useId, useRef, useState } from "react";
 import Image from "next/image";
+import { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";

 const primaryNav = [
  { label: "Música", href: "#" },
@@ -69,6 +71,9 @@ export function TvoneSiteNav() {

  const closeMenu = useCallback(() => setMenuOpen(false), []);
  const toggleMenu = useCallback(() => setMenuOpen((o) => !o), []);
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  

  useEffect(() => {
    const el = sentinelRef.current;
@@ -82,12 +87,14 @@ export function TvoneSiteNav() {
    sync();
    window.addEventListener("scroll", sync, { passive: true });
    window.addEventListener("resize", sync);
+    setMounted(true);
    return () => {
      window.removeEventListener("scroll", sync);
      window.removeEventListener("resize", sync);
    };
  }, []);

+  
  useEffect(() => {
    if (!menuOpen) return;
    const onKey = (e: KeyboardEvent) => {
@@ -163,6 +170,16 @@ export function TvoneSiteNav() {
            </ul>

            <div className="ml-auto flex shrink-0 items-center gap-1 sm:gap-2">
+              {/* Theme Toggle */}
+              {mounted && (
+                <button
+                  onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+                  className="flex h-10 w-10 items-center justify-center rounded-md hover:bg-white/10"
+                >
+                  {theme === "dark" ? <Moon size={18} /> : <Sun size={18} />}
+                </button>
+              )}
+
              <button
                type="button"
                className="flex h-10 w-10 items-center justify-center rounded-md hover:bg-white/10 sm:h-11 sm:w-11"
@@ -1,6 +1,8 @@
 import type { Metadata, Viewport } from "next";
 import { Inter } from "next/font/google";
 import "./globals.css";
+import { GoogleOAuthProvider } from "@react-oauth/google";
+import { ThemeProvider } from 'next-themes'

 const inter = Inter({
  variable: "--font-inter",
@@ -36,11 +38,16 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="pt" className={`${inter.variable} h-full antialiased`}>
-      <body
-        className={`min-h-full flex flex-col bg-white text-neutral-900 ${inter.className}`}
-      >
-        {children}
+    // 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">
+          {/* Ensure attribute="class" is set here */}
+          <ThemeProvider attribute="class" defaultTheme="light" enableSystem>
+            {children}
+          </ThemeProvider>
+        </GoogleOAuthProvider>
      </body>
    </html>
  );
@@ -0,0 +1,116 @@
+"use client";
+import Image from 'next/image';
+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 { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  // Avoid hydration mismatch by waiting for mount
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const googleLogin = useGoogleLogin({
+    onSuccess: (res) => console.log("Google Success", res),
+    onError: () => console.log("Google Failed"),
+  });
+
+  if (!mounted) return null;
+
+  return (
+    <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 */}
+        <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 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">
+            Iniciar sessão
+          </h1>
+          <p className="mt-2 text-sm text-neutral-500">Usa a tua conta TVone.</p>
+        </div>
+
+        {/* 2. FORMULÁRIO */}
+        <div className="space-y-3">
+          <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 */}
+        <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">
+            ou
+          </span>
+          <div className="flex-grow border-t border-neutral-200 dark:border-neutral-800"></div>
+        </div>
+
+        {/* 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"
+        >
+          <svg className="h-5 w-5" viewBox="0 0 24 24">
+            <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+            <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+            <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+            <path d="M12 5.38c1.62 0 3.06.56 4.21 1.66l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+          </svg>
+          <span className="text-sm font-semibold tracking-tight text-neutral-700 dark:text-neutral-300">
+            Continuar com o Google
+          </span>
+        </button>
+
+        {/* 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?
+          </a>
+          <p className="mt-8 text-xs text-neutral-400">
+            Não tens conta?{" "}
+            <a href="#" className="font-bold text-neutral-900 dark:text-white">
+              Cria uma agora.
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
@@ -9,9 +9,11 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "@react-oauth/google": "^0.13.5",
    "framer-motion": "^12.38.0",
    "lucide-react": "^1.8.0",
    "next": "16.2.1",
+    "next-themes": "^0.4.6",
    "react": "19.2.4",
    "react-dom": "19.2.4",
    "react-easy-crop": "^5.5.7",
@@ -8,6 +8,9 @@ importers:

  .:
    dependencies:
+      '@react-oauth/google':
+        specifier: ^0.13.5
+        version: 0.13.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      framer-motion:
        specifier: ^12.38.0
        version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -17,6 +20,9 @@ importers:
      next:
        specifier: 16.2.1
        version: 16.2.1(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
      react:
        specifier: 19.2.4
        version: 19.2.4
@@ -440,6 +446,12 @@ packages:
    resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
    engines: {node: '>=12.4.0'}

+  '@react-oauth/google@0.13.5':
+    resolution: {integrity: sha512-xQWri2s/3nNekZJ4uuov2aAfQYu83bN3864KcFqw2pK1nNbFurQIjPFDXhWaKH3IjYJ2r/9yyIIpsn5lMqrheQ==}
+    peerDependencies:
+      react: '>=16.8.0'
+      react-dom: '>=16.8.0'
+
  '@rtsao/scc@1.1.0':
    resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}

@@ -1577,6 +1589,12 @@ packages:
  natural-compare@1.4.0:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}

+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
  next@16.2.1:
    resolution: {integrity: sha512-VaChzNL7o9rbfdt60HUj8tev4m6d7iC1igAy157526+cJlXOQu5LzsBXNT+xaJnTP/k+utSX5vMv7m0G+zKH+Q==}
    engines: {node: '>=20.9.0'}
@@ -2357,6 +2375,11 @@ snapshots:

  '@nolyfill/is-core-module@1.0.39': {}

+  '@react-oauth/google@0.13.5(react-dom@19.2.4(react@19.2.4))(react@19.2.4)':
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
  '@rtsao/scc@1.1.0': {}

  '@swc/helpers@0.5.15':
@@ -3591,6 +3614,11 @@ snapshots:

  natural-compare@1.4.0: {}

+  next-themes@0.4.6(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+    dependencies:
+      react: 19.2.4
+      react-dom: 19.2.4(react@19.2.4)
+
  next@16.2.1(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
    dependencies:
      '@next/env': 16.2.1
Author	SHA1	Message	Date
peter	b30b8503f9	add theme toggle button continuous-integration/drone/push Build is passing Details	2026-04-15 13:10:33 +01:00
peter	f8d5e45673	add theme button	2026-04-15 12:58:16 +01:00
peter	b84d6dd162	add login page	2026-04-15 12:50:44 +01:00
peter	1beda1f8f6	add date	2026-04-15 10:48:07 +01:00