New Titlecard Design - Desktop (#81)

* feat(frontend): title card desktop redesign

* refactor(frontend): title card desktop - update status prop

* fix(frontend): update props in search for titlecard

src/components/TitleCard/index.tsx

@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
-import Transition from '../Transition';
+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 {
@@ -9,9 +13,15 @@ interface TitleCardProps {
   year: string;
   title: string;
   userScore: number;
+  mediaType: MediaType;
+  status?: MediaRequestStatus;
+}
 
-  //TODO - change to ENUM
-  status: string;
+enum MediaRequestStatus {
+  PENDING,
+  APPROVED,
+  DECLINED,
+  AVAILABLE,
 }
 
 const TitleCard: React.FC<TitleCardProps> = ({
@@ -19,13 +29,23 @@ const TitleCard: React.FC<TitleCardProps> = ({
   summary,
   year,
   title,
-  userScore,
   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: 250 }}>
+    <div
+      style={{
+        width: 180,
+        height: 270,
+      }}
+    >
       <div
         className="titleCard"
         style={{
@@ -35,56 +55,105 @@ const TitleCard: React.FC<TitleCardProps> = ({
         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="translate-y-full opacity-0"
-            enterTo="translate-y-0 opacity-100"
+            enterFrom="opacity-0"
+            enterTo="opacity-100"
             leave="transition ease-in-out duration-300 transform opacity-100"
-            leaveFrom="translate-y-0 opacity-100"
-            leaveTo="translate-y-full opacity-0"
+            leaveFrom="opacity-100"
+            leaveTo="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>
+            <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="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>
+                  <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 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"
+                </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"
                     >
-                      <span className="ml-3">Request</span>
-                    </a>
-                  </div>
+                      <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>