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

64 lines
1.6 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;
onViewVideo: (upload: UploadVideo) => void;
onViewDetails: (upload: UploadVideo) => void;
}
export function UploadActionsMenu({
upload,
onViewVideo,
onViewDetails,
}: 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">
{upload.video_url ? (
<DropdownMenuItem
onClick={(event) => {
event.stopPropagation();
onViewVideo(upload);
}}
>
<PlayCircle className="size-4" />
View Video
</DropdownMenuItem>
) : null}
<DropdownMenuItem
onClick={(event) => {
event.stopPropagation();
onViewDetails(upload);
}}
>
<Eye className="size-4" />
View Details
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
);
}