feat: Migrate the Home page and create the app router routes

Lazhari · Aug 29, 2024 · 7474305 · 7474305
1 parent d98b9de
commit 7474305
Show file tree

Hide file tree

Showing 26 changed files with 871 additions and 220 deletions.
diff --git a/public/spinner.svg b/public/spinner.svg
diff --git a/src/app/actions.tsx b/src/app/actions.tsx
@@ -0,0 +1,25 @@
+'use server'
+
+import MovieCard from '@/components/movies/card'
+import { Movie } from '@/models/movie'
+
+const baseURL = process.env.MOVIE_DB_URL
+const apiKey = process.env.MOVIE_DB_API_KEY
+
+export async function fetchGenres() {
+  const resp = await fetch(
+    `${baseURL}/genre/movie/list?api_key=${apiKey}&language=en-US`
+  )
+  const data = await resp.json()
+  return data
+}
+
+export async function fetchMovies(page = 1) {
+  const resp = await fetch(
+    `${baseURL}/movie/popular?api_key=${apiKey}&page=${page}`
+  )
+  const data = await resp.json()
+  return data?.results?.map((movie: Movie, idx: number) => (
+    <MovieCard key={movie.id} movie={movie} index={idx} />
+  ))
+}
diff --git a/src/app/actors/[id]/page.tsx b/src/app/actors/[id]/page.tsx
@@ -0,0 +1,3 @@
+export default function ActorPage() {
+  return <h1>Actor</h1>
+}
diff --git a/src/app/genres/[id]/page.tsx b/src/app/genres/[id]/page.tsx
@@ -0,0 +1,3 @@
+export default function GenrePage() {
+  return <h1>Genre</h1>
+}
diff --git a/src/app/genres/page.tsx b/src/app/genres/page.tsx
@@ -0,0 +1,3 @@
+export default function GenresPage() {
+  return <h1>Genres</h1>
+}
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -0,0 +1,76 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -0,0 +1,45 @@
+import Header from '@/components/blocks/Header'
+import { ThemeProvider } from '@/components/theme-provider'
+import { cn } from '@/lib/utils'
+import { Metadata } from 'next'
+import { DM_Sans, Inter } from 'next/font/google'
+import './globals.css'
+
+const inter = Inter({ subsets: ['latin'] })
+const dmSans = DM_Sans({ subsets: ['latin'], variable: '--font-sans' })
+
+export const metadata: Metadata = {
+  title: 'Create Next App',
+  description: 'Generated by create next app',
+}
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={cn(
+          'min-h-screen bg-background font-sans antialiased',
+          dmSans.variable
+        )}
+      >
+        <ThemeProvider
+          attribute="class"
+          defaultTheme="dark"
+          enableSystem={true}
+          disableTransitionOnChange={true}
+        >
+          <div className="flex min-h-screen w-full flex-col">
+            <Header />
+            <main className="flex flex-1 flex-col gap-4 p-4 md:gap-8 md:p-8">
+              {children}
+            </main>
+          </div>
+        </ThemeProvider>
+      </body>
+    </html>
+  )
+}
diff --git a/src/app/movies/[id]/page.tsx b/src/app/movies/[id]/page.tsx
@@ -0,0 +1,3 @@
+export default function MoviePage() {
+  return <h1>Movie</h1>
+}
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -0,0 +1,15 @@
+import { LoadMore } from '@/components/movies/load-more'
+import { fetchMovies } from './actions'
+
+export default async function Home() {
+  const movies = await fetchMovies()
+  return (
+    <div className="sm:p-8 sm:py-4 px-8 flex flex-col gap-10 -z-10">
+      <h2 className="text-3xl fond-bold">Explore Popular Movies</h2>
+      <section className="grid lg:grid-cols-4 md:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-10">
+        {movies}
+      </section>
+      <LoadMore />
+    </div>
+  )
+}
diff --git a/src/app/series/[id]/page.tsx b/src/app/series/[id]/page.tsx
@@ -0,0 +1,3 @@
+export default function SeriesPage() {
+  return <h1>Series</h1>
+}
diff --git a/src/app/upcoming/page.tsx b/src/app/upcoming/page.tsx
@@ -0,0 +1,3 @@
+export default function UpcomingPage() {
+  return <h1>Upcoming Movies</h1>
+}
diff --git a/src/components/CopyRight.tsx b/src/components/CopyRight.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import Typography from '@mui/material/Typography'
+import MuiLink from '@mui/material/Link'
+
+export default function Copyright() {
+  return (
+    <Typography variant="body2" color="text.secondary" align="center">
+      {'Copyright © '}
+      <MuiLink color="inherit" href="https://mui.com/">
+        Your Website
+      </MuiLink>{' '}
+      {new Date().getFullYear()}.
+    </Typography>
+  )
+}
diff --git a/src/components/ProTip.tsx b/src/components/ProTip.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react'
+import Link from '@mui/material/Link'
+import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'
+import Typography from '@mui/material/Typography'
+
+function LightBulbIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7zm2.85 11.1l-.85.6V16h-4v-2.3l-.85-.6C7.8 12.16 7 10.63 7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 1.63-.8 3.16-2.15 4.1z" />
+    </SvgIcon>
+  )
+}
+
+export default function ProTip() {
+  return (
+    <Typography sx={{ mt: 6, mb: 3, color: 'text.secondary' }}>
+      <LightBulbIcon sx={{ mr: 1, verticalAlign: 'middle' }} />
+      {'Pro tip: See more '}
+      <Link href="https://mui.com/material-ui/getting-started/templates/">
+        templates
+      </Link>
+      {' in the Material UI documentation.'}
+    </Typography>
+  )
+}