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

Compare commits

base: peter:c46857514b3baae3cefb9c421a4093a93fc9d955
Branches Tags
peter:main
...
compare: peter:b30b8503f90b9de8db89b9f05f34f8972a658a5c
Branches Tags
peter:main

4 Commits
c46857514b ... b30b8503f9

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
6 changed files with 191 additions and 11 deletions
Expand all files Collapse all files
app/category/page.tsx
+15 -5
View File
@@ -208,12 +208,22 @@ export default function NewsArticlePage() {
</div> </div>
</div> </div>
<div className="py-4"> <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"> <div className="flex items-center gap-3 pb-2">
{item.title} <span className="text-[10px] font-bold uppercase tracking-wider text-blue-600">
</h3> {item.cat}
<p className="mt-1.5 text-xs font-medium text-neutral-500">{item.date}</p> </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> </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> </Link>
</article> </article>
))} ))}
app/components/tvone-site-nav.tsx
+17
View File
@@ -3,6 +3,8 @@
import Link from "next/link"; import Link from "next/link";
import { useCallback, useEffect, useId, useRef, useState } from "react"; import { useCallback, useEffect, useId, useRef, useState } from "react";
import Image from "next/image"; import Image from "next/image";
import { useTheme } from "next-themes";
import { Moon, Sun } from "lucide-react";
const primaryNav = [ const primaryNav = [
{ label: "Música", href: "#" }, { label: "Música", href: "#" },
@@ -69,6 +71,9 @@ export function TvoneSiteNav() {
const closeMenu = useCallback(() => setMenuOpen(false), []); const closeMenu = useCallback(() => setMenuOpen(false), []);
const toggleMenu = useCallback(() => setMenuOpen((o) => !o), []); const toggleMenu = useCallback(() => setMenuOpen((o) => !o), []);
const { theme, setTheme } = useTheme();
const [mounted, setMounted] = useState(false);
useEffect(() => { useEffect(() => {
const el = sentinelRef.current; const el = sentinelRef.current;
@@ -82,12 +87,14 @@ export function TvoneSiteNav() {
sync(); sync();
window.addEventListener("scroll", sync, { passive: true }); window.addEventListener("scroll", sync, { passive: true });
window.addEventListener("resize", sync); window.addEventListener("resize", sync);
setMounted(true);
return () => { return () => {
window.removeEventListener("scroll", sync); window.removeEventListener("scroll", sync);
window.removeEventListener("resize", sync); window.removeEventListener("resize", sync);
}; };
}, []); }, []);
useEffect(() => { useEffect(() => {
if (!menuOpen) return; if (!menuOpen) return;
const onKey = (e: KeyboardEvent) => { const onKey = (e: KeyboardEvent) => {
@@ -163,6 +170,16 @@ export function TvoneSiteNav() {
</ul> </ul>
<div className="ml-auto flex shrink-0 items-center gap-1 sm:gap-2"> <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 <button
type="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" className="flex h-10 w-10 items-center justify-center rounded-md hover:bg-white/10 sm:h-11 sm:w-11"
app/layout.tsx
+13 -6
View File
@@ -1,6 +1,8 @@
import type { Metadata, Viewport } from "next"; import type { Metadata, Viewport } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { GoogleOAuthProvider } from "@react-oauth/google";
import { ThemeProvider } from 'next-themes'
const inter = Inter({ const inter = Inter({
variable: "--font-inter", variable: "--font-inter",
@@ -36,12 +38,17 @@ export default function RootLayout({
children: React.ReactNode; children: React.ReactNode;
}>) { }>) {
return ( return (
<html lang="pt" className={`${inter.variable} h-full antialiased`}> // 1. We remove "light" from className so ThemeProvider can inject it
<body // 2. We remove style={{ colorScheme: 'light' }}
className={`min-h-full flex flex-col bg-white text-neutral-900 ${inter.className}`} <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}`}>
{children} <GoogleOAuthProvider clientId="618391854803-gtdbtnf5t78stsmd1724s8c456tfq4lr.apps.googleusercontent.com">
{/* Ensure attribute="class" is set here */}
<ThemeProvider attribute="class" defaultTheme="light" enableSystem>
{children}
</ThemeProvider>
</GoogleOAuthProvider>
</body> </body>
</html> </html>
); );
} }
app/login/page.tsx
+116
View File
@@ -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>
);
}
package.json
+2
View File
@@ -9,9 +9,11 @@
"lint": "eslint" "lint": "eslint"
}, },
"dependencies": { "dependencies": {
"@react-oauth/google": "^0.13.5",
"framer-motion": "^12.38.0", "framer-motion": "^12.38.0",
"lucide-react": "^1.8.0", "lucide-react": "^1.8.0",
"next": "16.2.1", "next": "16.2.1",
"next-themes": "^0.4.6",
"react": "19.2.4", "react": "19.2.4",
"react-dom": "19.2.4", "react-dom": "19.2.4",
"react-easy-crop": "^5.5.7", "react-easy-crop": "^5.5.7",
pnpm-lock.yaml
Generated
+28
View File
@@ -8,6 +8,9 @@ importers:
.: .:
dependencies: 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: framer-motion:
specifier: ^12.38.0 specifier: ^12.38.0
version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4) version: 12.38.0(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -17,6 +20,9 @@ importers:
next: next:
specifier: 16.2.1 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) 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: react:
specifier: 19.2.4 specifier: 19.2.4
version: 19.2.4 version: 19.2.4
@@ -440,6 +446,12 @@ packages:
resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==} resolution: {integrity: sha512-nn5ozdjYQpUCZlWGuxcJY/KpxkWQs4DcbMCmKojjyrYDEAGy4Ce19NN4v5MduafTwJlbKc99UA8YhSVqq9yPZA==}
engines: {node: '>=12.4.0'} 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': '@rtsao/scc@1.1.0':
resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==} resolution: {integrity: sha512-zt6OdqaDoOnJ1ZYsCYGt9YmWzDXl4vQdKTyJev62gFhRGKdx7mcT54V9KIjg+d2wi9EXsPvAPKe7i7WjfVWB8g==}
@@ -1577,6 +1589,12 @@ packages:
natural-compare@1.4.0: natural-compare@1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} 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: next@16.2.1:
resolution: {integrity: sha512-VaChzNL7o9rbfdt60HUj8tev4m6d7iC1igAy157526+cJlXOQu5LzsBXNT+xaJnTP/k+utSX5vMv7m0G+zKH+Q==} resolution: {integrity: sha512-VaChzNL7o9rbfdt60HUj8tev4m6d7iC1igAy157526+cJlXOQu5LzsBXNT+xaJnTP/k+utSX5vMv7m0G+zKH+Q==}
engines: {node: '>=20.9.0'} engines: {node: '>=20.9.0'}
@@ -2357,6 +2375,11 @@ snapshots:
'@nolyfill/is-core-module@1.0.39': {} '@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': {} '@rtsao/scc@1.1.0': {}
'@swc/helpers@0.5.15': '@swc/helpers@0.5.15':
@@ -3591,6 +3614,11 @@ snapshots:
natural-compare@1.4.0: {} 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): next@16.2.1(@babel/core@7.29.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
dependencies: dependencies:
'@next/env': 16.2.1 '@next/env': 16.2.1