Spaces:
Sleeping
Sleeping
File size: 5,177 Bytes
f871fed |
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 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
'use client';
import { useState } from 'react';
import { Star } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { cn } from '@/lib/utils';
interface CompletionDialogProps {
open: boolean;
onOpenChange: (open: boolean) => void;
sessionType: string;
topicName?: string;
onComplete: (rating: number, notes: string) => void;
isLoading?: boolean;
}
export function CompletionDialog({
open,
onOpenChange,
sessionType,
topicName,
onComplete,
isLoading,
}: CompletionDialogProps) {
const [rating, setRating] = useState(0);
const [hoveredRating, setHoveredRating] = useState(0);
const [notes, setNotes] = useState('');
const handleComplete = () => {
onComplete(rating || 3, notes);
// Reset for next time
setRating(0);
setNotes('');
};
const displayRating = hoveredRating || rating;
return (
<Dialog open={open} onOpenChange={onOpenChange}>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle className="flex items-center gap-2">
🎉 Session Complete!
</DialogTitle>
<DialogDescription>
{topicName ? (
<>You finished a <strong className="capitalize">{sessionType}</strong> session on <strong>{topicName}</strong>.</>
) : (
<>You finished a <strong className="capitalize">{sessionType}</strong> session.</>
)}
</DialogDescription>
</DialogHeader>
<div className="space-y-6 py-4">
{/* Star Rating */}
<div className="space-y-2">
<Label>How did it go?</Label>
<div className="flex items-center justify-center gap-1">
{[1, 2, 3, 4, 5].map((star) => (
<button
key={star}
type="button"
onClick={() => setRating(star)}
onMouseEnter={() => setHoveredRating(star)}
onMouseLeave={() => setHoveredRating(0)}
className="p-1 transition-transform hover:scale-110"
>
<Star
className={cn(
'h-8 w-8 transition-colors',
star <= displayRating
? 'fill-yellow-400 text-yellow-400'
: 'text-muted-foreground'
)}
/>
</button>
))}
</div>
<p className="text-center text-sm text-muted-foreground">
{displayRating === 1 && 'Struggled a lot 😓'}
{displayRating === 2 && 'Found it challenging 🤔'}
{displayRating === 3 && 'Did okay 👍'}
{displayRating === 4 && 'Went well! 😊'}
{displayRating === 5 && 'Crushed it! 🔥'}
{displayRating === 0 && 'Click to rate'}
</p>
</div>
{/* Notes */}
<div className="space-y-2">
<Label htmlFor="notes">Session Notes (optional)</Label>
<Textarea
id="notes"
placeholder="What did you learn? Any struggles or breakthroughs?"
value={notes}
onChange={(e) => setNotes(e.target.value)}
rows={3}
/>
</div>
</div>
<DialogFooter className="gap-2">
<Button
variant="outline"
onClick={() => onOpenChange(false)}
disabled={isLoading}
>
Cancel
</Button>
<Button
onClick={handleComplete}
disabled={isLoading}
className="bg-green-600 hover:bg-green-700"
>
{isLoading ? 'Saving...' : 'Complete Session'}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
);
}
|