mirror of
https://github.com/harivansh-afk/RAG-ui.git
synced 2026-04-18 15:03:06 +00:00
Initial commit
This commit is contained in:
commit
ae239a2849
42 changed files with 6674 additions and 0 deletions
68
src/pages/dashboard/Settings.tsx
Normal file
68
src/pages/dashboard/Settings.tsx
Normal file
|
|
@ -0,0 +1,68 @@
|
|||
import React from 'react';
|
||||
import { Button } from '../../components/ui/Button';
|
||||
import { Card } from '../../components/ui/card';
|
||||
|
||||
function Settings() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold">Settings</h1>
|
||||
|
||||
<Card className="p-6">
|
||||
<h2 className="text-xl font-semibold">Profile Settings</h2>
|
||||
<div className="mt-4 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
Display Name
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
className="mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
|
||||
placeholder="your@email.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<h2 className="text-xl font-semibold">Notification Settings</h2>
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="font-medium">Email Notifications</h3>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Receive updates about your study progress
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="outline">Configure</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6">
|
||||
<h2 className="text-xl font-semibold">Account Settings</h2>
|
||||
<div className="mt-4 space-y-4">
|
||||
<div>
|
||||
<Button variant="outline" className="text-destructive">
|
||||
Delete Account
|
||||
</Button>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
This action cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Settings;
|
||||
53
src/pages/dashboard/ask.tsx
Normal file
53
src/pages/dashboard/ask.tsx
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
import React, { useState } from 'react';
|
||||
import { Send, Upload } from 'lucide-react';
|
||||
import { Button } from '../../components/ui/Button';
|
||||
|
||||
function AskQuestion() {
|
||||
const [question, setQuestion] = useState('');
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
// Handle question submission
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold">Ask a Question</h1>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="rounded-lg bg-card p-6 shadow-sm">
|
||||
<label className="block">
|
||||
<span className="text-sm font-medium text-foreground">
|
||||
What would you like to know?
|
||||
</span>
|
||||
<textarea
|
||||
value={question}
|
||||
onChange={(e) => setQuestion(e.target.value)}
|
||||
className="mt-2 block w-full rounded-lg border border-input px-4 py-2 focus:border-primary focus:ring-primary"
|
||||
rows={4}
|
||||
placeholder="Type your question here..."
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="rounded-lg bg-card p-6 shadow-sm">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-foreground">
|
||||
Upload Study Materials (Optional)
|
||||
</span>
|
||||
<Button variant="secondary" type="button" className="gap-2">
|
||||
<Upload className="h-4 w-4" />
|
||||
Upload Files
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full gap-2">
|
||||
<Send className="h-5 w-5" />
|
||||
Submit Question
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default AskQuestion;
|
||||
65
src/pages/dashboard/history.tsx
Normal file
65
src/pages/dashboard/history.tsx
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
import React from 'react';
|
||||
import { Calendar } from 'lucide-react';
|
||||
import { Card } from '../../components/ui/card';
|
||||
|
||||
const mockHistory = [
|
||||
{
|
||||
id: '1',
|
||||
date: new Date('2024-03-10'),
|
||||
activity: 'Studied Biology',
|
||||
duration: '2 hours',
|
||||
topics: ['Photosynthesis', 'Cell Structure'],
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
date: new Date('2024-03-09'),
|
||||
activity: 'Practice Problems',
|
||||
duration: '1.5 hours',
|
||||
topics: ['Algebra', 'Calculus'],
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
date: new Date('2024-03-08'),
|
||||
activity: 'Reading Assignment',
|
||||
duration: '1 hour',
|
||||
topics: ['Literature', 'Poetry Analysis'],
|
||||
},
|
||||
];
|
||||
|
||||
function StudyHistory() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold">Study History</h1>
|
||||
<div className="space-y-4">
|
||||
{mockHistory.map((item) => (
|
||||
<Card key={item.id} className="p-4">
|
||||
<div className="flex items-start space-x-4">
|
||||
<Calendar className="h-5 w-5 text-muted-foreground" />
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center justify-between">
|
||||
<h3 className="font-medium">{item.activity}</h3>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
{item.date.toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">Duration: {item.duration}</p>
|
||||
<div className="mt-2 flex flex-wrap gap-2">
|
||||
{item.topics.map((topic) => (
|
||||
<span
|
||||
key={topic}
|
||||
className="rounded-full bg-primary/10 px-2 py-1 text-xs text-primary"
|
||||
>
|
||||
{topic}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default StudyHistory;
|
||||
73
src/pages/dashboard/index.tsx
Normal file
73
src/pages/dashboard/index.tsx
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import React from 'react';
|
||||
import { Users, CreditCard, Activity, PlusCircle } from 'lucide-react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Button } from '../../components/ui/Button';
|
||||
import { QuestionList } from '../../components/dashboard/QuestionList';
|
||||
import { StatsCard } from '../../components/dashboard/StatsCard';
|
||||
import { Card } from '../../components/ui/card';
|
||||
import { Separator } from '../../components/ui/separator';
|
||||
|
||||
const mockQuestions = [
|
||||
{
|
||||
id: '1',
|
||||
text: 'How does photosynthesis work?',
|
||||
timestamp: new Date('2024-03-10'),
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
text: 'Explain the concept of supply and demand in economics.',
|
||||
timestamp: new Date('2024-03-09'),
|
||||
},
|
||||
];
|
||||
|
||||
function Dashboard() {
|
||||
return (
|
||||
<div className="space-y-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-3xl font-bold">Dashboard</h1>
|
||||
<Link to="/dashboard/ask">
|
||||
<Button className="gap-2">
|
||||
<PlusCircle className="h-5 w-5" />
|
||||
Ask a Question
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<StatsCard
|
||||
title="Total Questions"
|
||||
value="156"
|
||||
icon={<Users className="h-4 w-4 text-muted-foreground" />}
|
||||
trend={{ value: "+12%", label: "from last month" }}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Study Sessions"
|
||||
value="32"
|
||||
icon={<CreditCard className="h-4 w-4 text-muted-foreground" />}
|
||||
trend={{ value: "+8", label: "from last week" }}
|
||||
/>
|
||||
<StatsCard
|
||||
title="Active Streak"
|
||||
value="7 days"
|
||||
icon={<Activity className="h-4 w-4 text-muted-foreground" />}
|
||||
trend={{ value: "+2", label: "days" }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<div className="p-6">
|
||||
<h2 className="text-lg font-semibold">Recent Questions</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Your most recent study questions and their status.
|
||||
</p>
|
||||
</div>
|
||||
<Separator />
|
||||
<div className="p-6">
|
||||
<QuestionList questions={mockQuestions} />
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Dashboard;
|
||||
63
src/pages/dashboard/resources.tsx
Normal file
63
src/pages/dashboard/resources.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
import React from 'react';
|
||||
import { Book, File, Folder } from 'lucide-react';
|
||||
import { Card } from '../../components/ui/card';
|
||||
|
||||
const mockResources = [
|
||||
{
|
||||
id: '1',
|
||||
type: 'folder',
|
||||
name: 'Biology',
|
||||
itemCount: 12,
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
type: 'folder',
|
||||
name: 'Physics',
|
||||
itemCount: 8,
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
type: 'file',
|
||||
name: 'Math Notes.pdf',
|
||||
size: '2.4 MB',
|
||||
},
|
||||
{
|
||||
id: '4',
|
||||
type: 'book',
|
||||
name: 'Chemistry Textbook',
|
||||
author: 'John Smith',
|
||||
},
|
||||
];
|
||||
|
||||
function StudyResources() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold">Study Resources</h1>
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{mockResources.map((resource) => (
|
||||
<Card key={resource.id} className="p-4 hover:bg-muted/50 cursor-pointer">
|
||||
<div className="flex items-start space-x-4">
|
||||
{resource.type === 'folder' && <Folder className="h-6 w-6 text-blue-500" />}
|
||||
{resource.type === 'file' && <File className="h-6 w-6 text-green-500" />}
|
||||
{resource.type === 'book' && <Book className="h-6 w-6 text-purple-500" />}
|
||||
<div>
|
||||
<h3 className="font-medium">{resource.name}</h3>
|
||||
{resource.type === 'folder' && (
|
||||
<p className="text-sm text-muted-foreground">{resource.itemCount} items</p>
|
||||
)}
|
||||
{resource.type === 'file' && (
|
||||
<p className="text-sm text-muted-foreground">{resource.size}</p>
|
||||
)}
|
||||
{resource.type === 'book' && (
|
||||
<p className="text-sm text-muted-foreground">By {resource.author}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default StudyResources;
|
||||
25
src/pages/dashboard/upload.tsx
Normal file
25
src/pages/dashboard/upload.tsx
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
import React from 'react';
|
||||
import { Upload } from 'lucide-react';
|
||||
import { Button } from '../../components/ui/Button';
|
||||
|
||||
function UploadMaterials() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<h1 className="text-3xl font-bold">Upload Study Materials</h1>
|
||||
<div className="rounded-lg bg-card p-6 shadow-sm">
|
||||
<div className="flex flex-col items-center justify-center space-y-4 py-12">
|
||||
<Upload className="h-12 w-12 text-muted-foreground" />
|
||||
<div className="text-center">
|
||||
<h2 className="text-lg font-semibold">Drop your files here</h2>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
or click to browse from your computer
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="outline">Choose Files</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default UploadMaterials;
|
||||
Loading…
Add table
Add a link
Reference in a new issue