b4cddf41ea
- Fork elmeg-demo codebase for multi-band support - Add data importer infrastructure with base class - Create band-specific importers: - phish.py: Phish.net API v5 - grateful_dead.py: Grateful Stats API - setlistfm.py: Dead & Company, Billy Strings (Setlist.fm) - Add spec-kit configuration for Gemini - Update README with supported bands and architecture
62 lines
2.6 KiB
TypeScript
62 lines
2.6 KiB
TypeScript
import { useState } from "react"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { User } from "lucide-react"
|
|
|
|
interface Comment {
|
|
id: number
|
|
user_id: number
|
|
content: string
|
|
created_at: string
|
|
}
|
|
|
|
interface CommentSectionProps {
|
|
comments: Comment[]
|
|
onAddComment: (content: string) => void
|
|
}
|
|
|
|
export function CommentSection({ comments, onAddComment }: CommentSectionProps) {
|
|
const [newComment, setNewComment] = useState("")
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
if (!newComment.trim()) return
|
|
onAddComment(newComment)
|
|
setNewComment("")
|
|
}
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Comments ({comments.length})</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<form onSubmit={handleSubmit} className="flex gap-2">
|
|
<input
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
placeholder="Add a comment..."
|
|
value={newComment}
|
|
onChange={(e) => setNewComment(e.target.value)}
|
|
/>
|
|
<Button type="submit">Post</Button>
|
|
</form>
|
|
<div className="space-y-4">
|
|
{comments.map((comment) => (
|
|
<div key={comment.id} className="flex gap-3 items-start">
|
|
<div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center">
|
|
<User className="h-4 w-4" />
|
|
</div>
|
|
<div className="space-y-1">
|
|
<p className="text-sm font-medium">User #{comment.user_id}</p>
|
|
<p className="text-sm text-muted-foreground">{comment.content}</p>
|
|
<p className="text-xs text-muted-foreground/60">
|
|
{new Date(comment.created_at).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
}
|