@ -159,155 +159,155 @@ const TitleCard: React.FC<TitleCardProps> = ({
leaveFrom = "opacity-100"
leaveTo = "opacity-0"
>
< Link href = { mediaType === 'movie' ? ` /movie/ ${ id } ` : ` /tv/ ${ id } ` } >
< a
className = "absolute w-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden cursor-pointer"
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" >
{ year && < div className = "text-sm" > { year } < / div > }
< div >
< Link href = { mediaType === 'movie' ? ` /movie/ ${ id } ` : ` /tv/ ${ id } ` } >
< a
className = "absolute w-full h-full text-left top-0 right-0 left-0 bottom-0 rounded-lg overflow-hidden cursor-pointer"
style = { {
background :
'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)' ,
} }
>
< div className = "flex items-end h-full w-full" >
< div className = "px-2 pb-11 text-white" >
{ year && < div className = "text-sm" > { year } < / div > }
< h1 className = "text-xl leading-tight whitespace-normal" >
{ title }
< / h1 >
< div
className = "text-xs whitespace-normal"
style = { {
WebkitLineClamp : 3 ,
display : '-webkit-box' ,
overflow : 'hidden' ,
WebkitBoxOrient : 'vertical' ,
} }
>
{ summary }
< / div >
< / div >
< div className = "flex justify-between left-0 bottom-0 right-0 top-0 px-2 py-2" >
< Link
href = {
mediaType === 'movie' ? ` /movie/ ${ id } ` : ` /tv/ ${ id } `
}
>
< a className = "cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-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 = "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 >
< / a >
< / Link >
{ ( ! currentStatus ||
currentStatus === MediaStatus . UNKNOWN ) && (
< button
onClick = { ( e ) = > {
e . preventDefault ( ) ;
setShowRequestModal ( true ) ;
< h1 className = "text-xl leading-tight whitespace-normal" >
{ title }
< / h1 >
< div
className = "text-xs whitespace-normal"
style = { {
WebkitLineClamp : 3 ,
display : '-webkit-box' ,
overflow : 'hidden' ,
WebkitBoxOrient : 'vertical' ,
} }
className = "w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:ring-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 >
) }
{ currentStatus === MediaStatus . PENDING && (
< button
className = "w-full h-7 text-center text-yellow-500 border border-yellow-500 rounded-sm ml-2 cursor-default"
disabled
>
< 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 = "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/ >
< / svg >
< / button >
) }
{ currentStatus === MediaStatus . PROCESSING && (
< button
className = "w-full h-7 text-center text-red-500 border border-red-500 rounded-sm ml-2 cursor-default"
disabled
>
< 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 = "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/ >
< / svg >
< / button >
) }
{ ( currentStatus === MediaStatus . AVAILABLE ||
currentStatus === MediaStatus . PARTIALLY_AVAILABLE ) && (
< button
className = "w-full h-7 text-center text-green-400 border border-green-400 rounded-sm ml-2 cursor-default"
disabled
>
< 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 = "M5 13l4 4L19 7"
/ >
< / svg >
< / button >
) }
{ summary }
< / div >
< / div >
< / div >
< / div >
< / a >
< / Link >
< / a >
< / Link >
< div className = "absolute flex justify-between left-0 bottom-0 right-0 px-2 py-2" >
< Link
href = { mediaType === 'movie' ? ` /movie/ ${ id } ` : ` /tv/ ${ id } ` }
>
< a className = "cursor-pointer flex w-full h-7 text-center text-white bg-indigo-500 rounded-sm hover:bg-indigo-400 focus:border-indigo-700 focus:ring-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 = "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 >
< / a >
< / Link >
{ ( ! currentStatus || currentStatus === MediaStatus . UNKNOWN ) && (
< button
onClick = { ( e ) = > {
e . preventDefault ( ) ;
setShowRequestModal ( true ) ;
} }
className = "w-full h-7 text-center text-white bg-indigo-500 rounded-sm ml-2 hover:bg-indigo-400 focus:border-indigo-700 focus:ring-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 >
) }
{ currentStatus === MediaStatus . PENDING && (
< button
className = "w-full h-7 text-center text-yellow-500 border border-yellow-500 rounded-sm ml-2 cursor-default"
disabled
>
< 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 = "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
/ >
< / svg >
< / button >
) }
{ currentStatus === MediaStatus . PROCESSING && (
< button
className = "w-full h-7 text-center text-red-500 border border-red-500 rounded-sm ml-2 cursor-default"
disabled
>
< 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 = "M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
/ >
< / svg >
< / button >
) }
{ ( currentStatus === MediaStatus . AVAILABLE ||
currentStatus === MediaStatus . PARTIALLY_AVAILABLE ) && (
< button
className = "w-full h-7 text-center text-green-400 border border-green-400 rounded-sm ml-2 cursor-default"
disabled
>
< 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 = "M5 13l4 4L19 7"
/ >
< / svg >
< / button >
) }
< / div >
< / div >
< / Transition >
< / div >
< / div >