You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.9 KiB
109 lines
3.9 KiB
6 months ago
|
import React, { useState } from 'react';
|
||
|
|
import { Card, CardContent } from "@/components/ui/card";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar";
|
||
|
|
import { Textarea } from "@/components/ui/textarea";
|
||
|
|
import { ScrollArea } from "@/components/ui/scroll-area";
|
||
|
|
import { MessageCircle, ThumbsUp, Reply } from "lucide-react";
|
||
|
|
|
||
|
|
const DiscussionSection = () => {
|
||
|
|
const [comment, setComment] = useState('');
|
||
|
|
const [discussions, setDiscussions] = useState([
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
user: 'Sarah Chen',
|
||
|
|
avatar: '/api/placeholder/32/32',
|
||
|
|
content: 'This is really interesting! I particularly liked the section about state management.',
|
||
|
|
likes: 12,
|
||
|
|
replies: 2,
|
||
|
|
timestamp: '2 hours ago'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
user: 'Alex Kim',
|
||
|
|
avatar: '/api/placeholder/32/32',
|
||
|
|
content: 'Great explanation! Could you elaborate more on the useEffect implementation?',
|
||
|
|
likes: 8,
|
||
|
|
replies: 1,
|
||
|
|
timestamp: '1 hour ago'
|
||
|
|
}
|
||
|
|
]);
|
||
|
|
|
||
|
|
const handleSubmit = () => {
|
||
|
|
if (comment.trim()) {
|
||
|
|
const newComment = {
|
||
|
|
id: discussions.length + 1,
|
||
|
|
user: 'Current User',
|
||
|
|
avatar: '/api/placeholder/32/32',
|
||
|
|
content: comment,
|
||
|
|
likes: 0,
|
||
|
|
replies: 0,
|
||
|
|
timestamp: 'Just now'
|
||
|
|
};
|
||
|
|
setDiscussions([...discussions, newComment]);
|
||
|
|
setComment('');
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Card className="w-full max-w-2xl mx-auto">
|
||
|
|
<CardContent className="p-6">
|
||
|
|
<div className="mb-6">
|
||
|
|
<div className="flex items-start gap-4">
|
||
|
|
<Avatar className="w-8 h-8">
|
||
|
|
<AvatarImage src="/api/placeholder/32/32" alt="User" />
|
||
|
|
<AvatarFallback>U</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<div className="flex-1">
|
||
|
|
<Textarea
|
||
|
|
placeholder="Add to the discussion..."
|
||
|
|
value={comment}
|
||
|
|
onChange={(e) => setComment(e.target.value)}
|
||
|
|
className="min-h-24 mb-2"
|
||
|
|
/>
|
||
|
|
<Button onClick={handleSubmit} className="float-right">
|
||
|
|
Post Comment
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<ScrollArea className="h-96">
|
||
|
|
<div className="space-y-6">
|
||
|
|
{discussions.map((discussion) => (
|
||
|
|
<div key={discussion.id} className="flex gap-4">
|
||
|
|
<Avatar className="w-8 h-8">
|
||
|
|
<AvatarImage src={discussion.avatar} alt={discussion.user} />
|
||
|
|
<AvatarFallback>{discussion.user[0]}</AvatarFallback>
|
||
|
|
</Avatar>
|
||
|
|
<div className="flex-1">
|
||
|
|
<div className="flex items-center gap-2 mb-1">
|
||
|
|
<span className="font-medium">{discussion.user}</span>
|
||
|
|
<span className="text-sm text-gray-500">{discussion.timestamp}</span>
|
||
|
|
</div>
|
||
|
|
<p className="text-gray-700 mb-2">{discussion.content}</p>
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<button className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
|
||
|
|
<ThumbsUp className="w-4 h-4" />
|
||
|
|
{discussion.likes}
|
||
|
|
</button>
|
||
|
|
<button className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
|
||
|
|
<Reply className="w-4 h-4" />
|
||
|
|
Reply
|
||
|
|
</button>
|
||
|
|
<button className="flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700">
|
||
|
|
<MessageCircle className="w-4 h-4" />
|
||
|
|
{discussion.replies} replies
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</ScrollArea>
|
||
|
|
</CardContent>
|
||
|
|
</Card>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default DiscussionSection;
|