Spaces:
Sleeping
Sleeping
File size: 2,632 Bytes
760b33c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
import React from 'react';
import { Card } from './ui/card';
import {
Lightbulb,
MessageCircleQuestion,
GraduationCap,
FileEdit,
Zap
} from 'lucide-react';
import type { LearningMode } from '../App';
interface ModeSelectorProps {
selectedMode: LearningMode;
onModeChange: (mode: LearningMode) => void;
}
const modes = [
{
id: 'concept' as LearningMode,
icon: Lightbulb,
title: 'Concept Explainer',
description: 'Break down complex topics',
color: 'from-blue-500 to-blue-600',
},
{
id: 'socratic' as LearningMode,
icon: MessageCircleQuestion,
title: 'Socratic Tutor',
description: 'Learn through questions',
color: 'from-purple-500 to-purple-600',
},
{
id: 'exam' as LearningMode,
icon: GraduationCap,
title: 'Exam Prep/Quiz',
description: 'Test your knowledge',
color: 'from-green-500 to-green-600',
},
{
id: 'assignment' as LearningMode,
icon: FileEdit,
title: 'Assignment Helper',
description: 'Get homework guidance',
color: 'from-orange-500 to-orange-600',
},
{
id: 'summary' as LearningMode,
icon: Zap,
title: 'Quick Summary',
description: 'Fast key points review',
color: 'from-pink-500 to-pink-600',
},
];
export function LearningModeSelector({ selectedMode, onModeChange }: ModeSelectorProps) {
return (
<div className="space-y-2">
{modes.map((mode) => {
const Icon = mode.icon;
const isSelected = selectedMode === mode.id;
return (
<Card
key={mode.id}
className={`
p-3 cursor-pointer transition-all duration-200
${isSelected
? 'border-primary bg-accent shadow-sm'
: 'hover:border-primary/50 hover:shadow-sm'
}
`}
onClick={() => onModeChange(mode.id)}
>
<div className="flex items-start gap-3">
<div className={`
w-10 h-10 rounded-lg bg-gradient-to-br ${mode.color}
flex items-center justify-center flex-shrink-0
`}>
<Icon className="h-5 w-5 text-white" />
</div>
<div className="flex-1 min-w-0">
<h4 className="text-sm mb-1">{mode.title}</h4>
<p className="text-xs text-muted-foreground">{mode.description}</p>
</div>
{isSelected && (
<div className="w-2 h-2 rounded-full bg-primary flex-shrink-0 mt-2" />
)}
</div>
</Card>
);
})}
</div>
);
}
|