Titlecard Component (#56)

* feat(titlecard): initial titleCard

* fix(frontend): fix aspect ratio of titlecard

* style(frontend): title card styling - transition effect

* refactor(frontend): title card props - showDetail change

Co-authored-by: sct <sctsnipe@gmail.com>

src/components/TitleCard/index.tsx

@@ -0,0 +1,96 @@
+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}/100
+                  </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;

src/pages/index.tsx

@@ -1,12 +1,19 @@
 import React from 'react';
-import { NextPage } from 'next';
+import type { NextPage } from 'next';
+import TitleCard from '../components/TitleCard';
 
 const Index: NextPage = () => {
   return (
-    <div className="bg-blue-700 mx-4 my-2 px-4 py-2 w-64">
-      <h1 className="text-xl">Overseer</h1>
-      <p className="py-4">Here is some text</p>
-    </div>
+    <>
+      <TitleCard
+        image="image.tmdb.org/t/p/w600_and_h900_bestv2/iZf0KyrE25z1sage4SYFLCCrMi9.jpg"
+        year="2019"
+        summary="Greatest movie ever"
+        title="1918"
+        userScore={98}
+        status="Not Requested"
+      />
+    </>
   );
 };
 

src/styles/globals.css

@@ -6,3 +6,8 @@
   @apply inline-flex items-center px-4 py-2 border border-transparent text-sm leading-5 font-medium rounded-md text-white bg-indigo-600 transition ease-in-out duration-150;
   background-color: #cc7b19;
 }
+
+.titleCard {
+  @apply relative bg-cover rounded-lg;
+  padding-bottom: 150%;
+}