1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-25 15:27:40 +01:00
smov/src/components/media/MediaCard.tsx
Jelle van Snik c763cfe0f0 Added fuzzy searching
Co-authored-by: James Hawkins <jhawki2005@gmail.com>
2022-02-20 15:49:21 +01:00

91 lines
2.5 KiB
TypeScript

import { getProviderFromId, MWMedia, MWMediaType } from "providers";
import { Link } from "react-router-dom";
import { Icon, Icons } from "components/Icon";
export interface MediaCardProps {
media: MWMedia;
watchedPercentage: Number;
linkable?: boolean;
}
export interface MediaMetaProps {
content: string[];
}
function MediaMeta(props: MediaMetaProps) {
return (
<p className="text-denim-700 text-xs font-semibold">
{props.content.map((item, index) => (
<span key={item}>
{index !== 0 ? (
<span className="mx-[0.6em] text-[1em]">&#9679;</span>
) : null}
{item}
</span>
))}
</p>
);
}
function MediaCardContent({
media,
linkable,
watchedPercentage,
}: MediaCardProps) {
const provider = getProviderFromId(media.providerId);
if (!provider) {
return null;
}
return (
<article
className={`bg-denim-300 group relative mb-4 flex overflow-hidden rounded py-4 px-5 ${
linkable ? "hover:bg-denim-400" : ""
}`}
>
{/* progress background */}
{watchedPercentage > 0 ? (
<div className="absolute top-0 left-0 right-0 bottom-0">
<div
className="bg-bink-300 relative h-full bg-opacity-30"
style={{
width: `${watchedPercentage}%`,
}}
>
<div className="from-bink-400 absolute right-0 top-0 bottom-0 ml-auto w-40 bg-gradient-to-l to-transparent opacity-40" />
</div>
</div>
) : null}
<div className="relative flex flex-1">
{/* card content */}
<div className="flex-1">
<h1 className="mb-1 font-bold text-white">{media.title}</h1>
<MediaMeta
content={[provider.displayName, media.mediaType, media.year]}
/>
</div>
{/* hoverable chevron */}
<div
className={`flex translate-x-3 items-center justify-end text-xl text-white opacity-0 transition-[opacity,transform] ${
linkable ? "group-hover:translate-x-0 group-hover:opacity-100" : ""
}`}
>
<Icon icon={Icons.CHEVRON_RIGHT} />
</div>
</div>
</article>
);
}
export function MediaCard(props: MediaCardProps) {
let link = "movie";
if (props.media.mediaType === MWMediaType.SERIES) link = "series";
const content = <MediaCardContent {...props} />;
if (!props.linkable) return <span>{content}</span>;
return <Link to={`/media/${link}`}>{content}</Link>;
}