feat: upcoming/trending list views and larger title cards

src/components/Common/Header/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+interface HeaderProps {
+  extraMargin?: number;
+}
+
+const Header: React.FC<HeaderProps> = ({ children, extraMargin = 0 }) => {
+  return (
+    <div className="md:flex md:items-center md:justify-between mt-8 mb-8">
+      <div className={`flex-1 min-w-0 mx-${extraMargin}`}>
+        <h2 className="text-2xl font-bold leading-7 text-cool-gray-100 sm:text-4xl sm:leading-9 truncate sm:overflow-visible">
+          <span className="bg-clip-text text-transparent bg-gradient-to-br from-indigo-400 to-purple-400">
+            {children}
+          </span>
+        </h2>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

src/components/Common/ListView/index.tsx

@@ -31,7 +31,7 @@ const ListView: React.FC<ListViewProps> = ({
           No Results
         </div>
       )}
-      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5">
+      <ul className="grid grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-7">
         {items?.map((title) => {
           let titleCard: React.ReactNode;
 
@@ -47,6 +47,7 @@ const ListView: React.FC<ListViewProps> = ({
                   userScore={title.voteAverage}
                   year={title.releaseDate}
                   mediaType={title.mediaType}
+                  canExpand
                 />
               );
               break;
@@ -61,12 +62,17 @@ const ListView: React.FC<ListViewProps> = ({
                   userScore={title.voteAverage}
                   year={title.firstAirDate}
                   mediaType={title.mediaType}
+                  canExpand
                 />
               );
               break;
             case 'person':
               titleCard = (
-                <PersonCard name={title.name} profilePath={title.profilePath} />
+                <PersonCard
+                  name={title.name}
+                  profilePath={title.profilePath}
+                  canExpand
+                />
               );
               break;
           }
@@ -82,12 +88,12 @@ const ListView: React.FC<ListViewProps> = ({
         })}
         {isLoading &&
           !isReachingEnd &&
-          [...Array(10)].map((_item, i) => (
+          [...Array(20)].map((_item, i) => (
             <li
               key={`placeholder-${i}`}
               className="col-span-1 flex flex-col text-center items-center"
             >
-              <TitleCard.Placeholder />
+              <TitleCard.Placeholder canExpand />
             </li>
           ))}
       </ul>