mirror of
https://github.com/PeterMaquiran/tvone.git
synced 2026-04-21 19:51:47 +00:00
change route
This commit is contained in:
@@ -1,277 +0,0 @@
|
||||
"use client";
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import Image from 'next/image';
|
||||
import {
|
||||
LayoutDashboard, Newspaper, Users, BarChart3,
|
||||
Settings, HelpCircle, Image as ImageIcon,
|
||||
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';
|
||||
import dynamic from "next/dynamic";
|
||||
import { AdminHeaderPage } from '@/app/components/layout/admin/header';
|
||||
import { AdminSideBar } from '@/app/components/layout/admin/sidebar';
|
||||
// import { keycloak } from '@/app/feature/auth/keycloak-config';
|
||||
const Editor = dynamic(
|
||||
() => import("@tinymce/tinymce-react").then((mod) => mod.Editor),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
|
||||
export const CreateNewsPage = () => {
|
||||
|
||||
// Configuração do Design do Editor para combinar com seu layout
|
||||
const editorConfig = {
|
||||
height: 500,
|
||||
menubar: false,
|
||||
plugins: [
|
||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
|
||||
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
||||
'insertdatetime', 'media', 'table', 'code', 'help', 'wordcount'
|
||||
],
|
||||
// Adicionei 'blockquote' na toolbar
|
||||
toolbar: 'undo redo | blocks | ' +
|
||||
'bold italic forecolor | alignleft aligncenter ' +
|
||||
'alignright alignjustify | bullist numlist | ' +
|
||||
'blockquote link image | removeformat | help',
|
||||
|
||||
// Customização do aspeto da citação dentro do editor
|
||||
content_style: `
|
||||
body {
|
||||
font-family: Inter, Helvetica, Arial, sans-serif;
|
||||
font-size: 14px;
|
||||
color: #334155;
|
||||
line-height: 1.6;
|
||||
}
|
||||
blockquote {
|
||||
border-left: 4px solid #2563eb; /* Azul da TVone */
|
||||
padding-left: 1.5rem;
|
||||
color: #475569;
|
||||
font-style: italic;
|
||||
margin: 1.5rem 0;
|
||||
background: #f8fafc;
|
||||
padding: 1rem 1.5rem;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
`,
|
||||
skin: 'oxide',
|
||||
promotion: false, // Remove o botão "Upgrade" do Tiny
|
||||
branding: false, // Remove o "Powered by Tiny"
|
||||
};
|
||||
|
||||
// 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 [content, setContent] = useState('');
|
||||
const [user, setUser] = useState<{
|
||||
email?: string;
|
||||
name?: string;
|
||||
picture?: string;
|
||||
} | null>(null);
|
||||
|
||||
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();
|
||||
};
|
||||
|
||||
// Avoid hydration mismatch by waiting for mount
|
||||
// useEffect(() => {
|
||||
// keycloak.init({
|
||||
// onLoad: "check-sso",
|
||||
// pkceMethod: "S256",
|
||||
// }).then(async (authenticated) => {
|
||||
// if (authenticated) {
|
||||
// const token = keycloak.token!;
|
||||
// localStorage.setItem("token", token);
|
||||
|
||||
// // 👉 send token to Next.js backend
|
||||
// fetch("/api/session", {
|
||||
// method: "POST",
|
||||
// body: JSON.stringify({ token }),
|
||||
// });
|
||||
|
||||
|
||||
// const res = await fetch("http://localhost:3001/profile/", {
|
||||
// headers: {
|
||||
// //Authorization: `Bearer ${token}`,
|
||||
// },
|
||||
// });
|
||||
|
||||
// const profile = await res.json();
|
||||
|
||||
// var keycloakData : {
|
||||
// email: string,
|
||||
// email_verified: boolean,
|
||||
// name: string,
|
||||
// picture: string,
|
||||
// roles: string[]
|
||||
// } = profile.keycloak
|
||||
|
||||
// setUser(keycloakData);
|
||||
// console.log("Profile:", keycloakData);
|
||||
// }
|
||||
// });
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-6xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-8">
|
||||
<h1 className="text-2xl font-bold tracking-tight">Criar Nova Notícia</h1>
|
||||
<div className="flex gap-3">
|
||||
<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-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 */}
|
||||
<div className="col-span-2 space-y-6">
|
||||
<section className="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
||||
{/* Título */}
|
||||
<div className="p-6 pb-0">
|
||||
<label className="block text-xs font-bold uppercase text-slate-400 mb-2">Título do Artigo</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Insira o título principal da notícia..."
|
||||
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">Conteúdo Principal</label>
|
||||
</div>
|
||||
|
||||
{/* TinyMCE Editor */}
|
||||
<div className="border-t border-slate-50">
|
||||
<Editor
|
||||
apiKey='dmg1hghyf25x09mtg04hik0034yeadt1h6ai2ou68zhdvw11' // Obtenha em tiny.cloud ou use 'no-api-key' para teste
|
||||
init={editorConfig}
|
||||
value={content}
|
||||
onEditorChange={(newContent) => setContent(newContent)}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Resumo (Lead) */}
|
||||
<div 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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Tags */}
|
||||
<div 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">Tags</label>
|
||||
<input type="text" placeholder="Insira as tags da notícia..." className="w-full border-none focus:ring-0 resize-none text-slate-600 text-sm italic p-0" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 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">
|
||||
<option>Negócios</option>
|
||||
<option>Tecnologia</option>
|
||||
<option>Desporto</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>
|
||||
|
||||
<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>
|
||||
|
||||
<div>
|
||||
<label className="flex items-center gap-2 text-xs font-bold uppercase text-slate-400 mb-3">
|
||||
<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-[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>
|
||||
|
||||
<button className="w-full py-4 rounded-2xl border border-slate-200 bg-white text-sm font-bold flex items-center justify-center gap-2 hover:bg-slate-50 transition-all text-slate-600">
|
||||
<Eye size={18}/> Pré-visualizar Notícia
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* --- 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);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateNewsPage;
|
||||
@@ -1,22 +0,0 @@
|
||||
import CreateNewsPage from './create-news';
|
||||
import { AdminHeaderPage } from '@/app/components/layout/admin/header';
|
||||
import { AdminSideBar } from '@/app/components/layout/admin/sidebar';
|
||||
|
||||
|
||||
const CreateNews = () => {
|
||||
return (
|
||||
<div className="flex h-screen bg-slate-100/50 text-slate-900 font-sans">
|
||||
|
||||
{/* Sidebar Lateral */}
|
||||
<AdminSideBar />
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
<AdminHeaderPage />
|
||||
<CreateNewsPage />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CreateNews;
|
||||
@@ -1,338 +0,0 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
LayoutDashboard, Newspaper, Users, BarChart3,
|
||||
Settings, HelpCircle, TrendingUp, Eye, Clock,
|
||||
AlertCircle, ChevronRight, Edit3, Trash2, ExternalLink
|
||||
} from 'lucide-react';
|
||||
import Image from 'next/image';
|
||||
|
||||
const DashboardMain = () => {
|
||||
return (
|
||||
<div className="flex h-screen bg-[#F1F5F9] text-slate-900 font-sans">
|
||||
|
||||
{/* Sidebar Lateral - Consistente com a página de criação */}
|
||||
<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 font-bold italic">
|
||||
<Image src="/logo.png" alt="TVone" width={50} height={50} />
|
||||
</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>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-1">
|
||||
<NavItem icon={<LayoutDashboard size={18}/>} label="Painel Principal" active />
|
||||
<NavItem icon={<Newspaper size={18}/>} label="Meus Artigos" />
|
||||
<NavItem icon={<Users size={18}/>} label="Equipa" />
|
||||
<NavItem icon={<BarChart3 size={18}/>} label="Análises" />
|
||||
<NavItem icon={<Settings size={18}/>} label="Definições" />
|
||||
<NavItem icon={<HelpCircle size={18}/>} label="Ajuda" />
|
||||
</nav>
|
||||
|
||||
<div className="mt-auto pt-6 border-t border-slate-200">
|
||||
<div className="bg-blue-50 p-4 rounded-2xl">
|
||||
<p className="text-[10px] font-bold text-blue-600 uppercase mb-1">Dica do Dia</p>
|
||||
<p className="text-[11px] text-blue-800 leading-relaxed">
|
||||
Artigos com mais de 3 imagens têm 40% mais retenção.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
{/* Container do Fluxo de Atividade */}
|
||||
<div className="mt-auto pt-6 border-t border-slate-200">
|
||||
<h4 className="text-[10px] font-bold uppercase text-slate-400 mb-5 px-2 tracking-[0.15em]">
|
||||
Fluxo de Atividade
|
||||
</h4>
|
||||
|
||||
<div className="space-y-5 px-2">
|
||||
<ActivityItem
|
||||
name="James Wilson"
|
||||
action="atualizou"
|
||||
target="'Volatilidade do Mercado'"
|
||||
time="Agora mesmo"
|
||||
avatar="https://ui-avatars.com/api/?name=James+Wilson&background=E0F2FE&color=0369A1"
|
||||
/>
|
||||
|
||||
<ActivityItem
|
||||
name="Sarah Johnson"
|
||||
action="criou"
|
||||
target="'Financiamento de Startups'"
|
||||
time="Há 12 min"
|
||||
avatar="https://ui-avatars.com/api/?name=Sarah+Johnson&background=FEE2E2&color=B91C1C"
|
||||
/>
|
||||
|
||||
<ActivityItem
|
||||
name="Sarah Johnson"
|
||||
action="criou"
|
||||
target="'Tech Mercenary' em recentes"
|
||||
time="Há 45 min"
|
||||
avatar="https://ui-avatars.com/api/?name=Sarah+Johnson&background=FEE2E2&color=B91C1C"
|
||||
/>
|
||||
|
||||
<ActivityItem
|
||||
name="James Wilson"
|
||||
action="atualizou"
|
||||
target="'Volatilidade do Mercado'"
|
||||
time="Há 1h"
|
||||
avatar="https://ui-avatars.com/api/?name=James+Wilson&background=E0F2FE&color=0369A1"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* Main Content Area */}
|
||||
<main className="flex-1 overflow-y-auto">
|
||||
{/* Header Superior */}
|
||||
{/* Header Superior - Secção do Utilizador Atualizada */}
|
||||
<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..."
|
||||
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 transition-all"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-5">
|
||||
{/* Notificações (Opcional, mas completa o look) */}
|
||||
<button className="relative p-2 text-slate-400 hover:text-blue-600 transition-colors">
|
||||
<div className="absolute top-2 right-2.5 w-2 h-2 bg-red-500 border-2 border-white rounded-full"></div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
|
||||
</button>
|
||||
|
||||
{/* Menu do Utilizador */}
|
||||
<div className="flex items-center gap-3 pl-4 border-l border-slate-200 group cursor-pointer">
|
||||
<div className="text-right hidden sm:block">
|
||||
<p className="text-[11px] font-bold text-slate-900 leading-tight">James Wilson</p>
|
||||
<p className="text-[10px] text-emerald-600 font-medium">Online</p>
|
||||
</div>
|
||||
|
||||
<div className="relative">
|
||||
{/* Container da Imagem com Efeito de Anel */}
|
||||
<div className="w-9 h-9 rounded-full border-2 border-white shadow-sm overflow-hidden ring-1 ring-slate-200 group-hover:ring-blue-400 transition-all">
|
||||
<img
|
||||
src="https://ui-avatars.com/api/?name=James+Wilson&background=0D8ABC&color=fff"
|
||||
alt="Avatar do utilizador"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Indicador de Status (Mobile) */}
|
||||
<div className="absolute bottom-0 right-0 w-2.5 h-2.5 bg-emerald-500 border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
|
||||
{/* Seta para indicar menu (Chevron) */}
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="14" height="14"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="2.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
className="text-slate-400 group-hover:text-slate-600 transition-transform group-hover:translate-y-0.5"
|
||||
>
|
||||
<path d="m6 9 6 6 6-6"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-8 space-y-8">
|
||||
|
||||
{/* Métricas Principais (Grid de 4 colunas) */}
|
||||
<div className="grid grid-cols-4 gap-6">
|
||||
<StatCard
|
||||
label="Artigos Publicados"
|
||||
value="14,352"
|
||||
trend="+12% este mês"
|
||||
icon={<Newspaper size={20} className="text-blue-600"/>}
|
||||
/>
|
||||
<StatCard
|
||||
label="Visualizações Totais"
|
||||
value="2.1M"
|
||||
trend="+5.4% vs ontem"
|
||||
icon={<TrendingUp size={20} className="text-emerald-600"/>}
|
||||
/>
|
||||
<StatCard
|
||||
label="Tempo Médio"
|
||||
value="4m 32s"
|
||||
trend="-2s média"
|
||||
icon={<Clock size={20} className="text-orange-600"/>}
|
||||
/>
|
||||
<StatCard
|
||||
label="Alertas Ativos"
|
||||
value="3"
|
||||
trend="Urgente"
|
||||
icon={<AlertCircle size={20} className="text-red-600"/>}
|
||||
isAlert
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-3 gap-8">
|
||||
{/* Tabela de Artigos Recentes (Coluna Dupla) */}
|
||||
<div className="col-span-2 bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
|
||||
<div className="p-6 border-b border-slate-100 flex justify-between items-center">
|
||||
<h3 className="font-bold text-slate-800 text-sm uppercase tracking-wider">Artigos Recentes</h3>
|
||||
<button className="text-blue-600 text-xs font-bold flex items-center gap-1 hover:underline">
|
||||
Ver Todos <ChevronRight size={14}/>
|
||||
</button>
|
||||
</div>
|
||||
<table className="w-full text-left border-collapse">
|
||||
<thead className="bg-slate-50 text-[10px] uppercase font-bold text-slate-400">
|
||||
<tr>
|
||||
<th className="px-6 py-3">Título</th>
|
||||
<th className="px-6 py-3">Estado</th>
|
||||
<th className="px-6 py-3">Autor</th>
|
||||
<th className="px-6 py-3">Visualizações</th>
|
||||
<th className="px-6 py-3">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-slate-50">
|
||||
<TableRow
|
||||
title="Volatilidade do Mercado: Impactos na Economia"
|
||||
status="Publicado"
|
||||
author="James Wilson"
|
||||
views="1.2M"
|
||||
/>
|
||||
<TableRow
|
||||
title="O Futuro da Inteligência Artificial em 2026"
|
||||
status="Rascunho"
|
||||
author="Sarah Johnson"
|
||||
views="--"
|
||||
/>
|
||||
<TableRow
|
||||
title="Novas Políticas de Sustentabilidade na UE"
|
||||
status="Agendado"
|
||||
author="Ricardo Silva"
|
||||
views="0"
|
||||
/>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Performance por Categoria (Coluna Única) */}
|
||||
<div className="bg-white rounded-2xl border border-slate-200 shadow-sm p-6">
|
||||
<h3 className="font-bold text-slate-800 text-sm uppercase tracking-wider mb-6">Performance de Conteúdo</h3>
|
||||
<div className="space-y-6">
|
||||
<CategoryBar label="Tecnologia" percentage={85} color="bg-blue-500" />
|
||||
<CategoryBar label="Negócios" percentage={62} color="bg-emerald-500" />
|
||||
<CategoryBar label="Política" percentage={45} color="bg-purple-500" />
|
||||
<CategoryBar label="Desporto" percentage={30} color="bg-orange-500" />
|
||||
</div>
|
||||
|
||||
<div className="mt-8 p-4 bg-slate-50 rounded-xl">
|
||||
<p className="text-[11px] text-slate-500 text-center">
|
||||
O tráfego orgânico cresceu <strong>15%</strong> nos últimos 7 dias.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// --- Subcomponentes para Organização ---
|
||||
|
||||
const NavItem = ({ icon, label, active = false }: { icon: any, label: string, active?: boolean }) => (
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-all cursor-pointer ${
|
||||
active ? 'bg-blue-600 text-white shadow-lg shadow-blue-200' : 'text-slate-500 hover:bg-slate-100'
|
||||
}`}>
|
||||
{icon}
|
||||
<span className="truncate">{label}</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
const StatCard = ({ label, value, trend, icon, isAlert = false }: any) => (
|
||||
<div className={`p-5 rounded-2xl border bg-white shadow-sm transition-transform hover:scale-[1.02] cursor-default ${isAlert ? 'border-red-100 bg-red-50/20' : 'border-slate-200'}`}>
|
||||
<div className="flex justify-between items-start mb-4">
|
||||
<div className={`p-2 rounded-lg ${isAlert ? 'bg-red-100' : 'bg-slate-50'}`}>
|
||||
{icon}
|
||||
</div>
|
||||
<span className={`text-[10px] font-bold px-2 py-0.5 rounded-full ${isAlert ? 'bg-red-500 text-white' : 'bg-emerald-50 text-emerald-600'}`}>
|
||||
{trend}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-500 font-medium">{label}</p>
|
||||
<h3 className="text-2xl font-bold tracking-tight">{value}</h3>
|
||||
</div>
|
||||
);
|
||||
|
||||
const TableRow = ({ title, status, author, views }: any) => (
|
||||
<tr className="hover:bg-slate-50/50 transition-colors group">
|
||||
<td className="px-6 py-4">
|
||||
<p className="text-sm font-semibold text-slate-800 truncate max-w-[200px]">{title}</p>
|
||||
</td>
|
||||
<td className="px-6 py-4">
|
||||
<span className={`text-[10px] font-bold px-2 py-1 rounded-md ${
|
||||
status === 'Publicado' ? 'bg-emerald-50 text-emerald-600' :
|
||||
status === 'Rascunho' ? 'bg-slate-100 text-slate-500' : 'bg-blue-50 text-blue-600'
|
||||
}`}>
|
||||
{status}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-6 py-4 text-xs text-slate-600">{author}</td>
|
||||
<td className="px-6 py-4 text-xs font-mono font-medium">{views}</td>
|
||||
<td className="px-6 py-4">
|
||||
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
||||
<button className="p-1.5 hover:bg-white rounded-md border border-slate-200 text-slate-400 hover:text-blue-600 shadow-sm"><Edit3 size={14}/></button>
|
||||
<button className="p-1.5 hover:bg-white rounded-md border border-slate-200 text-slate-400 hover:text-red-600 shadow-sm"><Trash2 size={14}/></button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
|
||||
const CategoryBar = ({ label, percentage, color }: any) => (
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between text-[11px] font-bold uppercase tracking-wide">
|
||||
<span>{label}</span>
|
||||
<span className="text-slate-400">{percentage}%</span>
|
||||
</div>
|
||||
<div className="w-full h-1.5 bg-slate-100 rounded-full overflow-hidden">
|
||||
<div className={`h-full ${color} rounded-full`} style={{ width: `${percentage}%` }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default DashboardMain;
|
||||
|
||||
|
||||
{/* Subcomponente ActivityItem (Coloque fora do componente principal) */}
|
||||
const ActivityItem = ({ name, action, target, time, avatar }: {
|
||||
name: string,
|
||||
action: string,
|
||||
target: string,
|
||||
time: string,
|
||||
avatar: string
|
||||
}) => (
|
||||
<div className="flex gap-3 items-start group">
|
||||
{/* Avatar com Ring */}
|
||||
<div className="relative shrink-0">
|
||||
<img
|
||||
src={avatar}
|
||||
alt={name}
|
||||
className="w-7 h-7 rounded-full border border-slate-100 shadow-sm"
|
||||
/>
|
||||
<div className="absolute -bottom-0.5 -right-0.5 w-2 h-2 bg-emerald-500 border-2 border-white rounded-full"></div>
|
||||
</div>
|
||||
|
||||
{/* Texto da Atividade */}
|
||||
<div className="flex flex-col gap-0.5">
|
||||
<p className="text-[11px] leading-snug text-slate-600">
|
||||
<span className="font-bold text-slate-900 hover:text-blue-600 cursor-pointer transition-colors">
|
||||
{name}
|
||||
</span>
|
||||
{" "}{action}{" "}
|
||||
<span className="font-medium text-slate-800 italic">{target}</span>
|
||||
</p>
|
||||
<span className="text-[9px] font-medium text-slate-400 uppercase tracking-tight">
|
||||
{time}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -1,264 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import {
|
||||
FolderTree,
|
||||
Edit3,
|
||||
Trash2,
|
||||
Plus,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import { getTree, getFlat, updateCategory, createCategory, deleteCategory } from "@/lib/categories.api";
|
||||
|
||||
/* ================= TYPES ================= */
|
||||
interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
parentId?: string | null;
|
||||
children?: Category[];
|
||||
}
|
||||
|
||||
/* ================= API ================= */
|
||||
|
||||
/* ================= UTIL ================= */
|
||||
function slugify(text: string) {
|
||||
return text
|
||||
.toLowerCase()
|
||||
.trim()
|
||||
.replace(/\s+/g, "-")
|
||||
.replace(/[^a-z0-9-]/g, "");
|
||||
}
|
||||
|
||||
/* ================= PAGE ================= */
|
||||
export default function CategoriesPage() {
|
||||
const [tree, setTree] = useState<Category[]>([]);
|
||||
const [flat, setFlat] = useState<Category[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
id: null as string | null,
|
||||
name: "",
|
||||
slug: "",
|
||||
parentId: null as string | null,
|
||||
});
|
||||
|
||||
/* ================= LOAD ================= */
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [t, f] = await Promise.all([getTree(), getFlat()]);
|
||||
setTree(t);
|
||||
setFlat(f);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
/* ================= CRUD ================= */
|
||||
async function save() {
|
||||
const payload = {
|
||||
name: form.name,
|
||||
slug: form.slug || slugify(form.name),
|
||||
parentId: form.parentId,
|
||||
};
|
||||
|
||||
if (form.id) {
|
||||
await updateCategory(form.id, payload);
|
||||
} else {
|
||||
await createCategory(payload);
|
||||
}
|
||||
|
||||
closeModal();
|
||||
load();
|
||||
}
|
||||
|
||||
async function remove(id: string) {
|
||||
if (!confirm("Delete this category?")) return;
|
||||
await deleteCategory(id);
|
||||
load();
|
||||
}
|
||||
|
||||
/* ================= MODAL ================= */
|
||||
function openCreate(parentId?: string) {
|
||||
setForm({
|
||||
id: null,
|
||||
name: "",
|
||||
slug: "",
|
||||
parentId: parentId || null,
|
||||
});
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function openEdit(cat: Category) {
|
||||
setForm({
|
||||
id: cat.id,
|
||||
name: cat.name,
|
||||
slug: cat.slug,
|
||||
parentId: cat.parentId || null,
|
||||
});
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
setModalOpen(false);
|
||||
setForm({ id: null, name: "", slug: "", parentId: null });
|
||||
}
|
||||
|
||||
/* ================= TREE ================= */
|
||||
function TreeNode({
|
||||
node,
|
||||
level = 0,
|
||||
}: {
|
||||
node: Category;
|
||||
level?: number;
|
||||
}) {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<div style={{ marginLeft: level * 14 }} className="border-l pl-3">
|
||||
|
||||
{/* NODE */}
|
||||
<div className="flex items-center justify-between py-2 group">
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
<button onClick={() => setOpen(!open)}>
|
||||
{open ? (
|
||||
<ChevronDown size={14} />
|
||||
) : (
|
||||
<ChevronRight size={14} />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<FolderTree size={14} className="text-blue-500" />
|
||||
|
||||
<span
|
||||
onClick={() => openEdit(node)}
|
||||
className="text-sm font-medium cursor-pointer hover:text-blue-600"
|
||||
>
|
||||
{node.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* ACTIONS */}
|
||||
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition">
|
||||
|
||||
<button
|
||||
onClick={() => openCreate(node.id)}
|
||||
className="text-green-600"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
|
||||
<button onClick={() => openEdit(node)}>
|
||||
<Edit3 size={14} />
|
||||
</button>
|
||||
|
||||
<button onClick={() => remove(node.id)}>
|
||||
<Trash2 size={14} className="text-red-500" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CHILDREN */}
|
||||
{open &&
|
||||
node.children?.map((child) => (
|
||||
<TreeNode
|
||||
key={child.id}
|
||||
node={child}
|
||||
level={level + 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ================= UI ================= */
|
||||
return (
|
||||
<div className="p-8 bg-slate-50 min-h-screen">
|
||||
|
||||
{/* HEADER */}
|
||||
<div className="flex justify-between mb-6">
|
||||
<h1 className="text-xl font-semibold">
|
||||
Category Manager
|
||||
</h1>
|
||||
|
||||
<button
|
||||
onClick={() => openCreate()}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded"
|
||||
>
|
||||
+ New Category
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* TREE */}
|
||||
<div className="bg-white border rounded-xl p-4">
|
||||
{loading ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
tree.map((node) => (
|
||||
<TreeNode key={node.id} node={node} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* MODAL */}
|
||||
{modalOpen && (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center">
|
||||
|
||||
<div className="bg-white w-[420px] p-5 rounded-xl">
|
||||
|
||||
<h2 className="font-semibold mb-4">
|
||||
{form.id ? "Edit Category" : "Create Category"}
|
||||
</h2>
|
||||
|
||||
<input
|
||||
className="w-full border p-2 rounded mb-2"
|
||||
placeholder="Name"
|
||||
value={form.name}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
name: e.target.value,
|
||||
slug: slugify(e.target.value),
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<input
|
||||
className="w-full border p-2 rounded mb-3"
|
||||
placeholder="Slug"
|
||||
value={form.slug}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, slug: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
|
||||
<button onClick={closeModal}>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={save}
|
||||
className="bg-blue-600 text-white px-3 py-1 rounded"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,343 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState } from "react";
|
||||
import Image from "next/image";
|
||||
import {
|
||||
LayoutDashboard,
|
||||
Newspaper,
|
||||
Users,
|
||||
BarChart3,
|
||||
Settings,
|
||||
HelpCircle,
|
||||
Tag,
|
||||
FolderTree,
|
||||
Edit3,
|
||||
Trash2,
|
||||
Plus,
|
||||
ChevronRight,
|
||||
ChevronDown,
|
||||
} from "lucide-react";
|
||||
import { createCategory, deleteCategory, getFlat, getTree, updateCategory } from "@/lib/categories.api";
|
||||
import { slugify } from "@/lib/slug";
|
||||
|
||||
/* ================= TYPES ================= */
|
||||
interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
slug: string;
|
||||
parentId?: string | null;
|
||||
children?: Category[];
|
||||
}
|
||||
|
||||
/* ================= PAGE ================= */
|
||||
export default function CategoriesPage() {
|
||||
const [tree, setTree] = useState<Category[]>([]);
|
||||
const [flat, setFlat] = useState<Category[]>([]);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const [modalOpen, setModalOpen] = useState(false);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
id: null as string | null,
|
||||
name: "",
|
||||
slug: "",
|
||||
parentId: null as string | null,
|
||||
});
|
||||
|
||||
/* ================= LOAD ================= */
|
||||
async function load() {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [t, f] = await Promise.all([getTree(), getFlat()]);
|
||||
setTree(t);
|
||||
setFlat(f);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
load();
|
||||
}, []);
|
||||
|
||||
/* ================= CRUD ================= */
|
||||
async function save() {
|
||||
const payload = {
|
||||
name: form.name,
|
||||
slug: form.slug || slugify(form.name),
|
||||
parentId: form.parentId,
|
||||
};
|
||||
|
||||
if (form.id) {
|
||||
await updateCategory(form.id, payload);
|
||||
} else {
|
||||
await createCategory(payload);
|
||||
}
|
||||
|
||||
closeModal();
|
||||
load();
|
||||
}
|
||||
|
||||
async function remove(id: string) {
|
||||
if (!confirm("Delete this category?")) return;
|
||||
await deleteCategory(id);
|
||||
load();
|
||||
}
|
||||
|
||||
/* ================= MODAL ================= */
|
||||
function openCreate(parentId?: string) {
|
||||
setForm({
|
||||
id: null,
|
||||
name: "",
|
||||
slug: "",
|
||||
parentId: parentId || null,
|
||||
});
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function openEdit(cat: Category) {
|
||||
setForm({
|
||||
id: cat.id,
|
||||
name: cat.name,
|
||||
slug: cat.slug,
|
||||
parentId: cat.parentId || null,
|
||||
});
|
||||
setModalOpen(true);
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
setModalOpen(false);
|
||||
setForm({ id: null, name: "", slug: "", parentId: null });
|
||||
}
|
||||
|
||||
/* ================= TREE ================= */
|
||||
function TreeNode({
|
||||
node,
|
||||
level = 0,
|
||||
}: {
|
||||
node: Category;
|
||||
level?: number;
|
||||
}) {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
return (
|
||||
<div style={{ marginLeft: level * 14 }} className="border-l pl-3">
|
||||
|
||||
<div className="flex items-center justify-between py-2 group">
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
|
||||
<button onClick={() => setOpen(!open)}>
|
||||
{open ? (
|
||||
<ChevronDown size={14} />
|
||||
) : (
|
||||
<ChevronRight size={14} />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<FolderTree size={14} className="text-blue-500" />
|
||||
|
||||
<span
|
||||
onClick={() => openEdit(node)}
|
||||
className="text-sm font-medium cursor-pointer hover:text-blue-600"
|
||||
>
|
||||
{node.name}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-2 opacity-0 group-hover:opacity-100 transition">
|
||||
|
||||
<button
|
||||
onClick={() => openCreate(node.id)}
|
||||
className="text-green-600"
|
||||
>
|
||||
<Plus size={14} />
|
||||
</button>
|
||||
|
||||
<button onClick={() => openEdit(node)}>
|
||||
<Edit3 size={14} />
|
||||
</button>
|
||||
|
||||
<button onClick={() => remove(node.id)}>
|
||||
<Trash2 size={14} className="text-red-500" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{open &&
|
||||
node.children?.map((child) => (
|
||||
<TreeNode
|
||||
key={child.id}
|
||||
node={child}
|
||||
level={level + 1}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ================= UI ================= */
|
||||
return (
|
||||
<div className="flex h-screen bg-slate-50 text-slate-900">
|
||||
|
||||
{/* ================= SIDEBAR ================= */}
|
||||
{/* 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 font-bold italic">
|
||||
<Image src="/logo.png" alt="TVone" width={50} height={50} />
|
||||
</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>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 space-y-1">
|
||||
<NavItem icon={<LayoutDashboard size={18}/>} label="Painel" />
|
||||
<NavItem icon={<Newspaper size={18}/>} label="Meus Artigos" />
|
||||
<NavItem icon={<Users size={18}/>} label="Equipa" />
|
||||
<NavItem icon={<BarChart3 size={18}/>} label="Análises" />
|
||||
<NavItem icon={<Newspaper size={18}/>} label="Adicionar Notícia" active />
|
||||
<NavItem icon={<Settings size={18}/>} label="Definições" />
|
||||
<NavItem icon={<HelpCircle size={18}/>} label="Ajuda" />
|
||||
</nav>
|
||||
|
||||
{/* 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">
|
||||
<ActivityItem user="James Wilson" action="atualizou 'Mercado'" />
|
||||
<ActivityItem user="Sarah Johnson" action="criou 'Startups'" />
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{/* ================= MAIN ================= */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
|
||||
{/* HEADER */}
|
||||
<header className="h-14 bg-white border-b flex items-center justify-between px-6">
|
||||
|
||||
<input
|
||||
placeholder="Search categories..."
|
||||
className="bg-slate-100 px-4 py-1 rounded-full text-sm w-72 outline-none"
|
||||
/>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
|
||||
<span className="text-sm text-slate-600">
|
||||
Admin
|
||||
</span>
|
||||
|
||||
<img
|
||||
src="https://ui-avatars.com/api/?name=Admin"
|
||||
className="w-8 h-8 rounded-full"
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* CONTENT */}
|
||||
<main className="p-6 overflow-y-auto">
|
||||
|
||||
{/* TOP BAR */}
|
||||
<div className="flex justify-between mb-6">
|
||||
|
||||
<h1 className="text-xl font-semibold">
|
||||
Categories
|
||||
</h1>
|
||||
|
||||
<button
|
||||
onClick={() => openCreate()}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded"
|
||||
>
|
||||
+ New Category
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* TREE */}
|
||||
<div className="bg-white border rounded-xl p-4">
|
||||
{loading ? (
|
||||
<p>Loading...</p>
|
||||
) : (
|
||||
tree.map((node) => (
|
||||
<TreeNode key={node.id} node={node} />
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{/* ================= MODAL ================= */}
|
||||
{modalOpen && (
|
||||
<div className="fixed inset-0 bg-black/40 flex items-center justify-center">
|
||||
|
||||
<div className="bg-white w-[420px] p-5 rounded-xl">
|
||||
|
||||
<h2 className="font-semibold mb-4">
|
||||
{form.id ? "Edit Category" : "Create Category"}
|
||||
</h2>
|
||||
|
||||
<input
|
||||
className="w-full border p-2 rounded mb-2"
|
||||
placeholder="Name"
|
||||
value={form.name}
|
||||
onChange={(e) =>
|
||||
setForm({
|
||||
...form,
|
||||
name: e.target.value,
|
||||
slug: slugify(e.target.value),
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<input
|
||||
className="w-full border p-2 rounded mb-3"
|
||||
placeholder="Slug"
|
||||
value={form.slug}
|
||||
onChange={(e) =>
|
||||
setForm({ ...form, slug: e.target.value })
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end gap-2">
|
||||
|
||||
<button onClick={closeModal}>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={save}
|
||||
className="bg-blue-600 text-white px-3 py-1 rounded"
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
// Componentes Auxiliares para Limpeza de Código
|
||||
const NavItem = ({ icon, label, active = false }: { icon: any, label: string, active?: boolean }) => (
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-xl text-sm font-medium transition-all cursor-pointer ${
|
||||
active ? 'bg-blue-600 text-white shadow-md shadow-blue-200' : 'text-slate-500 hover:bg-slate-100'
|
||||
}`}>
|
||||
{icon}
|
||||
{label}
|
||||
</div>
|
||||
);
|
||||
|
||||
const ActivityItem = ({ user, action }: { user: string, action: string }) => (
|
||||
<div className="flex gap-2">
|
||||
<div className="w-6 h-6 bg-slate-200 rounded-full shrink-0" />
|
||||
<p className="text-[10px] leading-tight text-slate-600">
|
||||
<span className="font-bold block text-slate-900">{user}</span> {action}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
@@ -1,188 +0,0 @@
|
||||
"use client";
|
||||
import React, { useState, useCallback } from "react";
|
||||
import Cropper from "react-easy-crop";
|
||||
|
||||
const RATIOS = [
|
||||
{ label: "Hero Banner (Ultra Wide)", value: 21 / 9, text: "21/9" },
|
||||
{ label: "News Feed (Widescreen)", value: 16 / 9, text: "16/9" },
|
||||
{ label: "Profile / Post (Square)", value: 1 / 1, text: "1/1" },
|
||||
];
|
||||
|
||||
export default function FullPageEditor() {
|
||||
const [image, setImage] = useState<string | null>(null);
|
||||
const [crops, setCrops] = useState<Record<string, any>>(
|
||||
RATIOS.reduce((acc, r) => ({ ...acc, [r.text]: { x: 0, y: 0, zoom: 1 } }), {})
|
||||
);
|
||||
const [completedCrops, setCompletedCrops] = useState<Record<string, any>>({});
|
||||
const [isExporting, setIsExporting] = useState(false);
|
||||
const [results, setResults] = useState<Record<string, string>>({});
|
||||
|
||||
const onSelectFile = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => setImage(reader.result as string);
|
||||
reader.readAsDataURL(e.target.files[0]);
|
||||
}
|
||||
};
|
||||
|
||||
const handleExport = async () => {
|
||||
setIsExporting(true);
|
||||
const bundle: Record<string, string> = {};
|
||||
for (const ratio of RATIOS) {
|
||||
const crop = completedCrops[ratio.text];
|
||||
if (crop) bundle[ratio.text] = await getCroppedImg(image!, crop);
|
||||
}
|
||||
setResults(bundle);
|
||||
setIsExporting(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-zinc-950 text-zinc-100 font-sans selection:bg-indigo-500">
|
||||
{/* 1. Global Navigation */}
|
||||
<nav className="sticky top-0 z-50 border-b border-zinc-800 bg-zinc-950/80 backdrop-blur-md px-8 py-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="bg-indigo-600 p-2 rounded-lg font-black text-xs">FIX</div>
|
||||
<h1 className="text-lg font-bold tracking-tighter">IMAGE FRAMER <span className="text-zinc-500 font-medium text-sm ml-2">PRO v3.0</span></h1>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<label className="cursor-pointer bg-zinc-800 hover:bg-zinc-700 text-sm font-bold px-5 py-2 rounded-full transition-all border border-zinc-700">
|
||||
{image ? "New Photo" : "Upload Source"}
|
||||
<input type="file" accept="image/*" className="hidden" onChange={onSelectFile} />
|
||||
</label>
|
||||
{image && (
|
||||
<button
|
||||
onClick={handleExport}
|
||||
className="bg-indigo-600 hover:bg-indigo-500 text-white text-sm font-bold px-8 py-2 rounded-full shadow-lg shadow-indigo-900/20 transition-all active:scale-95"
|
||||
>
|
||||
{isExporting ? "Processing..." : "Generate Base64"}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* 2. Workspace Area */}
|
||||
<main className="max-w-screen-xl mx-auto p-8 space-y-20">
|
||||
{!image ? (
|
||||
<div className="h-[70vh] flex flex-col items-center justify-center border-2 border-dashed border-zinc-800 rounded-[3rem] bg-zinc-900/30">
|
||||
<div className="w-20 h-20 bg-zinc-800 rounded-full flex items-center justify-center text-3xl mb-6">📁</div>
|
||||
<h2 className="text-2xl font-bold mb-2">Editor is Empty</h2>
|
||||
<p className="text-zinc-500 max-w-xs text-center">Upload a high-resolution image to begin the multi-aspect framing process.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-32 pb-40">
|
||||
{RATIOS.map((ratio) => (
|
||||
<section key={ratio.text} className="group">
|
||||
{/* Section Header */}
|
||||
<div className="flex items-end justify-between mb-6 border-b border-zinc-800 pb-4">
|
||||
<div>
|
||||
<span className="text-indigo-500 text-xs font-black uppercase tracking-[0.2em]">Aspect Ratio</span>
|
||||
<h3 className="text-3xl font-bold mt-1">{ratio.label}</h3>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-zinc-500 text-xs font-mono uppercase">Current Zoom</p>
|
||||
<p className="text-2xl font-black">{Math.round((crops[ratio.text]?.zoom || 1) * 100)}%</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* BIG Editor Window */}
|
||||
<div className="relative w-full overflow-hidden rounded-[2rem] bg-zinc-900 shadow-2xl ring-1 ring-zinc-800 h-[600px]">
|
||||
<Cropper
|
||||
image={image}
|
||||
crop={{ x: crops[ratio.text].x, y: crops[ratio.text].y }}
|
||||
zoom={crops[ratio.text].zoom}
|
||||
aspect={ratio.value}
|
||||
onCropChange={(c) => setCrops(prev => ({ ...prev, [ratio.text]: { ...prev[ratio.text], ...c } }))}
|
||||
onZoomChange={(z) => setCrops(prev => ({ ...prev, [ratio.text]: { ...prev[ratio.text], zoom: z } }))}
|
||||
onCropComplete={(_, px) => setCompletedCrops(prev => ({ ...prev, [ratio.text]: px }))}
|
||||
objectFit="cover"
|
||||
showGrid={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Floating Zoom Control (Large & Accessible) */}
|
||||
<div className="mt-8 flex items-center gap-8 bg-zinc-900/50 p-6 rounded-2xl border border-zinc-800">
|
||||
<span className="text-xs font-bold text-zinc-500 uppercase tracking-widest min-w-[80px]">Adjust Zoom</span>
|
||||
<input
|
||||
type="range"
|
||||
min={1}
|
||||
max={3}
|
||||
step={0.01}
|
||||
value={crops[ratio.text].zoom}
|
||||
onChange={(e) => setCrops(prev => ({ ...prev, [ratio.text]: { ...prev[ratio.text], zoom: Number(e.target.value) } }))}
|
||||
className="flex-1 accent-indigo-500 h-2 bg-zinc-800 rounded-lg appearance-none cursor-pointer"
|
||||
/>
|
||||
<button
|
||||
onClick={() => setCrops(prev => ({ ...prev, [ratio.text]: { x:0, y:0, zoom: 1 } }))}
|
||||
className="text-[10px] font-black uppercase tracking-widest text-zinc-600 hover:text-white"
|
||||
>
|
||||
Reset
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
|
||||
{/* 3. Global Results Modal/Area */}
|
||||
{Object.keys(results).length > 0 && (
|
||||
<div className="fixed inset-0 z-[100] bg-zinc-950 flex flex-col">
|
||||
<header className="p-8 border-b border-zinc-800 flex justify-between items-center">
|
||||
<h2 className="text-2xl font-black">EXPORT BUNDLE</h2>
|
||||
<button onClick={() => setResults({})} className="text-zinc-500 hover:text-white font-bold">Close Editor</button>
|
||||
</header>
|
||||
<div className="flex-1 overflow-y-auto p-8 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
{Object.entries(results).map(([ratio, b64]) => (
|
||||
<div key={ratio} className="bg-zinc-900 rounded-3xl p-6 space-y-4 border border-zinc-800">
|
||||
<div className="flex justify-between items-center">
|
||||
<span className="text-xs font-bold text-indigo-500 uppercase">{ratio} Result</span>
|
||||
<button
|
||||
onClick={() => {navigator.clipboard.writeText(b64); alert('Copied!');}}
|
||||
className="text-[10px] bg-indigo-600 px-3 py-1 rounded-full font-bold"
|
||||
>
|
||||
Copy Base64
|
||||
</button>
|
||||
</div>
|
||||
<img src={b64} className="w-full rounded-xl border border-white/5 shadow-lg" alt="Crop preview" />
|
||||
<textarea
|
||||
readOnly
|
||||
value={b64}
|
||||
className="w-full h-24 bg-zinc-950 text-[10px] font-mono p-4 rounded-xl border-none outline-none text-zinc-600"
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ---------------- CANVAS EXPORT UTILITY ---------------- */
|
||||
async function getCroppedImg(imageSrc: string, pixelCrop: any): Promise<string> {
|
||||
const image = new Image();
|
||||
image.src = imageSrc;
|
||||
await new Promise((resolve) => (image.onload = resolve));
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) return "";
|
||||
|
||||
canvas.width = pixelCrop.width;
|
||||
canvas.height = pixelCrop.height;
|
||||
|
||||
ctx.drawImage(
|
||||
image,
|
||||
pixelCrop.x,
|
||||
pixelCrop.y,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height,
|
||||
0,
|
||||
0,
|
||||
pixelCrop.width,
|
||||
pixelCrop.height
|
||||
);
|
||||
|
||||
return canvas.toDataURL("image/jpeg", 0.9);
|
||||
}
|
||||
Reference in New Issue
Block a user