104 lines
4.2 KiB
TypeScript
104 lines
4.2 KiB
TypeScript
/**
|
|
* File: page.tsx
|
|
* Created by: AI Assistant
|
|
* Date: 2025-11-29
|
|
* Purpose: Assignment detail page for kreatiVortex platform
|
|
* Part of: kreatiVortex - Platform Pembelajaran Tari Online
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import ActionButton from '@/components/ActionButton';
|
|
|
|
export default function AssignmentDetailPage() {
|
|
const assignment = {
|
|
id: 1,
|
|
title: 'Analisis Gerakan Tari Piring',
|
|
description: 'Buatlah makalah analisis mengenai teknik dasar gerakan Tari Piring. Fokuskan analisis pada: 1. Teknik memegang piring, 2. Koordinasi gerakan tangan dan kaki, 3. Pola lantai dasar. Panjang makalah minimal 500 kata.',
|
|
class: 'Tari Tradisional Indonesia 101',
|
|
educator: 'Sarah Pendidik',
|
|
dueDate: '2025-12-05T23:59:00Z',
|
|
maxScore: 100,
|
|
status: 'Belum Diserahkan',
|
|
mySubmission: null,
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-4xl mx-auto space-y-6">
|
|
<div className="flex justify-between items-center">
|
|
<Link href="/dashboard/assignments" className="text-gray-400 hover:text-white flex items-center">
|
|
<svg className="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 19l-7-7m0 0l7-7m-7 7h18" />
|
|
</svg>
|
|
Kembali ke Daftar Tugas
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
{/* Assignment Details */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20">
|
|
<div className="flex justify-between items-start mb-4">
|
|
<span className="px-3 py-1 text-blue-200 text-xs rounded-full border border-blue-500/30">
|
|
{assignment.class}
|
|
</span>
|
|
<span className="text-sm text-gray-400">
|
|
Oleh {assignment.educator}
|
|
</span>
|
|
</div>
|
|
|
|
<h1 className="text-2xl font-bold text-white mb-4">{assignment.title}</h1>
|
|
|
|
<div className="prose prose-invert max-w-none mb-6">
|
|
<p className="text-gray-300 leading-relaxed">
|
|
{assignment.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="border-t border-white/10 pt-4 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<p className="text-sm text-gray-400 mb-1">Tenggat Waktu</p>
|
|
<p className="text-white font-medium">
|
|
{new Date(assignment.dueDate).toLocaleString()}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm text-gray-400 mb-1">Nilai Maksimal</p>
|
|
<p className="text-white font-medium">{assignment.maxScore}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Submission Sidebar */}
|
|
<div className="lg:col-span-1">
|
|
<div className="bg-white/10 backdrop-blur-sm rounded-xl p-6 border border-white/20 sticky top-6">
|
|
<h3 className="text-lg font-semibold text-white mb-4">Pengumpulan Tugas</h3>
|
|
|
|
<div className="mb-6">
|
|
<p className="text-sm text-gray-400 mb-2">Status:</p>
|
|
<span className="px-3 py-1 bg-yellow-900/50 text-yellow-200 text-sm rounded border border-yellow-500/30 inline-block w-full text-center">
|
|
{assignment.status}
|
|
</span>
|
|
</div>
|
|
|
|
<div className="space-y-4">
|
|
<div className="border-2 border-dashed rounded-lg p-6 text-center hover:bg-white/5 transition-colors cursor-pointer">
|
|
<svg className="w-8 h-8 text-gray-400 mx-auto mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
|
</svg>
|
|
<p className="text-sm text-gray-300 font-medium">Upload File</p>
|
|
<p className="text-xs text-gray-500 mt-1">Word (DOCX) atau PDF</p>
|
|
</div>
|
|
|
|
<ActionButton className="w-full">
|
|
Serahkan Tugas
|
|
</ActionButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |