feat: add studio/network sliders to discover

includes some adjustments to titlecard design

src/components/Discover/DiscoverNetwork/index.tsx

@@ -49,7 +49,7 @@ const DiscoverTvNetwork: React.FC = () => {
           {firstResultData?.network.logoPath ? (
             <div className="flex justify-center mb-6">
               <img
-                src={`//image.tmdb.org/t/p/w780_filter(negate,000,666)/${firstResultData.network.logoPath}`}
+                src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.network.logoPath}`}
                 alt={firstResultData.network.name}
                 className="max-h-24 sm:max-h-32"
               />

src/components/Discover/DiscoverStudio/index.tsx

@@ -49,7 +49,7 @@ const DiscoverMovieStudio: React.FC = () => {
           {firstResultData?.studio.logoPath ? (
             <div className="flex justify-center mb-6">
               <img
-                src={`//image.tmdb.org/t/p/w780_filter(negate,000,666)/${firstResultData.studio.logoPath}`}
+                src={`//image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)${firstResultData.studio.logoPath}`}
                 alt={firstResultData.studio.name}
                 className="max-h-24 sm:max-h-32"
               />

src/components/Discover/NetworkSlider/index.tsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import CompanyCard from '../../CompanyCard';
+import Slider from '../../Slider';
+
+const messages = defineMessages({
+  networks: 'Networks',
+});
+
+interface Network {
+  name: string;
+  image: string;
+  url: string;
+}
+
+const networks: Network[] = [
+  {
+    name: 'Netflix',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/wwemzKWzjKYJFfCeiB57q3r4Bcm.png',
+    url: '/discover/tv/network/213',
+  },
+  {
+    name: 'Disney+',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/gJ8VX6JSu3ciXHuC2dDGAo2lvwM.png',
+    url: '/discover/tv/network/2739',
+  },
+  {
+    name: 'Prime Video',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ifhbNuuVnlwYy5oXA5VIb2YR8AZ.png',
+    url: '/discover/tv/network/1024',
+  },
+  {
+    name: 'HBO',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/tuomPhY2UtuPTqqFnKMVHvSb724.png',
+    url: '/discover/tv/network/49',
+  },
+  {
+    name: 'ABC',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ndAvF4JLsliGreX87jAc9GdjmJY.png',
+    url: '/discover/tv/network/2',
+  },
+  {
+    name: 'FOX',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/1DSpHrWyOORkL9N2QHX7Adt31mQ.png',
+    url: '/discover/tv/network/19',
+  },
+  {
+    name: 'Cinemax',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/6mSHSquNpfLgDdv6VnOOvC5Uz2h.png',
+    url: '/discover/tv/network/359',
+  },
+  {
+    name: 'AMC',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/pmvRmATOCaDykE6JrVoeYxlFHw3.png',
+    url: '/discover/tv/network/174',
+  },
+  {
+    name: 'Showtime',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/Allse9kbjiP6ExaQrnSpIhkurEi.png',
+    url: '/discover/tv/network/67',
+  },
+  {
+    name: 'Starz',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/8GJjw3HHsAJYwIWKIPBPfqMxlEa.png',
+    url: '/discover/tv/network/318',
+  },
+  {
+    name: 'The CW',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ge9hzeaU7nMtQ4PjkFlc68dGAJ9.png',
+    url: '/discover/tv/network/71',
+  },
+  {
+    name: 'NBC',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/o3OedEP0f9mfZr33jz2BfXOUK5.png',
+    url: '/discover/tv/network/6',
+  },
+  {
+    name: 'CBS',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/nm8d7P7MJNiBLdgIzUK0gkuEA4r.png',
+    url: '/discover/tv/network/16',
+  },
+  {
+    name: 'BBC One',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/mVn7xESaTNmjBUyUtGNvDQd3CT1.png',
+    url: '/discover/tv/network/4',
+  },
+  {
+    name: 'Cartoon Network',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/c5OC6oVCg6QP4eqzW6XIq17CQjI.png',
+    url: '/discover/tv/network/56',
+  },
+  {
+    name: 'Adult Swim',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/9AKyspxVzywuaMuZ1Bvilu8sXly.png',
+    url: '/discover/tv/network/80',
+  },
+  {
+    name: 'Nickelodeon',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ikZXxg6GnwpzqiZbRPhJGaZapqB.png',
+    url: '/discover/tv/network/13',
+  },
+];
+
+const NetworkSlider: React.FC = () => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
+        <div className="flex-1 min-w-0">
+          <div className="inline-flex items-center text-xl leading-7 text-gray-300 cursor-default sm:text-2xl sm:leading-9 sm:truncate">
+            <span>{intl.formatMessage(messages.networks)}</span>
+          </div>
+        </div>
+      </div>
+      <Slider
+        sliderKey="networks"
+        isLoading={false}
+        isEmpty={false}
+        items={networks.map((network, index) => (
+          <CompanyCard
+            key={`network-${index}`}
+            name={network.name}
+            image={network.image}
+            url={network.url}
+          />
+        ))}
+        emptyMessage=""
+      />
+    </>
+  );
+};
+
+export default NetworkSlider;

src/components/Discover/StudioSlider/index.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import CompanyCard from '../../CompanyCard';
+import Slider from '../../Slider';
+
+const messages = defineMessages({
+  studios: 'Studios',
+});
+
+interface Studio {
+  name: string;
+  image: string;
+  url: string;
+}
+
+const studios: Studio[] = [
+  {
+    name: 'Disney',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/wdrCwmRnLFJhEoH8GSfymY85KHT.png',
+    url: '/discover/movies/studio/2',
+  },
+  {
+    name: '20th Century Fox',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/qZCc1lty5FzX30aOCVRBLzaVmcp.png',
+    url: '/discover/movies/studio/25',
+  },
+  {
+    name: 'Sony Pictures',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/GagSvqWlyPdkFHMfQ3pNq6ix9P.png',
+    url: '/discover/movies/studio/34',
+  },
+  {
+    name: 'Warner Bros. Pictures',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/ky0xOc5OrhzkZ1N6KyUxacfQsCk.png',
+    url: '/discover/movies/studio/174',
+  },
+  {
+    name: 'Universal',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/8lvHyhjr8oUKOOy2dKXoALWKdp0.png',
+    url: '/discover/movies/studio/33',
+  },
+  {
+    name: 'Paramount',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/fycMZt242LVjagMByZOLUGbCvv3.png',
+    url: '/discover/movies/studio/4',
+  },
+  {
+    name: 'Pixar',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/1TjvGVDMYsj6JBxOAkUHpPEwLf7.png',
+    url: '/discover/movies/studio/3',
+  },
+  {
+    name: 'Dreamworks',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/kP7t6RwGz2AvvTkvnI1uteEwHet.png',
+    url: '/discover/movies/studio/521',
+  },
+  {
+    name: 'Marvel Studios',
+    image:
+      'http://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/hUzeosd33nzE5MCNsZxCGEKTXaQ.png',
+    url: '/discover/movies/studio/420',
+  },
+  {
+    name: 'DC',
+    image:
+      'https://image.tmdb.org/t/p/w780_filter(duotone,ffffff,bababa)/2Tc1P3Ac8M479naPp1kYT3izLS5.png',
+    url: '/discover/movies/studio/9993',
+  },
+];
+
+const StudioSlider: React.FC = () => {
+  const intl = useIntl();
+
+  return (
+    <>
+      <div className="mt-6 mb-4 md:flex md:items-center md:justify-between">
+        <div className="flex-1 min-w-0">
+          <div className="inline-flex items-center text-xl leading-7 text-gray-300 cursor-default sm:text-2xl sm:leading-9 sm:truncate">
+            <span>{intl.formatMessage(messages.studios)}</span>
+          </div>
+        </div>
+      </div>
+      <Slider
+        sliderKey="studios"
+        isLoading={false}
+        isEmpty={false}
+        items={studios.map((studio, index) => (
+          <CompanyCard
+            key={`studio-${index}`}
+            name={studio.name}
+            image={studio.image}
+            url={studio.url}
+          />
+        ))}
+        emptyMessage=""
+      />
+    </>
+  );
+};
+
+export default StudioSlider;

src/components/Discover/index.tsx

@@ -9,6 +9,8 @@ import type { RequestResultsResponse } from '../../../server/interfaces/api/requ
 import RequestCard from '../RequestCard';
 import MediaSlider from '../MediaSlider';
 import PageTitle from '../Common/PageTitle';
+import StudioSlider from './StudioSlider';
+import NetworkSlider from './NetworkSlider';
 
 const messages = defineMessages({
   discover: 'Discover',
@@ -112,6 +114,7 @@ const Discover: React.FC = () => {
         linkUrl="/discover/movies/upcoming"
         url="/api/v1/discover/movies/upcoming"
       />
+      <StudioSlider />
       <MediaSlider
         sliderKey="popular-tv"
         title={intl.formatMessage(messages.populartv)}
@@ -124,6 +127,7 @@ const Discover: React.FC = () => {
         url="/api/v1/discover/tv/upcoming"
         linkUrl="/discover/tv/upcoming"
       />
+      <NetworkSlider />
     </>
   );
 };