62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import { useState } from "react"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
|
import { Send } from "lucide-react"
|
|
|
|
interface NoteFormProps {
|
|
leadId: string
|
|
}
|
|
|
|
export function NoteForm({ leadId }: NoteFormProps) {
|
|
const [note, setNote] = useState("")
|
|
const [submitting, setSubmitting] = useState(false)
|
|
|
|
const handleSubmit = () => {
|
|
if (!note.trim()) return
|
|
setSubmitting(true)
|
|
setTimeout(() => {
|
|
console.log("Note added:", { leadId, note })
|
|
setNote("")
|
|
setSubmitting(false)
|
|
}, 500)
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Add Note</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="flex gap-4">
|
|
<Avatar className="h-10 w-10 shrink-0">
|
|
<AvatarImage src="https://ui-avatars.com/api/?name=Sarah+Chen&background=1d4ed8&color=fff&size=64" />
|
|
<AvatarFallback>SC</AvatarFallback>
|
|
</Avatar>
|
|
<div className="flex-1 space-y-3">
|
|
<Textarea
|
|
placeholder="Write a note about this lead..."
|
|
value={note}
|
|
onChange={(e) => setNote(e.target.value)}
|
|
className="min-h-[100px] resize-none"
|
|
/>
|
|
<div className="flex justify-end">
|
|
<Button
|
|
onClick={handleSubmit}
|
|
disabled={!note.trim() || submitting}
|
|
className="gap-2"
|
|
>
|
|
<Send className="h-4 w-4" />
|
|
{submitting ? "Adding..." : "Add Note"}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|