Initial commit
This commit is contained in:
twotalesanimation
@@ -0,0 +1,210 @@
|
||||
// components/admin-notifications.tsx
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import { Heart, MessageCircle, BookOpen, List } from 'lucide-react';
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card';
|
||||
import Image from 'next/image';
|
||||
import { formatDistanceToNow } from 'date-fns';
|
||||
|
||||
interface Notification {
|
||||
id: string;
|
||||
type: 'like' | 'comment' | 'course_created' | 'playlist_created';
|
||||
user?: {
|
||||
id: string;
|
||||
name?: string;
|
||||
image?: string;
|
||||
email: string;
|
||||
} | null;
|
||||
video?: {
|
||||
id: string;
|
||||
title: string;
|
||||
};
|
||||
course?: {
|
||||
id: string;
|
||||
title: string;
|
||||
code: string;
|
||||
};
|
||||
playlist?: {
|
||||
id: string;
|
||||
title: string;
|
||||
courseTitle: string;
|
||||
};
|
||||
content: string | null;
|
||||
createdAt: Date;
|
||||
}
|
||||
|
||||
export function AdminNotifications() {
|
||||
const [notifications, setNotifications] = React.useState<Notification[]>([]);
|
||||
const [isLoading, setIsLoading] = React.useState(true);
|
||||
const [error, setError] = React.useState<string | null>(null);
|
||||
|
||||
React.useEffect(() => {
|
||||
const fetchNotifications = async () => {
|
||||
try {
|
||||
setIsLoading(true);
|
||||
const res = await fetch('/api/admin/notifications');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setNotifications(
|
||||
data.notifications.map((n: any) => ({
|
||||
...n,
|
||||
createdAt: new Date(n.createdAt),
|
||||
}))
|
||||
);
|
||||
} else {
|
||||
setError('Failed to fetch notifications');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Failed to fetch notifications:', err);
|
||||
setError('Error loading notifications');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchNotifications();
|
||||
|
||||
// Refresh notifications every 30 seconds
|
||||
const interval = setInterval(fetchNotifications, 30000);
|
||||
return () => clearInterval(interval);
|
||||
}, []);
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
Activity
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">Loading notifications...</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
Activity
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-red-500">{error}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (notifications.length === 0) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
Activity
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">No activity yet</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<MessageCircle className="w-5 h-5" />
|
||||
Activity ({notifications.length})
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 max-h-96 overflow-y-auto">
|
||||
{notifications.map((notification) => (
|
||||
<div
|
||||
key={notification.id}
|
||||
className="flex gap-3 pb-4 border-b last:border-b-0"
|
||||
>
|
||||
{notification.user?.image && (
|
||||
<div className="relative w-10 h-10 rounded-full overflow-hidden shrink-0">
|
||||
<Image
|
||||
src={notification.user.image}
|
||||
alt={notification.user.name ?? 'User'}
|
||||
fill
|
||||
unoptimized
|
||||
sizes="40px"
|
||||
className="object-cover"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{notification.type === 'course_created' && (
|
||||
<div className="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center shrink-0">
|
||||
<BookOpen className="w-5 h-5 text-purple-600" />
|
||||
</div>
|
||||
)}
|
||||
{notification.type === 'playlist_created' && (
|
||||
<div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center shrink-0">
|
||||
<List className="w-5 h-5 text-blue-600" />
|
||||
</div>
|
||||
)}
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
{notification.type === 'like' && (
|
||||
<Heart className="w-4 h-4 text-red-500 shrink-0" />
|
||||
)}
|
||||
{notification.type === 'comment' && (
|
||||
<MessageCircle className="w-4 h-4 text-blue-500 shrink-0" />
|
||||
)}
|
||||
{notification.type === 'course_created' && (
|
||||
<BookOpen className="w-4 h-4 text-purple-600 shrink-0" />
|
||||
)}
|
||||
{notification.type === 'playlist_created' && (
|
||||
<List className="w-4 h-4 text-blue-600 shrink-0" />
|
||||
)}
|
||||
<p className="text-sm font-medium truncate">
|
||||
{notification.user ? (
|
||||
notification.user.name || notification.user.email
|
||||
) : (
|
||||
'System'
|
||||
)}
|
||||
</p>
|
||||
<p className="text-xs text-muted-foreground shrink-0">
|
||||
{formatDistanceToNow(notification.createdAt, {
|
||||
addSuffix: true,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{notification.type === 'like' &&
|
||||
`liked ${notification.video?.title}`}
|
||||
{notification.type === 'comment' &&
|
||||
`commented on ${notification.video?.title}`}
|
||||
{notification.type === 'course_created' &&
|
||||
`created course: ${notification.course?.title}`}
|
||||
{notification.type === 'playlist_created' &&
|
||||
`created playlist: ${notification.playlist?.title}`}
|
||||
</p>
|
||||
{notification.content && (
|
||||
<p className="text-sm text-foreground mt-1 line-clamp-2">
|
||||
"{notification.content}"
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user