'use client';
import Image from 'next/image'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { DialogContent } from '@/components/ui/dialog'; import { Calendar, Eye, Heart, MapPin, MessageCircle, Share2, User, } from 'lucide-react'; import { NewsItem } from '@/types/news.type'; import { getBadgeColor } from './news-event-system'; import { CommentSection } from './comment-section'; import { StarRating } from './star-rating';
interface NewsModalProps { item: NewsItem; onLike: (id: string) => void; onRate?: (id: string, rating: number) => void; onComment?: (id: string, content: string) => void; }
export const NewsModal = ({ item, onLike, onRate, onComment, }: NewsModalProps) => { const handleAddComment = (content: string) => { onComment?.(item.id, content); };
return ( <DialogContent className='max-w-4xl max-h-[90vh] overflow-y-auto p-0'> <div className='relative'> {/* Header Image */} <div className='relative h-64 w-full'> <Image src={ typeof item.image === 'string' ? item.image : item.image?.fileUrl || '/placeholder.svg' } alt={item.title} fill className='object-cover' /> <div className='absolute top-4 left-4'> <Badge className={getBadgeColor(item.type)}> {item.type.toUpperCase()} </Badge> </div> </div>
{/* Content */}
<div className='p-6'>
{/* Title and Meta */}
<div className='mb-4'>
<h1 className='text-2xl font-bold text-gray-800 mb-2'>
{item.title}
</h1>
<div className='flex items-center gap-4 text-sm text-gray-600 mb-4'>
<div className='flex items-center gap-1'>
<User className='w-4 h-4' />
<span>{item.instructor}</span>
</div>
<div className='flex items-center gap-1'>
<Calendar className='w-4 h-4' />
<span>{item.date}</span>
</div>
{item.location && (
<div className='flex items-center gap-1'>
<MapPin className='w-4 h-4' />
<span>{item.location}</span>
</div>
)}
<div className='flex items-center gap-1'>
<Eye className='w-4 h-4' />
<span>{item.views} lượt xem</span>
</div>
</div>
</div>
{/* Rating */}
<div className='flex items-center gap-4 mb-4'>
<div className='flex items-center gap-2'>
<span className='text-sm font-medium'>Đánh giá của bạn:</span>
<StarRating
rating={item.userRating}
onRate={(rating) => onRate?.(item.id, rating)}
/>
</div>
<div className='flex items-center gap-2'>
<span className='text-sm text-gray-600'>
Đánh giá trung bình:
</span>
<StarRating rating={item.rating} />
<span className='text-sm text-gray-600'>({item.rating})</span>
</div>
</div>
{/* Content */}
<div className='prose max-w-none mb-6'>
<p className='text-gray-700 leading-relaxed'>{item.content}</p>
</div>
{/* Action Buttons */}
<div className='flex items-center gap-4 mb-6 pb-4 border-b'>
<Button
variant={item.isLiked ? 'default' : 'outline'}
size='sm'
onClick={() => onLike(item.id)}
className={item.isLiked ? 'bg-red-500 hover:bg-red-600' : ''}
>
<Heart
className={`w-4 h-4 mr-2 ${item.isLiked ? 'fill-current' : ''}`}
/>
{item.likes} Thích
</Button>
<Button variant='outline' size='sm'>
<MessageCircle className='w-4 h-4 mr-2' />
{item.comments.length} Bình luận
</Button>
<Button variant='outline' size='sm'>
<Share2 className='w-4 h-4 mr-2' />
Chia sẻ
</Button>
</div>
{/* Comments Section */}
<CommentSection
comments={item.comments}
onAddComment={handleAddComment}
/>
</div>
</div>
</DialogContent>
); }; my modal look so ugly because it have scrollbar beside
I can see the issue with your modal - the default browser scrollbar is making it look unappealing. Here's an improved version that hides the scrollbar while maintaining scroll functionality and adds better styling:
scrollbar-hide utility class that completely hides the scrollbar while maintaining scroll functionalityflex-wrap to prevent layout breaking on smaller screensoverflow-hidden on the main container and overflow-y-auto only on the content areaIf you prefer a styled scrollbar instead of hiding it completely, you can replace scrollbar-hide with scrollbar-custom in the scrollable div. This provides a thin, subtle scrollbar that looks more modern.
The modal will now look much cleaner without the ugly default scrollbar, while still maintaining all the functionality for scrolling through long content.
in your modification, i can't scroll ???
You're right! I broke the scrolling functionality. Let me fix that. The issue is with the height constraints and flex layout. Here's the corrected version:
The key fixes:
max-h-[90vh] to the inner container to match the DialogContent heightmin-h-0 to the scrollable div - this is crucial for flex children to be able to shrink below their content sizeoverflow-hiddenNow the modal should scroll properly while still hiding the ugly scrollbar! The min-h-0 is the critical piece that allows the flex child to shrink and enable scrolling.
don't make image is absolute, & image is inside modal, don't make it covered the modal in left & right. it just stay in middle