From 66412b7788f49def33fc2143f9e1bd5d25bac261 Mon Sep 17 00:00:00 2001
From: Alberto-Duarte <alberto@albertoduarte.com>
Date: Tue, 25 Apr 2023 16:27:11 +0100
Subject: added more things jaja

---
 src/components/Genre.tsx       | 27 +++++++++++++++++++++++++++
 src/components/PreviewCard.tsx | 19 +++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 src/components/Genre.tsx
 create mode 100644 src/components/PreviewCard.tsx

(limited to 'src/components')

diff --git a/src/components/Genre.tsx b/src/components/Genre.tsx
new file mode 100644
index 0000000..e63a26a
--- /dev/null
+++ b/src/components/Genre.tsx
@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react"
+
+const Genres = ({id}) => {
+
+    const baseURL = 'https://api.themoviedb.org/3'
+    const API_KEY = '8216fbb9997cd81a67471e6cb5a6f2df'
+    const [genres, setGenres] = useState()
+
+    useEffect(() => {
+        fetch(`${baseURL}/movie/${id}?api_key=${API_KEY}`).then((res) => res.json()).then((data) => {
+            console.log('MOVIE', data.genres)
+            setGenres(data.genres)
+        })
+    }, [])
+
+    return (
+        <div className="text-white/60 gap-x-3 text-xs flex flex-row flex-wrap relative">
+            {genres?.map((genre) => {
+                return (
+                    <div>{genre.name}</div>
+                )
+            })}
+        </div>
+    )
+}
+
+export default Genres
\ No newline at end of file
diff --git a/src/components/PreviewCard.tsx b/src/components/PreviewCard.tsx
new file mode 100644
index 0000000..5c4129f
--- /dev/null
+++ b/src/components/PreviewCard.tsx
@@ -0,0 +1,19 @@
+const imageURL = 'https://image.tmdb.org/t/p/original';
+import Genre from "./Genre";
+const baseURL ='https://api.themoviedb.org/3/'
+
+const PreviewCard = ({ movie }) => {
+    return (
+        <div className="hover:z-10">
+            <div className="rounded ring-white hover:ring-4 flex-col p-1 relative bg-cover h-32 w-60 shrink-0 flex justify-end cursor-pointer hover:scale-125 transition ease-in-out" style={{backgroundImage: `url(${imageURL}${movie?.backdrop_path})`}}>
+             <div className="absolute h-full w-full inset-0 bg-gradient-to-t from-black/70"></div>
+             <h3 className={"text-white text-sm relative"}>
+               {movie.original_title}
+             </h3>
+            <Genre id={movie.id}/> 
+                </div>
+        </div>
+          )}
+        
+
+export default PreviewCard
\ No newline at end of file
-- 
cgit v1.2.3-54-g00ecf