style: carousel banner

astro.config.mjs

@@ -22,8 +22,18 @@ export default defineConfig({
         pathname: "/**",
         port: "",
       },
+      {
+        protocol: "https",
+        hostname: "qvsxkboawsixkeqgaeja.supabase.co",
+        pathname: "/**",
+        port: "",
+      },
+    ],
+    domains: [
+      "image.tmdb.org",
+      "lh3.googleusercontent.com",
+      "qvsxkboawsixkeqgaeja.supabase.co",
     ],
-    domains: ["image.tmdb.org", "lh3.googleusercontent.com"],
     service: passthroughImageService(),
   },
   experimental: {

package.json

@@ -16,19 +16,18 @@
     "@astrojs/tailwind": "^5.1.0",
     "@astrojs/vercel": "^7.7.2",
     "@auth/core": "^0.32.0",
-    "@nanostores/react": "^0.7.2",
     "@supabase/supabase-js": "^2.44.3",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "astro": "^4.11.5",
     "auth-astro": "^4.1.2",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.2.14",
-    "nanostores": "^0.10.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
     "react-icons": "^5.2.1",
+    "react-responsive-carousel": "^3.2.23",
     "sharp": "^0.33.4",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.5.3"

src/actions/index.ts

@@ -2,8 +2,6 @@ import { supabase } from "@/lib/supabase/supabase";
 import { defineAction, z } from "astro:actions";
 import { getSession } from "auth-astro/server";
 
-// email, country,
-
 export const server = {
   updateUser: defineAction({
     accept: "form",
@@ -69,11 +67,26 @@ export const server = {
     input: z.object({
       id: z.string(),
     }),
-    async handler({ id }, context) {
+    async handler({ id }) {
       const { error } = await supabase.from("saved_list").delete().eq("id", id);
 
       if (error) return { success: false };
       return { success: true };
     },
   }),
+  addComment: defineAction({
+    accept: "json",
+    input: z.object({
+      comment: z.string().min(10, {
+        message: "Comment must be at least 10 characters long",
+      }),
+      image: z.object({
+        url: z.string().url(),
+        path: z.string(),
+      }),
+    }),
+    async handler(input, context) {
+      return { success: true };
+    },
+  }),
 };

src/components/AllTrending/Card.astro

@@ -0,0 +1,61 @@
+---
+import { Image } from "astro:assets";
+import { format } from "date-fns";
+import Link from "../ui/Link.astro";
+
+type Props = AllTrending;
+
+const {
+  media_type,
+  id,
+  first_air_date,
+  original_name,
+  original_title,
+  release_date,
+  poster_path,
+} = Astro.props;
+---
+
+<article
+  class="w-full card flex flex-col h-full rounded-md"
+  transition:name={`${media_type} ${id} card`}
+>
+  <Link href={`/${media_type}/${id}`} class="flex flex-col h-full">
+    {
+      poster_path === undefined || poster_path === null ? (
+        <div
+          class="w-full aspect-[1/1.5] bg-slate-500 bg-opacity-45 rounded-t-md"
+          transition:name={`${media_type} ${id} poster`}
+        />
+      ) : (
+        <Image
+          src={`${import.meta.env.PUBLIC_TMDB_IMG_URL}${poster_path}`}
+          alt="Poster"
+          loading="lazy"
+          inferSize={true}
+          class="w-full aspect-auto rounded-t-md"
+          transition:name={`${media_type} ${id} poster`}
+        />
+      )
+    }
+
+    <div class="p-3 flex-grow">
+      <h1 transition:name={`${media_type} ${id} title`} class="text-lg">
+        {original_title || original_name}
+      </h1>
+      <p transition:name={`${media_type} ${id} date`}>
+        {
+          release_date
+            ? format(
+                release_date ? new Date(release_date) : new Date(),
+                "MMMM dd, yyyy"
+              )
+            : format(
+                first_air_date ? new Date(first_air_date) : new Date(),
+                "MMMM dd, yyyy"
+              )
+        }
+      </p>
+    </div>
+  </Link>
+</article>

src/components/AllTrending/Homepage.astro

@@ -0,0 +1,25 @@
+---
+import Link from "../ui/Link.astro";
+import { getTrendingDatas } from "@/utils/data";
+import Card from "@/components/AllTrending/Card.astro";
+const type = "all";
+const time = "day";
+
+const datas = await getTrendingDatas(type, time, 1);
+---
+
+<main>
+  <section class="w-full">
+    <div class="w-full flex justify-between items-center">
+      <h1 class="text-2xl font-bold">Trending All</h1>
+      <Link
+        href={`/trending?page=1&type=${type}&time=${time}`}
+        class="text-blue-600 text-lg hover:text-xl transition-all duration-300 ease-linear"
+        >See more</Link
+      >
+    </div>
+    <section class="w-full mt-3 grid grid-cols-4 gap-4">
+      {datas.results.map((data: AllTrending) => <Card {...data} />)}
+    </section>
+  </section>
+</main>

src/components/Movie/Card.astro

@@ -2,6 +2,7 @@
 import type { Movie } from "@/types/movie";
 import { Image } from "astro:assets";
 import { format } from "date-fns";
+import Link from "@/components/ui/Link.astro";
 type Props = Movie;
 
 const { original_title, id, poster_path, release_date } = Astro.props;
@@ -11,7 +12,7 @@ const { original_title, id, poster_path, release_date } = Astro.props;
   class="w-full card flex flex-col h-full rounded-md"
   transition:name={`movie ${id} card`}
 >
-  <a href={`/movie/${id}`} class="flex flex-col h-full">
+  <Link href={`/movie/${id}`} class="flex flex-col h-full">
     {
       poster_path === undefined || poster_path === null ? (
         <div
@@ -43,7 +44,7 @@ const { original_title, id, poster_path, release_date } = Astro.props;
         }
       </p>
     </div>
-  </a>
+  </Link>
 </article>
 
 <style>

src/components/Movie/Homepage.astro

@@ -1,6 +1,6 @@
 ---
 import type { Movie } from "@/types/movie";
-import { getDiscover, getDatas } from "@/utils/data";
+import { getDiscover, getDatas, getTrendingDatas } from "@/utils/data";
 import Link from "@/components/ui/Link.astro";
 import Card from "./Card.astro";
 
@@ -10,39 +10,23 @@ type Props = {
 
 const { genreMovie } = Astro.props;
 
-const popular = await getDatas("movie", "popular", 1);
-const movies_popular = popular.results.filter(
-  (movie: Movie) =>
-    typeof movie.poster_path === "string" &&
-    typeof movie.backdrop_path === "string"
-) as Movies;
+const datasTrending = await getTrendingDatas("all", "day", 1);
 
-const popularIds = new Set(movies_popular.map((movie) => movie.id));
+const popularIds = new Set(
+  datasTrending.results.map((movie: AllTrending) => movie.id)
+);
 
 const discover = await getDiscover("movie", genreMovie, 1);
 const movies_discover = discover.results
-  .filter(
+  ?.filter(
     (movie: Movie) =>
       typeof movie.poster_path === "string" &&
       typeof movie.backdrop_path === "string"
   )
-  .filter((movie: Movie) => !popularIds.has(movie.id)) as Movies;
+  ?.filter((movie: Movie) => !popularIds.has(movie.id)) as Movies;
 ---
 
 <main class="flex flex-col gap-7">
-  <section class="w-full">
-    <div class="w-full flex justify-between items-center">
-      <h1 class="text-2xl font-bold">Popular Movies</h1>
-      <Link
-        href={`/popular/movie?page=1`}
-        class="text-blue-600 text-lg hover:text-xl transition-all duration-300 ease-linear"
-        >See more</Link
-      >
-    </div>
-    <section class="w-full mt-3 grid grid-cols-4 gap-4">
-      {movies_popular.map((movie) => <Card {...movie} />)}
-    </section>
-  </section>
   <section class="w-full">
     <div class="w-full flex justify-between items-center">
       <h1 class="text-2xl font-bold">Movie Lists ( Action )</h1>

src/components/Navbar.astro

@@ -28,7 +28,7 @@ const { pathname } = Astro.url;
 ---
 
 <header
-  class="w-full flex justify-between bg-yellow-400 bg-opacity-75 px-6 items-center"
+  class="w-full flex justify-between bg-yellow-400 bg-opacity-75 px-6 py-3 items-center"
 >
   <Image
     src={"/Logo.png"}
@@ -68,6 +68,7 @@ const { pathname } = Astro.url;
             width={50}
             height={50}
             class="rounded-full"
+            loading="eager"
           />
         </ProfileModal>
       ) : (