114 lines
3.9 KiB
TypeScript
114 lines
3.9 KiB
TypeScript
/**
|
|
* File: page.tsx
|
|
* Created by: AI Assistant
|
|
* Date: 2025-11-29
|
|
* Purpose: Forum list page for kreatiVortex platform
|
|
* Part of: kreatiVortex - Platform Pembelajaran Tari Online
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { useParams } from 'next/navigation';
|
|
import { Link } from '@/i18n/routing';
|
|
import ActionButton from '@/components/ActionButton';
|
|
import { useFetch } from '@/hooks/useFetch';
|
|
import { useTranslations } from 'next-intl';
|
|
|
|
interface ForumData {
|
|
id: string;
|
|
title: string;
|
|
creator: {
|
|
user: {
|
|
name: string;
|
|
};
|
|
};
|
|
_count: {
|
|
posts: number;
|
|
};
|
|
updatedAt: string;
|
|
type: string;
|
|
}
|
|
|
|
interface ClassData {
|
|
id: string;
|
|
name: string;
|
|
code: string;
|
|
description: string;
|
|
}
|
|
|
|
export default function ForumPage() {
|
|
const params = useParams();
|
|
const classId = params.classId as string;
|
|
const t = useTranslations('Forum');
|
|
const { data: forums, loading } = useFetch<ForumData[]>(`/api/forums?classId=${classId}`);
|
|
const { data: classData } = useFetch<ClassData>(`/api/classes/${classId}`);
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-white">
|
|
{classData ? `${t('classForum')}: ${classData.name}` : t('classForum')}
|
|
</h1>
|
|
<p className="text-gray-400">
|
|
{classData ? classData.description : t('classForumSubtitle')}
|
|
</p>
|
|
</div>
|
|
<Link href={`/dashboard/forum/new?classId=${classId}`}>
|
|
<ActionButton>
|
|
{t('createButton')}
|
|
</ActionButton>
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="bg-white/10 backdrop-blur-sm rounded-xl border border-white/20 overflow-hidden">
|
|
{loading ? (
|
|
<div className="text-center text-gray-400 py-12">Loading...</div>
|
|
) : (
|
|
<div className="divide-y divide-white/10">
|
|
{forums?.map((forum) => (
|
|
<div key={forum.id} className="p-6 hover:bg-white/5 transition-colors">
|
|
<div className="flex justify-between items-start">
|
|
<div className="flex-1">
|
|
<div className="flex items-center space-x-2 mb-1">
|
|
<span className="px-2 py-0.5 bg-white/10 text-gray-400 text-xs rounded border border-white/10">
|
|
{forum.type}
|
|
</span>
|
|
</div>
|
|
<Link href={`/dashboard/forum/detail/${forum.id}`}>
|
|
<h3 className="text-lg font-semibold text-white mb-2 hover:text-gold-400 transition-colors">
|
|
{forum.title}
|
|
</h3>
|
|
</Link>
|
|
<div className="flex items-center text-sm text-gray-400 space-x-4">
|
|
<span className="flex items-center">
|
|
<span className="w-5 h-5 bg-gray-600 rounded-full flex items-center justify-center text-xs text-white font-bold mr-2">
|
|
{forum.creator.user.name.charAt(0)}
|
|
</span>
|
|
{forum.creator.user.name}
|
|
</span>
|
|
<span>•</span>
|
|
<span>{new Date(forum.updatedAt).toLocaleDateString()}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-6 text-gray-400">
|
|
<div className="text-center">
|
|
<div className="text-lg font-semibold text-white">{forum._count.posts}</div>
|
|
<div className="text-xs">{t('posts')}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
{(!forums || forums.length === 0) && (
|
|
<div className="text-center py-12 text-gray-400">
|
|
{t('noForums')}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |