Merge pull request #43 from nnivxix/feat/next-js-2

Feat/next js rebase
nnivxix · Sep 28, 2024 · 752b417 · 752b417
2 parents fe6d2d3 + 08bd9c6
commit 752b417
Show file tree

Hide file tree

Showing 50 changed files with 4,383 additions and 4,377 deletions.
diff --git a/.gitignore b/.gitignore
@@ -23,4 +23,8 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+.env
+
+.next
+next-env.d.ts
+build
diff --git a/README.md b/README.md
@@ -34,7 +34,7 @@ cp .env.example .env
 
 3. Change value the `.env` file
 
-Go to `.env` file and fill the value `VITE_TMDB_API_TOKEN=` with key from [TMDB API](https://developer.themoviedb.org/docs/getting-started)
+Go to `.env` file and fill the value `NEXT_PUBLIC_TMDB_API_TOKEN=` with key from [TMDB API](https://developer.themoviedb.org/docs/getting-started)
 
 4. Run the Application
 

diff --git a/src/pages/Discover.tsx → app/discover/page.tsx b/src/pages/Discover.tsx → app/discover/page.tsx
@@ -1,6 +1,11 @@
-import type { Response, MovieTv } from "../types/response";
+"use client"
 
-export default function Discover() {
+import type { Response, MovieTv } from "../../src/types/response";
+import useFetch from "@/hooks/useFetch";
+import CardItem from "@/components/CardItem";
+// import "../../src/index.css";
+
+export default function Page() {
   const { data: movies, isLoading } = useFetch<Response<MovieTv[]>>("/trending/all/day");
 
   if (isLoading) {

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,85 @@
+import React from "react";
+import "../src/index.css";
+import Navbar from "@/components/Navbar";
+import Footer from "@/components/Footer";
+import { Toaster } from "@/components/ui/toaster";
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <meta charSet="UTF-8" />
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="/images/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="/images/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="/images/favicon-16x16.png"
+        />
+        <link rel="manifest" href="/images/site.webmanifest" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link
+          rel="preload"
+          fetchPriority="high"
+          as="image"
+          href="/poster-fallback.png"
+          type="image/png"
+        />
+        <link
+          rel="preload"
+          fetchPriority="high"
+          as="image"
+          href="/backdrop-fallback.png"
+          type="image/png"
+        />
+
+        <title>Vilm</title>
+        <meta name="description" content="Get movies and tv shows information." />
+        <meta property="og:site_name" content="Vilm" />
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content="https://vilm-react.vercel.app/" />
+        <meta property="og:title" content="Vilm" />
+        <meta
+          property="og:description"
+          content="Get movies and tv shows information."
+        />
+        <meta property="og:image" content="/og-image.jpg" />
+
+        {/* <!-- Twitter --> */}
+        <meta property="twitter:card" content="summary_large_image" />
+        <meta property="twitter:url" content="https://vilm-react.vercel.app/" />
+        <meta
+          property="twitter:title"
+          content="Get movies and tv shows information."
+        />
+        <meta
+          property="twitter:description"
+          content="Get movies and tv shows information."
+        />
+        <meta property="twitter:image" content="/og-image.jpg" />
+        <meta name="twitter:creator" content="@nnivxix" />
+      </head>
+      <body>
+        <Navbar />
+        <div id="root">{children}</div>
+        <Footer />
+        <Toaster />
+        {/* <script type="module" src="/src/main.tsx"></script> */}
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,63 @@
+"use client"
+import type { FormEvent } from "react";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Suspense, useState } from "react";
+import { Input } from "@/components/ui/input"
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useRouter } from "next/navigation";
+
+function SearchForm() {
+  const searchParams = useSearchParams();
+  const querySearch = searchParams?.get("title");
+  const [search, setSearch] = useState<string>(querySearch ?? "");
+  const router = useRouter();
+
+  const handleSearch = (e: FormEvent) => {
+    e.preventDefault();
+
+    if (!search.length) {
+      return;
+    }
+
+    router.push(`/search?title=${search}&type=movie`);
+  };
+
+  return (
+    <form onSubmit={handleSearch} className="lg:w-1/2 w-full">
+      <Input
+        type="search"
+        value={search}
+        onChange={(e) => setSearch(e.target.value)}
+        className="rounded-md py-5 w-full focus:outline-none focus:ring-2 focus:ring-gray-700 focus:border-transparent"
+        aria-label="Search"
+        placeholder="Search movies and tvs"
+        style={{ backgroundColor: "#c4c4c430" }}
+      />
+    </form>
+  );
+}
+
+export default function Page() {
+
+  return (
+    <div className="lg:bg-[url('/home-banner.jpg')] bg-[url('/home-banner-vertical.jpg')] bg-center bg-cover" data-bg-src="https://www.pexels.com/photo/three-friends-watching-at-a-movie-theater-while-eating-popcorn-8263318/">
+      <div className="mx-auto max-w-4xl  px-5 mt-5">
+        <div className="flex w-full lg:h-[63vh] h-[45vh] md:h-[56vh] justify-center flex-col gap-3 items-center">
+          <div className="text-center">
+            <h1 className="text-3xl font-bold italic">Vilm</h1>
+            <h2 className="text-xl font-bold">Explore what you next watch?</h2>
+          </div>
+          <Suspense>
+            <SearchForm />
+          </Suspense>
+          <p>
+            Or
+          </p>
+          <Link href='/discover' className={`lg:w-1/2 w-full ${cn(buttonVariants({ variant: "default" }))}`}> Discover </Link>
+        </div>
+      </div>
+    </div>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -23,4 +23,8 @@ dist-ssr @@
     *.sln
     *.sw?
-    .env
+    .env
+    .next
+    next-env.d.ts
+    build