38 lines
1.3 KiB
JavaScript
38 lines
1.3 KiB
JavaScript
import React from 'react';
|
|
import { Link } from 'react-router-dom';
|
|
import { getFileUrl } from '../../services/pocketbaseService';
|
|
import { FaStar } from 'react-icons/fa';
|
|
import { motion } from 'framer-motion';
|
|
|
|
const MobileMediaCard = ({ media }) => {
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
whileHover={{ y: -5 }}
|
|
className="bg-campfire-charcoal/20 backdrop-blur-md border border-campfire-ash/30 rounded-lg overflow-hidden"
|
|
>
|
|
<Link to={`/media/${media.path}`}>
|
|
<div className="relative aspect-[2/3]">
|
|
<img
|
|
src={getFileUrl(media, 'poster')}
|
|
alt={media.title}
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-campfire-dark via-transparent to-transparent"></div>
|
|
<div className="absolute bottom-0 left-0 right-0 p-3">
|
|
<h3 className="text-campfire-light font-semibold line-clamp-1">
|
|
{media.title}
|
|
</h3>
|
|
<div className="flex items-center text-campfire-amber mt-1">
|
|
<FaStar className="mr-1" />
|
|
<span>{media.average_rating?.toFixed(1) || '0.0'}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
</motion.div>
|
|
);
|
|
};
|
|
|
|
export default MobileMediaCard;
|