70 lines
3.3 KiB
TypeScript
70 lines
3.3 KiB
TypeScript
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Folder, FileText, Download, PlaySquare } from "lucide-react"
|
|
|
|
export default function MaterialsPage() {
|
|
const folders = [
|
|
{ name: "Physics Formula Sheets", items: 12, color: "text-blue-500" },
|
|
{ name: "Organic Chem Mind Maps", items: 8, color: "text-emerald-500" },
|
|
{ name: "Biology NCERT Highlights", items: 22, color: "text-rose-500" },
|
|
{ name: "Past Year Papers (2015-2025)", items: 10, color: "text-amber-500" },
|
|
]
|
|
|
|
const recentFiles = [
|
|
{ name: "Kinematics 1D & 2D Rapid Revision.pdf", type: "PDF", size: "2.4 MB" },
|
|
{ name: "S-Block Elements Trick Video.mp4", type: "Video", size: "45 MB" },
|
|
{ name: "Human Reproduction Master Notes.pdf", type: "PDF", size: "8.1 MB" },
|
|
]
|
|
|
|
return (
|
|
<div className="p-8 space-y-8 animate-in fade-in slide-in-from-bottom-4 duration-500 max-w-6xl mx-auto">
|
|
<div>
|
|
<h1 className="text-3xl font-bold tracking-tight">Study Materials</h1>
|
|
<p className="text-muted-foreground mt-1 font-medium">High-yield notes, mind maps, and video lectures.</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
{folders.map((folder, i) => (
|
|
<Card key={i} className="hover:bg-secondary/50 cursor-pointer transition-colors border-border shadow-none">
|
|
<CardContent className="p-6">
|
|
<Folder size={40} className={`${folder.color} mb-4`} />
|
|
<h3 className="font-bold">{folder.name}</h3>
|
|
<p className="text-sm text-muted-foreground mt-1 font-medium">{folder.items} Files</p>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
|
|
<div className="pt-6">
|
|
<h2 className="text-xl font-bold border-b border-border pb-2 mb-4">Recently Accessed</h2>
|
|
<div className="bg-secondary/10 border border-border rounded-xl overflow-hidden">
|
|
<table className="w-full text-left text-sm">
|
|
<thead className="bg-secondary/30 text-muted-foreground border-b border-border">
|
|
<tr>
|
|
<th className="px-6 py-4 font-semibold">File Name</th>
|
|
<th className="px-6 py-4 font-semibold">Type</th>
|
|
<th className="px-6 py-4 font-semibold">Size</th>
|
|
<th className="px-6 py-4 font-semibold text-right">Download</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-border">
|
|
{recentFiles.map((file, i) => (
|
|
<tr key={i} className="hover:bg-secondary/20 transition-colors cursor-pointer group">
|
|
<td className="px-6 py-4 font-medium flex items-center gap-3">
|
|
{file.type === 'PDF' ? <FileText size={18} className="text-red-400" /> : <PlaySquare size={18} className="text-blue-400" />}
|
|
{file.name}
|
|
</td>
|
|
<td className="px-6 py-4 text-muted-foreground">{file.type}</td>
|
|
<td className="px-6 py-4 text-muted-foreground">{file.size}</td>
|
|
<td className="px-6 py-4 text-right">
|
|
<button className="p-2 hover:text-[#00F0FF] hover:bg-secondary rounded-lg transition-colors inline-block"><Download size={18} /></button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|