Update 35 files

- /src/api.ts
- /src/lib/utils.ts
- /src/lib/neoApi.ts
- /src/lib/mongodb.ts
- /src/lib/favoritesApi.ts
- /src/lib/models/Favorite.ts
- /src/hooks/useTMDBMovies.ts
- /src/hooks/useImageLoader.ts
- /src/hooks/useMovies.ts
- /src/types/movie.ts
- /src/components/SearchResults.tsx
- /src/components/SettingsContent.tsx
- /src/components/MovieCard.tsx
- /src/components/FavoriteButton.tsx
- /src/components/admin/MovieSearch.tsx
- /src/app/page.tsx
- /src/app/movie/[id]/page.tsx
- /src/app/movie/[id]/MovieContent.tsx
- /src/app/api/movies/upcoming/route.ts
- /src/app/api/movies/search/route.ts
- /src/app/api/movies/top-rated/route.ts
- /src/app/api/movies/[id]/route.ts
- /src/app/api/movies/popular/route.ts
- /src/app/api/favorites/route.ts
- /src/app/api/favorites/check/[mediaId]/route.ts
- /src/app/api/favorites/[mediaId]/route.ts
- /src/app/tv/[id]/TVShowContent.tsx
- /src/app/tv/[id]/TVShowPage.tsx
- /src/app/tv/[id]/page.tsx
- /src/app/favorites/page.tsx
- /src/configs/auth.ts
- /next.config.js
- /package.json
- /README.md
- /package-lock.json

src/components/admin/MovieSearch.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from 'react';
 import { debounce } from 'lodash';
+import { getImageUrl } from '@/lib/neoApi';
 
 interface Movie {
   id: number;
@@ -13,6 +14,82 @@ interface Movie {
   genre_ids: number[];
 }
 
+interface MovieCardProps {
+  children: React.ReactNode;
+}
+
+const MovieCard: React.FC<MovieCardProps> = ({ children }) => {
+  return (
+    <div className="bg-gray-800 rounded-lg overflow-hidden">
+      {children}
+    </div>
+  );
+};
+
+interface PosterContainerProps {
+  children: React.ReactNode;
+}
+
+const PosterContainer: React.FC<PosterContainerProps> = ({ children }) => {
+  return (
+    <div className="aspect-w-2 aspect-h-3">
+      {children}
+    </div>
+  );
+};
+
+interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+  src: string;
+  alt: string;
+  width: number;
+  height: number;
+}
+
+const Image: React.FC<ImageProps> = ({ src, alt, width, height, ...props }) => {
+  return (
+    <img
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className="object-cover w-full h-full"
+      {...props}
+    />
+  );
+};
+
+interface MovieInfoProps {
+  children: React.ReactNode;
+}
+
+const MovieInfo: React.FC<MovieInfoProps> = ({ children }) => {
+  return (
+    <div className="p-4">
+      {children}
+    </div>
+  );
+};
+
+interface TitleProps {
+  children: React.ReactNode;
+}
+
+const Title: React.FC<TitleProps> = ({ children }) => {
+  return (
+    <h3 className="font-semibold text-lg mb-2">{children}</h3>
+  );
+};
+
+interface YearProps {
+  children: React.ReactNode;
+}
+
+const Year: React.FC<YearProps> = ({ children }) => {
+  return (
+    <p className="text-sm text-gray-400 mb-4">{children}</p>
+  );
+};
+
 export default function MovieSearch() {
   const [searchQuery, setSearchQuery] = useState('');
   const [searchResults, setSearchResults] = useState<Movie[]>([]);
@@ -64,31 +141,26 @@ export default function MovieSearch() {
       {searchResults.length > 0 && (
         <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
           {searchResults.map((movie) => (
-            <div
-              key={movie.id}
-              className="bg-gray-800 rounded-lg overflow-hidden"
-            >
-              <div className="aspect-w-2 aspect-h-3">
-                <img
-                  src={
-                    movie.poster_path
-                      ? `https://image.tmdb.org/t/p/w500${movie.poster_path}`
-                      : '/placeholder.jpg'
-                  }
+            <MovieCard key={movie.id}>
+              <PosterContainer>
+                <Image
+                  src={movie.poster_path ? getImageUrl(movie.poster_path) : '/placeholder.jpg'}
                   alt={movie.title}
-                  className="object-cover w-full h-full"
+                  width={200}
+                  height={300}
                 />
-              </div>
-              <div className="p-4">
-                <h3 className="font-semibold text-lg mb-2">{movie.title}</h3>
+              </PosterContainer>
+              <MovieInfo>
+                <Title>{movie.title}</Title>
+                <Year>{new Date(movie.release_date).getFullYear()}</Year>
                 <p className="text-sm text-gray-400 mb-4">
-                  {new Date(movie.release_date).getFullYear()} • {movie.vote_average.toFixed(1)} ⭐
+                  {movie.vote_average.toFixed(1)} ⭐
                 </p>
                 <p className="text-sm text-gray-400 line-clamp-3 mb-4">
                   {movie.overview}
                 </p>
-              </div>
-            </div>
+              </MovieInfo>
+            </MovieCard>
           ))}
         </div>
       )}