inhale-dir
111 lines
3.9 KiB
TypeScript
111 lines
3.9 KiB
TypeScript
'use client'; // Or remove if no client-side interactivity needed for display
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardFooter,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
interface NewsArticle {
|
|
id: string;
|
|
title: string;
|
|
date: string;
|
|
author: string;
|
|
content: string; // Can be a snippet or full content
|
|
isFullContent?: boolean; // Optional: to toggle between snippet and full
|
|
}
|
|
|
|
const mockNewsData: NewsArticle[] = [
|
|
{
|
|
id: "news1",
|
|
title: "Important: Upcoming Maintenance Window",
|
|
date: "October 26, 2023",
|
|
author: "Admin Team",
|
|
content: "Please be advised that we will be performing scheduled maintenance on our servers this Saturday from 02:00 to 04:00 UTC. During this time, the indexer may be temporarily unavailable. We apologize for any inconvenience.",
|
|
},
|
|
{
|
|
id: "news2",
|
|
title: "New Feature Alert: Dark Mode Enhanced!",
|
|
date: "October 24, 2023",
|
|
author: "Dev Team",
|
|
content: "We're excited to announce that our dark mode has been revamped with even better contrast and new thematic colors. Check it out in your settings and let us know what you think! More UI enhancements are on the way.",
|
|
},
|
|
{
|
|
id: "news3",
|
|
title: "Welcome to the New NZB Indexer!",
|
|
date: "October 20, 2023",
|
|
author: "Admin",
|
|
content: "Welcome everyone to the newly launched NZB Indexer! We're thrilled to have you here. Explore the features, and feel free to reach out with any feedback or suggestions. Happy indexing!",
|
|
},
|
|
];
|
|
|
|
export default function NewsPage() {
|
|
// For now, we just display all content. Could add a toggle later.
|
|
// const [expandedArticles, setExpandedArticles] = useState<Set<string>>(new Set());
|
|
|
|
// const toggleReadMore = (id: string) => {
|
|
// setExpandedArticles(prev => {
|
|
// const newSet = new Set(prev);
|
|
// if (newSet.has(id)) {
|
|
// newSet.delete(id);
|
|
// } else {
|
|
// newSet.add(id);
|
|
// }
|
|
// return newSet;
|
|
// });
|
|
// };
|
|
|
|
return (
|
|
<div className="container mx-auto p-4 py-8 md:py-12 lg:py-16 xl:max-w-7xl space-y-8 lg:space-y-10">
|
|
<div className="flex justify-between items-center mb-6 lg:mb-8">
|
|
<h1 className="text-3xl lg:text-4xl font-bold tracking-tight">Site News & Announcements</h1>
|
|
<div className="space-x-2">
|
|
<Link href="/upgrade" passHref>
|
|
<Button variant="ghost">Upgrade</Button>
|
|
</Link>
|
|
<Link href="/settings" passHref>
|
|
<Button variant="ghost">Settings</Button>
|
|
</Link>
|
|
<Link href="/" passHref>
|
|
<Button variant="outline">Back to Indexer</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="space-y-6 lg:space-y-8">
|
|
{mockNewsData.map((article) => (
|
|
<Card key={article.id} className="shadow-md hover:shadow-lg transition-shadow duration-200">
|
|
<CardHeader>
|
|
<CardTitle className="text-xl lg:text-2xl">{article.title}</CardTitle>
|
|
<CardDescription>
|
|
Posted by {article.author} on {article.date}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<p className="text-sm text-foreground/90 whitespace-pre-line">
|
|
{article.content}
|
|
{/* {article.content.length > 200 && !expandedArticles.has(article.id)
|
|
? `${article.content.substring(0, 200)}...`
|
|
: article.content}
|
|
*/}
|
|
</p>
|
|
</CardContent>
|
|
{/* {article.content.length > 200 && (
|
|
<CardFooter>
|
|
<Button variant="link" onClick={() => toggleReadMore(article.id)} className="p-0 h-auto">
|
|
{expandedArticles.has(article.id) ? "Read Less" : "Read More"}
|
|
</Button>
|
|
</CardFooter>
|
|
)} */}
|
|
</Card>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|