110 lines
3.6 KiB
TypeScript
110 lines
3.6 KiB
TypeScript
"use client";
|
|
import { FC } from "react";
|
|
import { ReadMore } from "../../ReadMore";
|
|
import { Movie } from "@/types/global";
|
|
|
|
interface DefaultLayoutProps extends Movie {
|
|
showDayCounter?: boolean;
|
|
simpleToggle?: boolean;
|
|
alreadyInStore?: Movie | undefined;
|
|
isReleased: boolean;
|
|
handleAdd: () => void;
|
|
handleRemove: () => void;
|
|
handleSeen: () => void;
|
|
handleFavorite: () => void;
|
|
buttonClass: string;
|
|
}
|
|
|
|
export const DefaultLayout: FC<DefaultLayoutProps> = ({
|
|
title,
|
|
overview,
|
|
popularity,
|
|
release_date,
|
|
poster_path,
|
|
alreadyInStore,
|
|
isReleased,
|
|
handleAdd,
|
|
handleRemove,
|
|
handleSeen,
|
|
handleFavorite,
|
|
buttonClass,
|
|
}) => {
|
|
return (
|
|
<div className="flex w-full shadow-md rounded-lg overflow-hidden mx-auto group/card">
|
|
<div className="overflow-hidden rounded-xl relative movie-item text-white movie-card">
|
|
<div className="absolute inset-0 z-10 bg-gradient-to-t from-black via-gray-900 to-transparent"></div>
|
|
<div className="relative group z-10 p-6 space-y-6 h-full">
|
|
<div className="align-self-end w-full h-full flex flex-col">
|
|
<div className="h-64"></div>
|
|
<div className="flex flex-col space-y-2 inner mb-4">
|
|
<h3
|
|
className="text-lg leading-[1.3] font-bold text-white line-clamp-1"
|
|
title={title}
|
|
>
|
|
{title}
|
|
</h3>
|
|
<div className="text-xs text-gray-400">
|
|
<ReadMore text={overview} />
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row justify-between mt-auto">
|
|
<div className="flex flex-col">
|
|
<div className="text-sm text-gray-400">Popularity:</div>
|
|
<div className="popularity">{popularity}</div>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<div className="text-sm text-gray-400">Release date:</div>
|
|
<div className="release">{release_date}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="absolute top-0 z-10 bg-transparent inset-0 group-hover/card:bg-black/50 transition-all opacity-0 group-hover/card:opacity-100 flex flex-col justify-center">
|
|
{!alreadyInStore && (
|
|
<button
|
|
className={`${buttonClass} bg-primary/70 text-white hover:bg-primary`}
|
|
onClick={handleAdd}
|
|
>
|
|
Add to list
|
|
</button>
|
|
)}
|
|
{alreadyInStore && (
|
|
<>
|
|
{isReleased && (
|
|
<button
|
|
className={`${buttonClass} bg-accent/70 text-white hover:bg-accent`}
|
|
onClick={handleSeen}
|
|
>
|
|
{alreadyInStore.seen ? "Mark as unseen" : "Mark as seen"}
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
className={`${buttonClass} bg-amber-400/70 text-white hover:bg-amber-500`}
|
|
onClick={handleFavorite}
|
|
>
|
|
{alreadyInStore.favorite
|
|
? "Remove favorite"
|
|
: "Add to favorites"}
|
|
</button>
|
|
|
|
<button
|
|
className={`${buttonClass} bg-primary/70 text-white hover:bg-primary`}
|
|
onClick={handleRemove}
|
|
>
|
|
Remove from list
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
<figure className="absolute inset-0 w-full bottom-[20%]">
|
|
<img
|
|
className="w-full h-96 object-cover"
|
|
src={`http://image.tmdb.org/t/p/w342${poster_path}`}
|
|
/>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|