You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
3.5 KiB
97 lines
3.5 KiB
import React, { useState } from 'react';
|
|
import Transition from '../Transition';
|
|
|
|
interface TitleCardProps {
|
|
image: string;
|
|
summary: string;
|
|
year: string;
|
|
title: string;
|
|
userScore: number;
|
|
|
|
//TODO - change to ENUM
|
|
status: string;
|
|
}
|
|
|
|
const TitleCard: React.FC<TitleCardProps> = ({
|
|
image,
|
|
summary,
|
|
year,
|
|
title,
|
|
userScore,
|
|
status,
|
|
}) => {
|
|
const [showDetail, setShowDetail] = useState(false);
|
|
|
|
return (
|
|
<div style={{ width: 250 }}>
|
|
<div
|
|
className="titleCard"
|
|
style={{
|
|
backgroundImage: `url(//${image})`,
|
|
}}
|
|
onMouseEnter={() => setShowDetail(true)}
|
|
onMouseLeave={() => setShowDetail(false)}
|
|
>
|
|
<div className="absolute top-0 h-full w-full bottom-0 left-0 right-0 overflow-hidden">
|
|
<Transition
|
|
show={showDetail}
|
|
enter="transition ease-in-out duration-300 transform opacity-0"
|
|
enterFrom="translate-y-full opacity-0"
|
|
enterTo="translate-y-0 opacity-100"
|
|
leave="transition ease-in-out duration-300 transform opacity-100"
|
|
leaveFrom="translate-y-0 opacity-100"
|
|
leaveTo="translate-y-full opacity-0"
|
|
>
|
|
<div className="absolute w-full bottom-0 bg-white rounded-lg overflow-hidden">
|
|
<div className="p-5">
|
|
<div className="text-blue-800 text-sm font-bold leading-4 ">
|
|
{year}
|
|
</div>
|
|
|
|
<h1 className="mt-2 text-2xl text-gray-900 leading-5 font-semibold">
|
|
{title}
|
|
</h1>
|
|
<div className="mt-2 text-gray-500 text-m font-semibold tracking-wide leading-tight truncate hover:overflow-visible">
|
|
{summary}
|
|
</div>
|
|
|
|
<div className="mt-1 flex justify-between">
|
|
<span className="mt-3 text-teal-800 text-sm font-semibold leading-4 ">
|
|
Status: {status}
|
|
</span>
|
|
|
|
<span className="mt-3 text-purple-800 text-sm font-semibold leading-4 ">
|
|
User Score: {userScore}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="border-t border-gray-200 rounded-b-lg">
|
|
<div className="-mt-px flex">
|
|
<div className="w-0 flex-1 flex border-r border-gray-200">
|
|
<a
|
|
href="#"
|
|
className="relative -mr-px w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-bl-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150"
|
|
>
|
|
<span className="ml-3">View More</span>
|
|
</a>
|
|
</div>
|
|
<div className="-ml-px w-0 flex-1 flex">
|
|
<a
|
|
href="#"
|
|
className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm leading-5 text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500 focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 transition ease-in-out duration-150"
|
|
>
|
|
<span className="ml-3">Request</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TitleCard;
|