23 lines
1.1 KiB
TypeScript
23 lines
1.1 KiB
TypeScript
|
|
import React from 'react';
|
|
import { Newspaper } from 'lucide-react';
|
|
import { useCTF } from './CTFContext';
|
|
|
|
export const Blog: React.FC = () => {
|
|
const { state } = useCTF();
|
|
return (
|
|
<div className="max-w-4xl mx-auto py-20 px-6">
|
|
<div className="mb-12 border-b-4 border-[#ff0000] pb-6"><h2 className="text-6xl font-black italic text-white uppercase flex items-center gap-4"><Newspaper size={48} className="text-[#ff0000]" /> BLOG_FEED</h2></div>
|
|
<div className="space-y-12">
|
|
{state.blogs.map((post) => (
|
|
<div key={post.id} className="hxp-border-purple bg-white/5 p-8 relative group">
|
|
<div className="absolute top-0 right-0 bg-[#bf00ff] text-black text-[10px] font-black px-4 py-1">{new Date(post.timestamp).toLocaleString()}</div>
|
|
<h3 className="text-3xl font-black text-white italic mb-4">{post.title}</h3>
|
|
<div className="text-slate-400 font-bold text-sm leading-relaxed whitespace-pre-wrap border-l-4 border-[#333] pl-6 py-2">{post.content}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|