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

Browse Source
This commit is contained in:
Peter Maquiran
2026-04-15 14:52:57 +01:00
parent e9cbf91e91
commit 09f74d2439
2 changed files with 244 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/create-news/page.tsx
+91 -36
View File
@@ -1,4 +1,5 @@
import React from 'react';
"use client";
import React, { useState, useRef } from 'react';
import Image from 'next/image';
import {
LayoutDashboard, Newspaper, Users, BarChart3,
@@ -6,19 +7,58 @@ import {
Type, Calendar, Clock, Tag, User, Save, Eye, Send
} from 'lucide-react';
// Importe o componente que criámos (ajuste o caminho se necessário)
import MultiAspectEditor from '../components/MultiAspectEditor';
const CreateNewsPage = () => {
// 1. Estados para o Crop
const [tempImage, setTempImage] = useState<string | null>(null);
const [isEditorOpen, setIsEditorOpen] = useState(false);
const [finalCrops, setFinalCrops] = useState<any>(null); // Guarda os Base64 finais
const fileInputRef = useRef<HTMLInputElement>(null);
// 2. Lógica de Upload
const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
if (e.target.files && e.target.files.length > 0) {
const reader = new FileReader();
reader.readAsDataURL(e.target.files[0]);
reader.onload = () => {
setTempImage(reader.result as string);
setIsEditorOpen(true);
};
}
};
const triggerUpload = () => {
fileInputRef.current?.click();
};
return (
<div className="flex h-screen bg-slate-100/50 text-slate-900 font-sans">
{/* Sidebar Lateral - Glassmorphism */}
{/* --- MODAL DO EDITOR (Renderiza fora do fluxo quando ativo) --- */}
{isEditorOpen && tempImage && (
<MultiAspectEditor
image={tempImage}
onClose={() => setIsEditorOpen(false)}
onExport={(data) => {
setFinalCrops(data); // Aqui tens o objeto com hero, news, square em Base64
setIsEditorOpen(false);
console.log("Imagens prontas para envio:", data);
}}
/>
)}
{/* Sidebar Lateral */}
<aside className="w-64 backdrop-blur-xl bg-white/80 border-r border-slate-200 p-6 flex flex-col">
<div className="flex items-center gap-2 mb-10 px-2">
<div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center text-white font-bold italic">
<Image src="/logo.png" alt="TVone" width={50} height={50} />
<div className="w-10 h-10 bg-white rounded-lg flex items-center justify-center border border-slate-100 shadow-sm overflow-hidden">
{/* Fallback caso não tenhas o logo.png localmente */}
<span className="text-blue-600 font-black">TV</span>
</div>
<span className="font-bold text-sm tracking-tight leading-tight uppercase">
TVone<br/><span className="text-blue-600 text-[10px]">de Notícias</span>
TVone<br/><span className="text-blue-600 text-[10px]">Portal Admin</span>
</span>
</div>
@@ -32,7 +72,7 @@ const CreateNewsPage = () => {
<NavItem icon={<HelpCircle size={18}/>} label="Ajuda" />
</nav>
{/* User Activity Feed - Sidebar Bottom */}
{/* User Activity Feed */}
<div className="mt-auto pt-6 border-t border-slate-200">
<h4 className="text-[10px] font-bold uppercase text-slate-400 mb-4 px-2 tracking-widest">Atividade Recente</h4>
<div className="space-y-3 px-2">
@@ -44,12 +84,11 @@ const CreateNewsPage = () => {
{/* Main Content Area */}
<main className="flex-1 overflow-y-auto">
{/* Header Superior */}
<header className="h-16 border-b border-slate-200 bg-white/50 backdrop-blur-md sticky top-0 z-10 px-8 flex items-center justify-between">
<div className="w-1/3">
<input
type="text"
placeholder="Pesquisar artigos, autores..."
placeholder="Pesquisar artigos..."
className="w-full bg-slate-100 border-none rounded-full px-4 py-1.5 text-sm focus:ring-2 focus:ring-blue-500/20 outline-none"
/>
</div>
@@ -58,7 +97,9 @@ const CreateNewsPage = () => {
<p className="text-xs font-bold">James Wilson</p>
<p className="text-[10px] text-slate-500">Editor</p>
</div>
<div className="w-8 h-8 bg-slate-300 rounded-full"></div>
<div className="w-8 h-8 bg-slate-300 rounded-full border border-white shadow-sm overflow-hidden">
<img src="https://ui-avatars.com/api/?name=James+Wilson" alt="User" />
</div>
</div>
</header>
@@ -69,14 +110,14 @@ const CreateNewsPage = () => {
<button className="px-5 py-2 rounded-lg border border-slate-200 bg-white text-sm font-medium hover:bg-slate-50 transition-all flex items-center gap-2">
<Save size={16}/> Salvar Rascunho
</button>
<button className="px-6 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-600 transition-all shadow-lg shadow-blue-200 flex items-center gap-2">
<button className="px-6 py-2 rounded-lg bg-blue-600 text-white text-sm font-medium hover:bg-blue-700 transition-all shadow-lg shadow-blue-200 flex items-center gap-2">
<Send size={16}/> Publicar Artigo
</button>
</div>
</div>
<div className="grid grid-cols-3 gap-8">
{/* Coluna Principal (Editor) */}
{/* Coluna Principal */}
<div className="col-span-2 space-y-6">
<section className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
<label className="block text-xs font-bold uppercase text-slate-400 mb-2">Título do Artigo</label>
@@ -86,12 +127,10 @@ const CreateNewsPage = () => {
className="w-full text-xl font-bold border-none focus:ring-0 placeholder:text-slate-300 p-0"
/>
<hr className="my-6 border-slate-100" />
<label className="block text-xs font-bold uppercase text-slate-400 mb-2 leading-8">Conteúdo Principal</label>
{/* Toolbar Simplificada */}
<div className="flex gap-4 mb-4 text-slate-400 border-b border-slate-50 pb-2">
<Type size={18} className="cursor-pointer hover:text-blue-600" />
<ImageIcon size={18} className="cursor-pointer hover:text-blue-600" />
<Type size={18} className="cursor-pointer hover:text-blue-600 transition-colors" />
<ImageIcon size={18} className="cursor-pointer hover:text-blue-600 transition-colors" />
<div className="w-px h-5 bg-slate-200" />
<span className="font-serif font-bold cursor-pointer hover:text-blue-600">B</span>
<span className="italic cursor-pointer hover:text-blue-600">I</span>
@@ -102,42 +141,58 @@ const CreateNewsPage = () => {
className="w-full border-none focus:ring-0 resize-none text-slate-700 leading-relaxed p-0"
/>
</section>
<section className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
<label className="block text-xs font-bold uppercase text-slate-400 mb-2 leading-8">Resumo (Lead)</label>
<textarea
rows={3}
placeholder="Escreva um resumo curto para visualização..."
className="w-full border-none focus:ring-0 resize-none text-slate-600 text-sm italic p-0"
/>
</section>
</div>
{/* Coluna Lateral (Meta-dados) */}
{/* Coluna Lateral */}
<div className="space-y-6">
<section className="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm space-y-6">
<div>
<label className="flex items-center gap-2 text-xs font-bold uppercase text-slate-400 mb-3">
<Tag size={14}/> Categoria
</label>
<select className="w-full bg-slate-50 border border-slate-100 rounded-lg px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-blue-500/10">
<select className="w-full bg-slate-50 border border-slate-100 rounded-lg px-3 py-2 text-sm outline-none">
<option>Negócios</option>
<option>Tecnologia</option>
<option>Desporto</option>
<option>Política</option>
</select>
</div>
{/* --- INPUT DE UPLOAD ATUALIZADO --- */}
<div>
<label className="flex items-center gap-2 text-xs font-bold uppercase text-slate-400 mb-3">
<ImageIcon size={14}/> Imagem de Capa
</label>
<div className="border-2 border-dashed border-slate-100 rounded-xl p-8 flex flex-col items-center justify-center bg-slate-50/50 hover:bg-slate-50 transition-colors cursor-pointer group">
<div className="w-10 h-10 bg-white rounded-full shadow-sm flex items-center justify-center text-blue-500 mb-2 group-hover:scale-110 transition-transform">
<ImageIcon size={20}/>
</div>
<p className="text-[10px] font-medium text-slate-500">Clique para carregar</p>
<p className="text-[9px] text-slate-400">JPG, PNG (Máx 5MB)</p>
<input
type="file"
hidden
ref={fileInputRef}
accept="image/*"
onChange={handleFileChange}
/>
<div
onClick={triggerUpload}
className={`border-2 border-dashed rounded-xl p-8 flex flex-col items-center justify-center transition-all cursor-pointer group
${finalCrops ? 'border-emerald-200 bg-emerald-50/30' : 'border-slate-100 bg-slate-50/50 hover:bg-slate-50'}`}
>
{finalCrops ? (
<div className="text-center">
<div className="w-12 h-12 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-2">
<ImageIcon size={24}/>
</div>
<p className="text-[10px] font-bold text-emerald-700 uppercase">3 Formatos Gerados</p>
<p className="text-[9px] text-emerald-500 mt-1">Clique para alterar</p>
</div>
) : (
<>
<div className="w-10 h-10 bg-white rounded-full shadow-sm flex items-center justify-center text-blue-500 mb-2 group-hover:scale-110 transition-transform">
<ImageIcon size={20}/>
</div>
<p className="text-[10px] font-medium text-slate-500 text-center">Clique para carregar e enquadrar</p>
<p className="text-[9px] text-slate-400">Suporta JPG, PNG</p>
</>
)}
</div>
</div>
@@ -146,8 +201,8 @@ const CreateNewsPage = () => {
<Calendar size={14}/> Agendamento
</label>
<div className="grid grid-cols-2 gap-2">
<input type="date" className="bg-slate-50 border border-slate-100 rounded-lg px-2 py-2 text-xs outline-none" />
<input type="time" className="bg-slate-50 border border-slate-100 rounded-lg px-2 py-2 text-xs outline-none" />
<input type="date" className="bg-slate-50 border border-slate-100 rounded-lg px-2 py-2 text-[11px] outline-none" />
<input type="time" className="bg-slate-50 border border-slate-100 rounded-lg px-2 py-2 text-[11px] outline-none" />
</div>
</div>
</section>