generated from marciobever/template-astro-base
Optimized: Add selected theme CyberTheme.tsx
This commit is contained in:
parent
218781d126
commit
a39782cf88
1 changed files with 163 additions and 0 deletions
163
src/components/themes/CyberTheme.tsx
Normal file
163
src/components/themes/CyberTheme.tsx
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
import { useState, FormEvent } from "react";
|
||||
import { Terminal, Crosshair, Code, ShieldAlert, Wifi, Cpu, Eye, LockKeyhole, FolderLock, Database, MapPin, ChevronRight, Share, TriangleAlert, Globe, Share2 } from "lucide-react";
|
||||
import { useLanguage } from '../../lib/i18n';
|
||||
|
||||
const DICT: Record<string, any> = {
|
||||
pt: {
|
||||
back: "/cd root_dir",
|
||||
heroTitle: "O ZERO-DAY.LOG",
|
||||
heroDesc: "Registros restritos distribuídos sobre infosec, darknets e vulnerabilidades catastróficas L0.",
|
||||
btnDecrypt: "DECRYPT_FILE()",
|
||||
btnTerminal: "ACCESS_TERM()",
|
||||
feedTitle: "SYS.LOGS_STREAM",
|
||||
subscribeText: "Canal de transmissão de exploits prioridade vermelha.",
|
||||
subscribeBtn: "INIT_HANDSHAKE",
|
||||
sidebarAd: "S.P.O.N.S.O.R",
|
||||
adDesc: "VPN DESCENTRALIZADA OFUSCADA",
|
||||
statusMonitor: "SYS_NODE_MONITOR",
|
||||
articles: [
|
||||
{ id: "1", tag: "ZERO-DAY", title: "Exploit encontrado na rede principal Ethereum de custódia", excerpt: "Nossa equipe documentou um exploit RCE crítico na infraestrutura nativa.", date: "14:02:00", author: "SysAdmin_01", sev: "CRITICAL" },
|
||||
]
|
||||
},
|
||||
en: {
|
||||
back: "/cd root_dir",
|
||||
heroTitle: "THE ZERO-DAY.LOG",
|
||||
heroDesc: "Restricted distributed logs on infosec, darknets, and catastrophic L0 vulnerabilities.",
|
||||
btnDecrypt: "DECRYPT_FILE()",
|
||||
btnTerminal: "ACCESS_TERM()",
|
||||
feedTitle: "SYS.LOGS_STREAM",
|
||||
subscribeText: "Red priority exploit transmission channel.",
|
||||
subscribeBtn: "INIT_HANDSHAKE",
|
||||
sidebarAd: "S.P.O.N.S.O.R",
|
||||
adDesc: "OBFUSCATED DECENTRALIZED VPN",
|
||||
statusMonitor: "SYS_NODE_MONITOR",
|
||||
articles: [
|
||||
{ id: "1", tag: "ZERO-DAY", title: "Zero-Day Exploit found on core custodial network", excerpt: "Our analytical team documented a critical RCE exploit within standard core architecture.", date: "14:02:00", author: "SysAdmin_01", sev: "CRITICAL" },
|
||||
]
|
||||
},
|
||||
es: {
|
||||
back: "/cd root_dir",
|
||||
heroTitle: "EL ZERO-DAY.LOG",
|
||||
heroDesc: "Registros distribuidos restringidos sobre infosec y vulnerabilidades catastróficas.",
|
||||
btnDecrypt: "DESCIFRAR_ARCHIVO()",
|
||||
btnTerminal: "ACCESO_TERM()",
|
||||
feedTitle: "FLUJO.SYS_LOGS",
|
||||
subscribeText: "Canal de distribución de exploits, prioridad roja.",
|
||||
subscribeBtn: "INICIAR_HANDSHAKE",
|
||||
sidebarAd: "P.A.T.R.O.C.I.N.A.D.O.R",
|
||||
adDesc: "VPN DESCENTRALIZADA OFUSCADA",
|
||||
statusMonitor: "MONITOR_DE_NODOS_SYS",
|
||||
articles: [
|
||||
{ id: "1", tag: "ZERO-DAY", title: "Exploit crítico en la red principal de custodia", excerpt: "El equipo documentó un exploit RCE mortal en la infraestructura estándar nativa.", date: "14:02:00", author: "SysAdmin_01", sev: "CRITICAL" },
|
||||
]
|
||||
}
|
||||
};
|
||||
|
||||
export default function CyberTheme({ posts = [], currentArticle, viewState: initialView = "home" }: any) {
|
||||
const { lang } = useLanguage();
|
||||
const ui = (typeof DICT !== "undefined" ? DICT : {})?.[lang] || (typeof DICT !== "undefined" ? DICT : {})?.["pt"];
|
||||
const [viewState, setViewState] = useState(initialView);
|
||||
|
||||
const activeArticle = viewState === "article" ? (currentArticle || posts[0]) : null;
|
||||
const displayPosts = posts.length > 0 ? posts : ui.articles;
|
||||
|
||||
const handleSimulatedAction = (e: any, msg: string) => {
|
||||
e.preventDefault();
|
||||
console.log(`[SYS_PROMPT] ${msg}`);
|
||||
};
|
||||
|
||||
const severityColor = (sev: string = "MED") => {
|
||||
switch (sev) {
|
||||
case "CRITICAL": return "text-red-500 border-red-500/50 bg-red-500/10";
|
||||
case "HIGH": return "text-orange-500 border-orange-500/50 bg-orange-500/10";
|
||||
case "MED": return "text-yellow-500 border-yellow-500/50 bg-yellow-500/10";
|
||||
default: return "text-[#00ff9d] border-[#00ff9d]/50 bg-[#00ff9d]/10";
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
const safeArticle = currentArticle || posts?.[0] || activeArticle || {
|
||||
id: 'fallback',
|
||||
tag: 'SYSTEM',
|
||||
title: 'Security Event',
|
||||
excerpt: 'Static page content.',
|
||||
date: '00:00:00',
|
||||
author: 'SYSTEM',
|
||||
sev: 'LOW',
|
||||
content: ''
|
||||
};
|
||||
return (
|
||||
<div className="cyber-scroll-container bg-[#020202] text-[#00ff9d] min-h-screen font-['Space_Mono'] overflow-hidden flex flex-col selection:bg-[#00ff9d] selection:text-black shadow-[inset_0_0_150px_rgba(0,255,157,0.03)]">
|
||||
<header className="h-14 border-b border-[#00ff9d]/20 bg-[#020202] flex items-center justify-between px-4 z-40 relative">
|
||||
<div className="flex items-center gap-4 cursor-pointer" onClick={() => setViewState("home")}>
|
||||
<div className="bg-[#00ff9d] text-black w-8 h-8 flex items-center justify-center font-black">
|
||||
<Terminal className="w-5 h-5" />
|
||||
</div>
|
||||
<span className="font-bold tracking-[0.2em] uppercase hidden sm:block">CYBER_SYS_CORE v9.4</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<aside className="w-64 border-r border-[#00ff9d]/20 hidden lg:flex flex-col bg-[#050505] overflow-y-auto">
|
||||
<nav className="p-4 flex flex-col gap-1 text-xs">
|
||||
<div className="flex items-center gap-2 text-white font-bold p-2 bg-[#00ff9d]/10 border border-[#00ff9d]/30 cursor-pointer" onClick={() => setViewState("home")}><FolderLock className="w-4 h-4 text-[#00ff9d]"/> /root</div>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main className="flex-1 bg-[#020202] relative overflow-y-auto w-full custom-cyber-scrollbar">
|
||||
<div className="max-w-[1000px] mx-auto p-4 sm:p-8">
|
||||
|
||||
{viewState === "home" ? (
|
||||
<>
|
||||
<div className="border border-[#00ff9d]/40 bg-[#00ff9d]/5 p-6 sm:p-10 relative overflow-hidden mb-10">
|
||||
<h1 className="text-3xl sm:text-5xl font-black mb-4 uppercase tracking-tighter text-white drop-shadow-[0_0_10px_rgba(0,255,157,0.5)]">{ui.heroTitle}</h1>
|
||||
<p className="text-[#00ff9d]/70 text-sm max-w-lg mb-8 leading-relaxed relative z-10">{ui.heroDesc}</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-sm font-black uppercase tracking-[0.2em] mb-6 flex items-center gap-3 border-b border-[#00ff9d]/20 pb-4">
|
||||
<Terminal className="w-5 h-5"/> {ui.feedTitle}
|
||||
</h3>
|
||||
<div className="flex flex-col border-l border-[#00ff9d]/20 ml-2">
|
||||
{displayPosts.map((art: any) => (
|
||||
<article key={art.id} className="relative pl-6 sm:pl-10 pb-10 group cursor-pointer last:pb-0">
|
||||
<a href={"/" + (art.slug || art.id)} className="block">
|
||||
<div className="absolute left-[-5px] top-1 w-[9px] h-[9px] bg-[#020202] border-2 border-[#00ff9d] rounded-full group-hover:bg-[#00ff9d]"></div>
|
||||
<div className="flex flex-wrap items-center gap-3 text-[10px] uppercase font-bold tracking-widest mb-3">
|
||||
<span className="text-[#00ff9d]/50">{art?.date || "00:00:00"}</span>
|
||||
<span className="text-white bg-[#00ff9d]/20 px-2 py-0.5 border border-[#00ff9d]/30">{art.tag || "POST"}</span>
|
||||
<span className={"px-2 py-0.5 border " + severityColor(art?.sev || "LOW")}>SEV: {art?.sev || "MED"}</span>
|
||||
</div>
|
||||
<h2 className="text-xl sm:text-2xl font-bold text-white mb-2 leading-tight group-hover:text-[#00ff9d] transition-colors">{art?.title}</h2>
|
||||
<p className="text-sm text-[#00ff9d]/60 mb-4">{art?.excerpt || art.description}</p>
|
||||
</a>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<article>
|
||||
<a href="/" className="mb-10 inline-block text-[10px] font-bold tracking-widest uppercase border border-[#00ff9d]/30 bg-[#00ff9d]/5 px-4 py-2 hover:bg-[#00ff9d] hover:text-black transition-colors">
|
||||
{ui.back}
|
||||
</a>
|
||||
<div className="mb-12">
|
||||
<div className="flex flex-wrap gap-4 text-[10px] font-black uppercase tracking-widest mb-4">
|
||||
<span className={"border px-3 py-1 " + severityColor(safeArticle?.sev || "LOW")}>SEVERITY: {safeArticle?.sev || "MED"}</span>
|
||||
<span className="border border-[#00ff9d]/30 text-[#00ff9d] bg-[#00ff9d]/5 px-3 py-1">AUTHOR_ID: {safeArticle?.author || "SysAdmin"}</span>
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-black text-white leading-tight mb-8 drop-shadow-[0_0_15px_rgba(0,255,157,0.3)]">{safeArticle?.title}</h1>
|
||||
</div>
|
||||
<div className="prose prose-invert prose-lg max-w-none prose-p:text-[#00ff9d]/80 prose-p:font-['Space_Mono'] prose-p:leading-relaxed prose-headings:font-bold prose-headings:text-white prose-headings:uppercase prose-headings:tracking-widest">
|
||||
<div className="bg-[#00ff9d]/5 border-l-4 border-[#00ff9d] p-6 text-xl text-white font-bold leading-normal mb-10">
|
||||
{safeArticle?.excerpt || safeArticle?.description}
|
||||
</div>
|
||||
<div dangerouslySetInnerHTML={{ __html: safeArticle?.content || "" }} />
|
||||
</div>
|
||||
</article>
|
||||
)}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in a new issue