Spaces:
Sleeping
Sleeping
File size: 3,494 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 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
import React from 'react';
import { Card } from './ui/card';
import { Button } from './ui/button';
import { Progress } from './ui/progress';
import { Brain, Calendar, Download, Info } from 'lucide-react';
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from './ui/tooltip';
import { Badge } from './ui/badge';
interface MemoryLineProps {
progress: number;
}
export function MemoryLine({ progress }: MemoryLineProps) {
const nextReview = progress < 25 ? 'T+7' : progress < 50 ? 'T+14' : progress < 75 ? 'T+30' : 'Complete';
return (
<Card className="p-4 space-y-3">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Brain className="h-4 w-4 text-purple-500" />
<h4 className="text-sm">Memory Line</h4>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="icon" className="h-5 w-5">
<Info className="h-3 w-3" />
</Button>
</TooltipTrigger>
<TooltipContent className="max-w-xs">
<p className="text-sm">
Track your learning retention using spaced repetition. Regular reviews help solidify understanding!
</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
<Badge variant="outline" className="text-xs">
{progress}%
</Badge>
</div>
{/* Progress Bar with Milestones */}
<div className="space-y-2">
<div className="relative">
<Progress value={progress} className="h-2" />
{/* Milestone Markers */}
<div className="absolute top-0 left-0 w-full h-2 flex justify-between pointer-events-none">
{[0, 25, 50, 75, 100].map((milestone) => (
<div
key={milestone}
className={`
w-3 h-3 rounded-full border-2 -mt-0.5
${progress >= milestone
? 'bg-primary border-primary'
: 'bg-background border-border'
}
`}
/>
))}
</div>
</div>
{/* Milestone Labels */}
<div className="flex justify-between text-xs text-muted-foreground">
<span>T+0</span>
<span>T+7</span>
<span>T+14</span>
<span>T+30</span>
<span>Done</span>
</div>
</div>
{/* Actions */}
<div className="flex items-center gap-2">
<Button variant="outline" size="sm" className="flex-1 gap-2">
<Calendar className="h-3 w-3" />
Next: {nextReview}
</Button>
<TooltipProvider>
<Tooltip>
<TooltipTrigger asChild>
<Button variant="ghost" size="sm" className="gap-2">
<Download className="h-3 w-3" />
Report
</Button>
</TooltipTrigger>
<TooltipContent>
<p>Download your learning progress report</p>
</TooltipContent>
</Tooltip>
</TooltipProvider>
</div>
{/* Review Explanation */}
<div className="pt-2 border-t border-border">
<p className="text-xs text-muted-foreground">
Based on spaced repetition for optimal retention
</p>
</div>
</Card>
);
}
|