79 lines
2.6 KiB
TypeScript
79 lines
2.6 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Plus, Send } from 'lucide-react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { toast } from 'sonner';
|
|
|
|
export function QuickCaptureWidget() {
|
|
const [type, setType] = useState('task');
|
|
const [title, setTitle] = useState('');
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
async function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!title.trim()) return;
|
|
|
|
setSubmitting(true);
|
|
try {
|
|
const res = await fetch('/api/quick-capture', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ type, text: title.trim() }),
|
|
});
|
|
|
|
if (res.ok) {
|
|
setTitle('');
|
|
toast.success(type.charAt(0).toUpperCase() + type.slice(1) + ' created');
|
|
} else {
|
|
const err = await res.json().catch(() => ({ error: 'Unknown error' }));
|
|
toast.error(err.error || 'Failed to create');
|
|
}
|
|
} catch (err) {
|
|
console.error('Quick capture failed:', err);
|
|
toast.error('Failed to create');
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Card className="h-full border-0 shadow-none">
|
|
<CardHeader className="p-0 pb-3">
|
|
<CardTitle className="flex items-center gap-2 text-base">
|
|
<Plus className="h-4 w-4" aria-hidden="true" />
|
|
Quick Capture
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="p-0">
|
|
<form onSubmit={handleSubmit} className="flex gap-2">
|
|
<Select value={type} onValueChange={setType}>
|
|
<SelectTrigger className="w-24">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="task">Task</SelectItem>
|
|
<SelectItem value="habit">Habit</SelectItem>
|
|
<SelectItem value="note">Note</SelectItem>
|
|
<SelectItem value="project">Project</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<Input
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
placeholder="Quick add..."
|
|
className="flex-1"
|
|
/>
|
|
<Button type="button" size="icon" disabled={submitting || !title.trim()} onClick={(e) => { e.stopPropagation(); handleSubmit(e); }}>
|
|
<Send className="h-4 w-4" />
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|