96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
import { Play } from 'lucide-react';
|
|
import { OptimizedImage } from '../ui/optimized-image';
|
|
import { Post } from '../../types';
|
|
|
|
interface PostMediaProps {
|
|
type: Post['type'];
|
|
image?: string;
|
|
audioTrack?: Post['audioTrack'];
|
|
pollOptions?: Post['pollOptions'];
|
|
content?: string;
|
|
}
|
|
|
|
export function PostMedia({
|
|
type,
|
|
image,
|
|
audioTrack,
|
|
pollOptions,
|
|
content,
|
|
}: PostMediaProps) {
|
|
if (type === 'image' && image) {
|
|
return (
|
|
<div className="mt-2 mx-4 mb-2 rounded-xl overflow-hidden max-h-96 bg-background flex items-center justify-center cursor-pointer group">
|
|
<OptimizedImage
|
|
src={image}
|
|
alt={content?.substring(0, 50) || 'Post image'}
|
|
className="w-full h-full object-cover transition-transform duration-[var(--sumi-duration-normal)] group-hover:scale-105"
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type === 'audio' && audioTrack) {
|
|
return (
|
|
<div className="px-4 py-2">
|
|
<div className="bg-card p-4 rounded-xl flex items-center gap-4 border border-border hover:border-primary/20 transition-colors">
|
|
<div className="w-12 h-12 bg-card rounded-lg overflow-hidden relative group cursor-pointer">
|
|
<img
|
|
src={audioTrack.coverUrl}
|
|
alt={audioTrack.title || 'Track cover'}
|
|
className="w-full h-full object-cover transition-transform duration-[var(--sumi-duration-normal)] group-hover:scale-110"
|
|
/>
|
|
<div className="absolute inset-0 bg-background/40 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<Play className="w-5 h-5 text-foreground fill-current" />
|
|
</div>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<div className="text-sm font-bold text-foreground truncate">
|
|
{audioTrack.title}
|
|
</div>
|
|
<div className="text-xs text-muted-foreground truncate">
|
|
{audioTrack.artist}
|
|
</div>
|
|
<div className="h-6 flex items-center gap-0.5 mt-1 opacity-50">
|
|
{Array.from({ length: 40 }).map((_, i) => (
|
|
<div
|
|
key={i}
|
|
className="w-1 bg-primary rounded-full"
|
|
style={{ height: `${Math.random() * 100}%` }}
|
|
></div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (type === 'poll' && pollOptions) {
|
|
return (
|
|
<div className="px-4 py-2 space-y-2">
|
|
{pollOptions.map((opt, i) => (
|
|
<div
|
|
key={i}
|
|
className="relative h-10 bg-muted rounded-lg overflow-hidden cursor-pointer hover:bg-muted/50 transition-colors border border-border"
|
|
>
|
|
<div
|
|
className="absolute top-0 left-0 h-full bg-primary/10 transition-all duration-500"
|
|
style={{ width: `${opt.votes}%` }}
|
|
></div>
|
|
<div className="absolute inset-0 flex items-center justify-between px-4">
|
|
<span className="text-sm font-bold text-foreground">
|
|
{opt.label}
|
|
</span>
|
|
<span className="text-xs text-muted-foreground font-mono">{opt.votes}%</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div className="text-xs text-muted-foreground px-1">
|
|
Total votes: 124 · 2 days left
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|