106 lines
3.4 KiB
TypeScript
106 lines
3.4 KiB
TypeScript
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card";
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/shared/components/ui/avatar";
|
|
import { EmptyState } from "@/shared/components/ui/empty-state";
|
|
import { Inbox } from "lucide-react";
|
|
|
|
interface SubmissionItem {
|
|
id: string;
|
|
studentName: string;
|
|
studentAvatar?: string;
|
|
assignment: string;
|
|
submittedAt: string;
|
|
status: "submitted" | "late";
|
|
}
|
|
|
|
const MOCK_SUBMISSIONS: SubmissionItem[] = [
|
|
{
|
|
id: "1",
|
|
studentName: "Alice Johnson",
|
|
assignment: "React Component Composition",
|
|
submittedAt: "10 minutes ago",
|
|
status: "submitted",
|
|
},
|
|
{
|
|
id: "2",
|
|
studentName: "Bob Smith",
|
|
assignment: "Design System Analysis",
|
|
submittedAt: "1 hour ago",
|
|
status: "submitted",
|
|
},
|
|
{
|
|
id: "3",
|
|
studentName: "Charlie Brown",
|
|
assignment: "React Component Composition",
|
|
submittedAt: "2 hours ago",
|
|
status: "late",
|
|
},
|
|
{
|
|
id: "4",
|
|
studentName: "Diana Prince",
|
|
assignment: "CSS Grid Layout",
|
|
submittedAt: "Yesterday",
|
|
status: "submitted",
|
|
},
|
|
{
|
|
id: "5",
|
|
studentName: "Evan Wright",
|
|
assignment: "Design System Analysis",
|
|
submittedAt: "Yesterday",
|
|
status: "submitted",
|
|
},
|
|
];
|
|
|
|
export function RecentSubmissions() {
|
|
const hasSubmissions = MOCK_SUBMISSIONS.length > 0;
|
|
|
|
return (
|
|
<Card className="col-span-4 lg:col-span-4">
|
|
<CardHeader>
|
|
<CardTitle>Recent Submissions</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{!hasSubmissions ? (
|
|
<EmptyState
|
|
icon={Inbox}
|
|
title="No New Submissions"
|
|
description="All caught up! There are no new submissions to review."
|
|
className="border-none h-[300px]"
|
|
/>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{MOCK_SUBMISSIONS.map((item) => (
|
|
<div key={item.id} className="flex items-center justify-between group">
|
|
<div className="flex items-center space-x-4">
|
|
<Avatar className="h-9 w-9">
|
|
<AvatarImage src={item.studentAvatar} alt={item.studentName} />
|
|
<AvatarFallback>{item.studentName.charAt(0)}</AvatarFallback>
|
|
</Avatar>
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium leading-none">
|
|
{item.studentName}
|
|
</p>
|
|
<p className="text-sm text-muted-foreground">
|
|
Submitted <span className="font-medium text-foreground">{item.assignment}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="text-sm text-muted-foreground">
|
|
{/* Using static date for demo to prevent hydration mismatch */}
|
|
{item.submittedAt}
|
|
</div>
|
|
{item.status === "late" && (
|
|
<span className="inline-flex items-center rounded-full border border-destructive px-2 py-0.5 text-xs font-semibold text-destructive transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2">
|
|
Late
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|