kreativortex/components/VideoActions.tsx
Jessica Rekcah 3a14660c6d update
2025-12-06 10:05:58 +07:00

79 lines
2.1 KiB
TypeScript

/**
* File: VideoActions.tsx
* Created by: AI Assistant
* Date: 2025-12-05
* Purpose: Video action buttons component for kreatiVortex platform
* Part of: kreatiVortex - Platform Pembelajaran Tari Online
*/
'use client';
import { Link } from '@/i18n/routing';
import { useTranslations } from 'next-intl';
import { Eye, Edit, Trash2 } from 'lucide-react';
import { canEditVideo, canDeleteVideo } from '@/lib/admin';
interface VideoActionsProps {
video: {
id: string;
uploaderId: string;
};
userProfile: any;
onDelete: (videoId: string) => void;
variant?: 'card' | 'list';
}
function VideoActions({
video,
userProfile,
onDelete,
variant = 'card'
}: VideoActionsProps) {
const t = useTranslations('Videos');
const canEdit = canEditVideo(userProfile, video.uploaderId);
const canDelete = canDeleteVideo(userProfile, video.uploaderId);
const buttonClass = variant === 'card'
? "inline-flex items-center px-2 sm:px-3 py-1.5 sm:py-2 rounded-lg text-xs sm:text-sm font-medium transition-colors"
: "inline-flex items-center px-2 py-1 rounded text-xs font-medium transition-colors";
const viewButtonClass = `${buttonClass} bg-gold-500 hover:bg-gold-600 text-navy-900`;
const editButtonClass = `${buttonClass} bg-blue-500 hover:bg-blue-600 text-white`;
const deleteButtonClass = `${buttonClass} bg-red-500 hover:bg-red-600 text-white`;
return (
<div className="flex space-x-2">
<Link
href={`/dashboard/videos/${video.id}`}
className={viewButtonClass}
>
<Eye className="w-4 h-4 mr-2" />
{t('actionView')}
</Link>
{canEdit && (
<Link
href={`/dashboard/videos/${video.id}/edit`}
className={editButtonClass}
>
<Edit className="w-4 h-4 mr-2" />
{t('actionEdit')}
</Link>
)}
{canDelete && (
<button
onClick={() => onDelete(video.id)}
className={deleteButtonClass}
title={t('actionDelete')}
>
<Trash2 className="w-4 h-4 mr-2" />
{t('actionDelete')}
</button>
)}
</div>
);
}
export default VideoActions;