Media Item

1import * as React from 'react';
2import { ImageIcon, PlayCircle, ImagesIcon, LucideIcon, Music } from 'lucide-react';
3import { cn } from '@/lib/utils/deso';
4import { PostEngagement } from './post-engagement';
5 
6export type MediaType = 'image' | 'video' | 'audio' | 'carousel';
7 
8interface MediaItemProps {
9  imageUrl: string;
10  mediaType: MediaType;
11  viewCount: number;
12  showStats?: boolean;
13  onClick?: () => void;
14  className?: string;
15}
16 
17const mediaTypeConfig: {
18  [key in MediaType]: {
19    Icon: LucideIcon;
20  };
21} = {
22  image: { Icon: ImageIcon },
23  video: { Icon: PlayCircle },
24  audio: { Icon: Music },
25  carousel: { Icon: ImagesIcon },
26};
27 
28export const MediaItem = ({
29  imageUrl,
30  mediaType,
31  viewCount,
32  showStats = true,
33  onClick,
34  className,
35}: MediaItemProps) => {
36  const { Icon } = mediaTypeConfig[mediaType];
37 
38  return (
39    <button
40      onClick={onClick}
41      className={cn(
42        'group relative w-full overflow-hidden shadow-md transition-transform duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2',
43        className
44      )}
45    >
46      <img
47        src={imageUrl}
48        alt="Media content"
49        className="h-full w-full object-cover transition-opacity duration-200 group-hover:opacity-90"
50      />
51      <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-100 transition-opacity" />
52 
53      <div className="absolute bottom-4 left-4 z-10 opacity-100 transition-opacity">
54        <Icon className="h-5 w-5 text-white drop-shadow-md" />
55      </div>
56 
57      {showStats && (
58        <div className="absolute bottom-4 right-4 z-10 opacity-100 transition-opacity">
59          <PostEngagement
60            variant="view"
61            count={viewCount}
62            className="text-white drop-shadow-md"
63          />
64        </div>
65      )}
66    </button>
67  );
68};