Files
road-monitoring-ui/src/app/(modules)/upload/components/UploadActionsMenu.tsx

54 lines
1.4 KiB
TypeScript

'use client';
import { Eye, MoreVertical, PlayCircle } from 'lucide-react';
import { Button } from '@/components/ui/button';
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from '@/components/ui/dropdown-menu';
import type { UploadVideo } from '@/types';
interface UploadActionsMenuProps {
upload: UploadVideo;
onViewDetails: (upload: UploadVideo) => void;
onViewProcessedVideo: (upload: UploadVideo) => void;
}
export function UploadActionsMenu({
upload,
onViewDetails,
onViewProcessedVideo,
}: UploadActionsMenuProps) {
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button
type="button"
variant="ghost"
size="icon"
className="size-8"
onClick={(event) => event.stopPropagation()}
>
<MoreVertical className="size-4" />
<span className="sr-only">Open actions</span>
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => onViewDetails(upload)}>
<Eye className="size-4" />
View Details
</DropdownMenuItem>
{upload.processed_video_url ? (
<DropdownMenuItem onClick={() => onViewProcessedVideo(upload)}>
<PlayCircle className="size-4" />
View Processed Video
</DropdownMenuItem>
) : null}
</DropdownMenuContent>
</DropdownMenu>
);
}