Update posters to use TwicPics

src/components/Card.tsx

@@ -41,6 +41,7 @@ const Card = ({
           src={getTwicpicsUrl('tmdb', poster_path)}
           ratio={MOVIE_POSTER_ASPECT_RATIO}
           className="w-full h-full object-cover"
+          alt={title}
         />
       </div>
       <Title variant="cardTitle" className="text-wrap">

src/components/MovieContent/Desktop/DesktopMovieInfos.js

@@ -1,12 +1,14 @@
 import React from 'react'
 import styled from 'styled-components'
+import { TwicImg } from '@twicpics/components/react'
 import Typography from 'components/Typography'
 import Rating from 'components/Rating'
-import Poster from 'components/Poster'
 import Crews from '../Crews'
 import Socials from '../Socials'
 import BackdropImage from '../BackdropImage'
 import Tags from '../Tags'
+import { getTwicpicsUrl } from '~/utils'
+import { MOVIE_POSTER_ASPECT_RATIO } from '~/lib/constants'
 
 const Descriptions = styled.div`
   margin-left: 40px;
@@ -54,10 +56,11 @@ const DesktopMovieInfos = ({ movie }) => {
       imageUrl={`https://image.tmdb.org/t/p/original/${movie.backdrop_path}`}
     >
       <Infos>
-        <Poster
-          src={poster_path}
+        <TwicImg
+          src={getTwicpicsUrl('tmdb', poster_path)}
           alt={movie.title}
-          style={{ height: 360, flexShrink: 0 }}
+          ratio={MOVIE_POSTER_ASPECT_RATIO}
+          className="object-cover w-[240px] h-[360px] shrink-0 rounded-lg"
         />
         <Descriptions>
           <Typography variant="h1" style={{ textTransform: 'uppercase' }}>

src/components/MovieContent/Mobile/MobileLayout.tsx

@@ -1,17 +1,19 @@
 import React, { useMemo } from 'react'
 import { useTranslation } from 'next-i18next'
 import styled from 'styled-components'
+import { TwicImg } from '@twicpics/components/react'
 import { useTabState } from 'reakit/Tab'
 import { Tab, TabList, TabPanel } from 'components/Tab'
 import Typography from 'components/Typography'
 import Providers from '../Providers'
 import MobileMovieInfos from './MobileMovieInfos'
 import Cast from '../Cast'
 import BackdropImage from '../BackdropImage'
-import Poster from 'components/Poster'
 import SectionHeading from './SectionHeading'
 import Recommendations from '../Recommendations'
 import { useSimilarMovies } from '~/hooks/useSimilarMovies'
+import { getTwicpicsUrl } from '~/utils'
+import { MOVIE_POSTER_ASPECT_RATIO } from '~/lib/constants'
 
 const StyledTabList = styled(TabList)`
   display: flex;
@@ -27,10 +29,11 @@ const Head = ({ tab, movie }) => {
     <BackdropImage
       imageUrl={`https://image.tmdb.org/t/p/w780/${backdrop_path}`}
     >
-      <Poster
-        src={poster_path}
+      <TwicImg
+        src={getTwicpicsUrl('tmdb', poster_path)}
         alt={movie.title}
-        style={{ height: 360, flexShrink: 0, marginTop: 120 }}
+        ratio={MOVIE_POSTER_ASPECT_RATIO}
+        className="object-cover w-[240px] h-[360px] shrink-0 rounded-lg mt-32"
       />
       <StyledTabList {...tab} aria-label="movie tabs">
         <Tab {...tab} id="overview">