overseerr/src/components/TitleCard/index.tsx

import React, { useState } from 'react';
import type { MediaType } from '../../../server/models/Search';
import Available from '../../assets/available.svg';
import Requested from '../../assets/requested.svg';
import Unavailable from '../../assets/unavailable.svg';
import { withProperties } from '../../utils/typeHelpers';
import Transition from '../Transition';
import Placeholder from './Placeholder';

interface TitleCardProps {
  image: string;
  summary: string;
  year: string;
  title: string;
  userScore: number;
  mediaType: MediaType;
  status?: MediaRequestStatus;
}

enum MediaRequestStatus {
  PENDING,
  APPROVED,
  DECLINED,
  AVAILABLE,
}

const TitleCard: React.FC<TitleCardProps> = ({
  image,
  summary,
  year,
  title,
  status,
  mediaType,
}) => {
  const [showDetail, setShowDetail] = useState(false);

  // Just to get the year from the date
  if (year) {
    year = year.slice(0, 4);
  }

  return (
    <div
      style={{
        width: 180,
        height: 270,
      }}
    >
      <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">
          <div
            className={`absolute left-0 top-0 rounded-tl-md rounded-br-md z-50 ${
              mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
            }`}
          >
            <div className="flex items-center text-center text-xs text-white h-4 px-2 py-1 font-normal">
              {mediaType === 'movie' ? 'MOVIE' : 'TV SHOW'}
            </div>
          </div>

          <div
            className="absolute right-0 top-0 z-50"
            style={{
              right: '-1px',
            }}
          >
            {status === MediaRequestStatus.AVAILABLE && (
              <Available className="rounded-tr-md" />
            )}
            {status === MediaRequestStatus.PENDING && (
              <Requested className="rounded-tr-md" />
            )}
            {status === MediaRequestStatus.APPROVED && (
              <Unavailable className="rounded-tr-md" />
            )}
          </div>

          <Transition
            show={showDetail}
            enter="transition ease-in-out duration-300 transform opacity-0"
            enterFrom="opacity-0"
            enterTo="opacity-100"
            leave="transition ease-in-out duration-300 transform opacity-100"
            leaveFrom="opacity-100"
            leaveTo="opacity-0"
          >
            <div
              className="absolute w-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden"
              style={{
                background:
                  'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)',
              }}
            >
              <div className="absolute bottom-0 w-full left-0 right-0">
                <div className="px-2 text-white">
                  <div className="text-sm">{year}</div>

                  <h1 className="text-xl leading-tight">{title}</h1>
                  <div
                    className="text-xs"
                    style={{
                      WebkitLineClamp: 3,
                      display: '-webkit-box',
                      overflow: 'hidden',
                      WebkitBoxOrient: 'vertical',
                    }}
                  >
                    {summary}
                  </div>
                </div>
                <div className="flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2">
                  <button className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm mr-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
                    <svg
                      className="w-4 mx-auto"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
                      />
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"
                      />
                    </svg>
                  </button>
                  <button className="w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-1 hover:bg-indigo-400 focus:border-indigo-700 focus:shadow-outline-indigo active:bg-indigo-700 transition ease-in-out duration-150">
                    <svg
                      className="w-4 mx-auto"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
                      />
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </Transition>
        </div>
      </div>
    </div>
  );
};

export default withProperties(TitleCard, { Placeholder });