added types

src/app/details/[animeId]/page.tsx

@@ -2,7 +2,7 @@
 import ServerError from '@/components/error/ServerError';
 import RelationCard from '@/components/shared/cards/RelationCard'
 import React, { Suspense } from 'react'
-import { FileX, Play, Bookmark } from 'lucide-react';
+import { Play, Bookmark } from 'lucide-react';
 import { Metadata } from 'next'
 import SpinLoading from '@/components/loading/SpinLoading';
 import EpisodeLists from '@/components/shared/cards/EpisodeLists';

src/components/shared/Slider.tsx

@@ -8,15 +8,10 @@ import { ArrowLeft, ArrowRight } from 'lucide-react';
 import Image from 'next/image';
 import ReloadFunc from '../error/ReloadFunc';
 import Link from 'next/link';
-
-interface AnimeData {
-  id: number;
-  title: string;
-  coverImage: string;
-}
+import Anime from '@/types/animetypes';
 
 interface SliderProps {
-  posts: AnimeData[];
+  posts: Anime[];
 }
 const Slider: React.FC<SliderProps> = ({ posts }) => {
   const progressCircle = useRef<SVGSVGElement>(null!);

src/components/shared/cards/Cards.tsx

@@ -2,20 +2,9 @@
 import React, { useRef, useState, useEffect } from 'react';
 import Link from 'next/link';
 import ReloadFunc from '../../error/ReloadFunc';
-import { ArrowBigLeftDash, ArrowBigRightDash } from 'lucide-react';
-
-interface Anime {
-  image: string;
-  id: number;
-  title: {
-    userPreferred?: string;
-    english?: string;
-    romaji?: string;
-    native?: string;
-  };
-  totalEpisodes: number;
-  status: string;
-}
+import Anime from '@/types/animetypes';
+
+
 
 interface CardsProps {
   props: Anime[];

src/components/shared/cards/RelationCard.tsx

@@ -1,25 +1,7 @@
 
 import React from 'react'
-import Image from 'next/image';
 import Link from 'next/link';
-interface Relation {
-    id: number;
-    title: {
-        userPreferred: string;
-        romaji: string;
-        english: string;
-        native: string
-    };
-    relationType: string;
-    malId: number;
-    status: string;
-    episodes: number;
-    image: string;
-    color: string;
-    type: string;
-    cover: string;
-    rating: number;
-}
+import Anime from '@/types/animetypes';
 
 interface Props {
     id: number;
@@ -43,7 +25,7 @@ export default async function RelationCard({ id }: Props) {
                 <section className=' sticky bottom-0 top-0'>
                     <h1 className='text-4xl font-semibold pl-2'>Relation</h1>
                     <div className=" flex gap-4 overflow-x-auto duration-200 mt-9">
-                        {details.map((relation: Relation) => (
+                        {details.map((relation: Anime) => (
                             <div className="bg-white/10 flex items-center p-2 hover:cursor-pointer border-2 hover:scale-95 border-white/40 duration-200 rounded-lg" key={relation.id}>
                                 <Link href={`/details/${relation.id}`} className="flex w-80 lg:w-96">
                                     <img src={relation.image} height={300} width={600} alt={`an image of ${relation.title.userPreferred || relation.title.romaji || relation.title.english || relation.title.native}`}

src/components/shared/cards/VerticalCards.tsx

@@ -1,19 +1,6 @@
 import React from 'react'
-import Image from 'next/image'
 import Link from 'next/link'
-
-interface Anime {
-  image: string;
-  id: number;
-  title: {
-    userPreferred?: string;
-    english?: string;
-    romaji?: string;
-    native?: string;
-  };
-  status: string;
-  totalEpisodes: number
-}
+import Anime from '@/types/animetypes'
 
 interface VerticalCardsProps {
   title: string;

src/components/shared/upcomingSeason/UpcomingSeason.tsx

@@ -1,20 +1,6 @@
 import React from 'react';
 import UpcomingSeasonCard from './UpcomingSeasonCard';
-
-interface Anime {
-    id: number;
-    image: string;
-    title: {
-        userPreferred?: string;
-        english?: string;
-        romaji?: string;
-        native?: string;
-    };
-    countryOfOrigin: string;
-    type: string;
-    genres: string[];
-}
-
+import Anime from '@/types/animetypes';
 const getCurrentYear = () => {
     return new Date().getFullYear();
 };

src/components/shared/upcomingSeason/UpcomingSeasonCard.tsx

@@ -1,20 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
 import ReloadFunc from '../../error/ReloadFunc';
-
-interface Anime {
-    id: number;
-    image: string;
-    title: {
-        userPreferred?: string;
-        english?: string;
-        romaji?: string;
-        native?: string;
-    };
-    countryOfOrigin: string;
-    type: string;
-    genres: string[];
-}
+import Anime from '@/types/animetypes';
 
 interface UpcomingSeasonCardProps {
     props: Anime[];

src/types/animetypes.ts

@@ -0,0 +1,16 @@
+export default interface Anime {
+    id: number;
+    image: string;
+    title: {
+        userPreferred?: string;
+        english?: string;
+        romaji?: string;
+        native?: string;
+    };
+    countryOfOrigin: string;
+    type: string;
+    genres: string[];
+    totalEpisodes: number;
+    status: string;
+    relationType: string;
+}