includes some adjustments to titlecard designpull/1051/head
sct
4 years ago
parent
57bc340840
commit
1c6914f5ce
@ -0,0 +1,46 @@
|
||||
import Link from 'next/link';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface CompanyCardProps {
|
||||
name: string;
|
||||
image: string;
|
||||
url: string;
|
||||
}
|
||||
|
||||
const CompanyCard: React.FC<CompanyCardProps> = ({ image, url, name }) => {
|
||||
const [isHovered, setHovered] = useState(false);
|
||||
|
||||
return (
|
||||
<Link href={url}>
|
||||
<a
|
||||
className={`relative flex items-center justify-center h-32 w-64 sm:h-36 sm:w-72 p-8 shadow transition ease-in-out duration-150 cursor-pointer transform-gpu ${
|
||||
isHovered ? 'bg-gray-700 scale-105' : 'bg-gray-800 scale-100'
|
||||
} ring-1 ring-gray-700 rounded-xl`}
|
||||
onMouseEnter={() => {
|
||||
setHovered(true);
|
||||
}}
|
||||
onMouseLeave={() => setHovered(false)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === 'Enter') {
|
||||
setHovered(true);
|
||||
}
|
||||
}}
|
||||
role="link"
|
||||
tabIndex={0}
|
||||
>
|
||||
<img
|
||||
src={image}
|
||||
alt={name}
|
||||
className="relative z-40 max-w-full max-h-full"
|
||||
/>
|
||||
<div
|
||||
className={`absolute bottom-0 left-0 right-0 h-12 rounded-b-xl bg-gradient-to-t z-0 ${
|
||||
isHovered ? 'from-gray-800' : 'from-gray-900'
|
||||
}`}
|
||||
/>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default CompanyCard;
|
||||
@ -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;
|
||||
@ -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;
|
||||
Loading…
Reference in new issue