Advertisement
justfrenzy

CrackFlix - frontend /src/components/Filter/CardComponent.tsx

May 12th, 2024
547
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import {
  2.     Card,
  3.     CardBody,
  4.     Image,
  5.     CardFooter,
  6.     Tooltip,
  7.     Divider,
  8. } from '@nextui-org/react';
  9. import React, { useContext } from 'react';
  10. import { Star } from 'lucide-react';
  11. import { mediaType } from '../App/props.interface';
  12. import { AppContext, AppContextTypes } from '../../utils/AppContext';
  13.  
  14. type CardComponentTypes = {
  15.     data: mediaType;
  16.     onOpen: () => void;
  17.     setMediaId: React.Dispatch<React.SetStateAction<number>>;
  18.     setMovieMedia: React.Dispatch<React.SetStateAction<boolean>>;
  19. };
  20.  
  21. const CardComponent: React.FC<CardComponentTypes> = ({
  22.     data,
  23.     onOpen,
  24.     setMediaId,
  25.     setMovieMedia,
  26. }) => {
  27.     const handleReleaseDate = (date: string): string =>
  28.         date?.split('-')[0] || '';
  29.  
  30.     const handleVoteAverage = (vote: number): string =>
  31.         (vote as number).toFixed(1);
  32.  
  33.     const { defaultLanguage } = useContext<AppContextTypes>(AppContext);
  34.  
  35.     return (
  36.         <Card
  37.             isPressable
  38.             onPress={() => {
  39.                 // if (data.backdrop_path) {
  40.                     setMediaId(data.id as number);
  41.                     setMovieMedia(data.media_type === 'movie');
  42.                     onOpen();
  43.                 // }
  44.             }}
  45.             className="bg-background/40 "
  46.         >
  47.             {data.media_type !== 'person' ? (
  48.                 <>
  49.                     <CardBody className="overflow-visible p-0 ">
  50.                         <Image
  51.                             width="100%"
  52.                             loading="eager"
  53.                             className="w-full object-cover select-none"
  54.                             src={`https://www.themoviedb.org/t/p/w220_and_h330_face${data?.poster_path}`}
  55.                             alt={
  56.                                 data.media_type === 'tv'
  57.                                     ? data?.name
  58.                                     : data?.title
  59.                             }
  60.                         />
  61.                     </CardBody>
  62.                     <CardFooter
  63.                         className={`flex justify-center flex-col h-[25%] `}
  64.                     >
  65.                         <Tooltip
  66.                             showArrow
  67.                             classNames={{
  68.                                 content: 'bg-background/80',
  69.                             }}
  70.                             shadow="lg"
  71.                             content={
  72.                                 data.media_type === 'movie'
  73.                                     ? data?.title
  74.                                     : data.media_type === 'tv'
  75.                                         ? data?.name
  76.                                         : data.original_name
  77.                             }
  78.                         >
  79.                             <p className="font-bold truncate w-[100%]">
  80.                                 {data.media_type === 'movie'
  81.                                     ? data?.title
  82.                                     : data.media_type === 'tv'
  83.                                         ? data?.name
  84.                                         : data.original_name}
  85.                             </p>
  86.                         </Tooltip>
  87.                         <div className="flex flex-row justify-center items-center gap-2">
  88.                             <p className=" text-sm">
  89.                                 {handleReleaseDate(
  90.                                     data.media_type === 'movie'
  91.                                         ? (data?.release_date as mediaType['release_date'])
  92.                                         : (data?.first_air_date as mediaType['first_air_date'])
  93.                                 )}
  94.                             </p>
  95.                             <Divider orientation="vertical" />
  96.                             <Star size={12} />
  97.                             <p className="text-sm">
  98.                                 {data.vote_average
  99.                                     ? handleVoteAverage(
  100.                                             data.vote_average as mediaType['vote_average']
  101.                                         )
  102.                                     : ''}
  103.                             </p>
  104.                             <Divider orientation="vertical" />
  105.                             <p className="text-sm">
  106.                                 {data.media_type === 'movie'
  107.                                     ? defaultLanguage === 'bg-BG'
  108.                                         ? 'Филм'
  109.                                         : 'Movie'
  110.                                     : defaultLanguage === 'bg-BG'
  111.                                         ? 'Сериал'
  112.                                         : 'TV Show'}
  113.                             </p>
  114.                         </div>
  115.                     </CardFooter>
  116.                 </>
  117.             ) : (
  118.                 <CardBody className="flex justify-center items-center">
  119.                     <p>{data?.name}</p>
  120.                 </CardBody>
  121.             )}
  122.         </Card>
  123.     );
  124. };
  125.  
  126. export default CardComponent;
  127.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement