Untitled
unknown
plain_text
2 months ago
4.5 kB
6
Indexable
import React, { useState } from 'react'; import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'; import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; import { Video, BookOpen, MessageSquare, Calculator } from 'lucide-react'; const LearningPlatform = () => { const [activeTab, setActiveTab] = useState('videos'); // Sample data structure const content = { videos: [ { id: 1, title: 'Structural Analysis Basics', url: '/placeholder-video-1' }, { id: 2, title: 'Soil Mechanics', url: '/placeholder-video-2' }, ], problems: [ { id: 1, title: 'Beam Design', difficulty: 'Medium' }, { id: 2, title: 'Foundation Analysis', difficulty: 'Hard' }, ], discussions: [ { id: 1, title: 'Steel Design Tips', replies: 15 }, { id: 2, title: 'Seismic Analysis Help', replies: 23 }, ] }; return ( <div className="w-full max-w-4xl mx-auto p-4"> <Card> <CardHeader> <CardTitle className="text-2xl font-bold">Civil Engineering Learning Hub</CardTitle> </CardHeader> <CardContent> <Tabs defaultValue="videos" className="w-full"> <TabsList className="grid w-full grid-cols-3 mb-4"> <TabsTrigger value="videos" className="flex items-center gap-2"> <Video className="w-4 h-4" /> Video Lectures </TabsTrigger> <TabsTrigger value="problems" className="flex items-center gap-2"> <Calculator className="w-4 h-4" /> Practice Problems </TabsTrigger> <TabsTrigger value="discussions" className="flex items-center gap-2"> <MessageSquare className="w-4 h-4" /> Discussion Forum </TabsTrigger> </TabsList> <TabsContent value="videos"> <div className="grid gap-4"> {content.videos.map(video => ( <Card key={video.id} className="p-4"> <div className="flex items-center gap-4"> <Video className="w-8 h-8 text-blue-500" /> <div> <h3 className="font-semibold">{video.title}</h3> <p className="text-sm text-gray-500">Click to watch lecture</p> </div> </div> </Card> ))} </div> </TabsContent> <TabsContent value="problems"> <div className="grid gap-4"> {content.problems.map(problem => ( <Card key={problem.id} className="p-4"> <div className="flex items-center justify-between"> <div className="flex items-center gap-4"> <Calculator className="w-8 h-8 text-green-500" /> <div> <h3 className="font-semibold">{problem.title}</h3> <p className="text-sm text-gray-500">Difficulty: {problem.difficulty}</p> </div> </div> <button className="px-4 py-2 bg-blue-500 text-white rounded-md"> Start </button> </div> </Card> ))} </div> </TabsContent> <TabsContent value="discussions"> <div className="grid gap-4"> {content.discussions.map(discussion => ( <Card key={discussion.id} className="p-4"> <div className="flex items-center justify-between"> <div className="flex items-center gap-4"> <MessageSquare className="w-8 h-8 text-purple-500" /> <div> <h3 className="font-semibold">{discussion.title}</h3> <p className="text-sm text-gray-500">{discussion.replies} replies</p> </div> </div> <button className="px-4 py-2 bg-purple-500 text-white rounded-md"> Join Discussion </button> </div> </Card> ))} </div> </TabsContent> </Tabs> </CardContent> </Card> </div> ); }; export default LearningPlatform;
Editor is loading...
Leave a Comment