ChandimaPrabath commited on
Commit
f672bdc
1 Parent(s): 9345ff8

img to Image

Browse files
frontend/src/app/genres/[genre]/genres.css CHANGED
@@ -63,7 +63,7 @@ body {
63
 
64
  /* Card for each item */
65
  .item-card {
66
- background-color: #2c2c2c; /* Dark card background */
67
  border-radius: 8px;
68
  overflow: hidden;
69
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
 
63
 
64
  /* Card for each item */
65
  .item-card {
66
+ background-color: #202232; /* Dark card background */
67
  border-radius: 8px;
68
  overflow: hidden;
69
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
frontend/src/app/genres/[genre]/page.js CHANGED
@@ -5,6 +5,7 @@ import Link from "next/link";
5
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
  import { faCaretLeft, faCaretRight } from "@fortawesome/free-solid-svg-icons";
7
  import "./genres.css";
 
8
 
9
  export default function GenrePage({ params }) {
10
  const [genreItems, setGenreItems] = useState(null);
@@ -82,10 +83,12 @@ export default function GenrePage({ params }) {
82
  <div key={index} className="item-card">
83
  <Link href={`/movie/${item[0]}`} passHref>
84
  <div className="item-link">
85
- <img
86
  src={item[3] || `https://via.placeholder.com/400x100/1a1c3f/FFF?text=${encodeURIComponent(item[0])}`}
87
  alt={item[0]}
88
  className="item-image"
 
 
89
  />
90
  <div className="item-info">
91
  <h3 className="item-title">{item[0]}</h3>
@@ -117,10 +120,12 @@ export default function GenrePage({ params }) {
117
  <div key={index} className="item-card">
118
  <Link href={`/series/${item[0]}`} passHref>
119
  <div className="item-link">
120
- <img
121
  src={item[3] || `https://via.placeholder.com/150?text=${encodeURIComponent(item[0])}`}
122
  alt={item[0]}
123
  className="item-image"
 
 
124
  />
125
  <div className="item-info">
126
  <h3 className="item-title">{item[0]}</h3>
 
5
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
  import { faCaretLeft, faCaretRight } from "@fortawesome/free-solid-svg-icons";
7
  import "./genres.css";
8
+ import Image from "next/image";
9
 
10
  export default function GenrePage({ params }) {
11
  const [genreItems, setGenreItems] = useState(null);
 
83
  <div key={index} className="item-card">
84
  <Link href={`/movie/${item[0]}`} passHref>
85
  <div className="item-link">
86
+ <Image
87
  src={item[3] || `https://via.placeholder.com/400x100/1a1c3f/FFF?text=${encodeURIComponent(item[0])}`}
88
  alt={item[0]}
89
  className="item-image"
90
+ height={120}
91
+ width={250}
92
  />
93
  <div className="item-info">
94
  <h3 className="item-title">{item[0]}</h3>
 
120
  <div key={index} className="item-card">
121
  <Link href={`/series/${item[0]}`} passHref>
122
  <div className="item-link">
123
+ <Image
124
  src={item[3] || `https://via.placeholder.com/150?text=${encodeURIComponent(item[0])}`}
125
  alt={item[0]}
126
  className="item-image"
127
+ width={250}
128
+ height={120}
129
  />
130
  <div className="item-info">
131
  <h3 className="item-title">{item[0]}</h3>
frontend/src/app/layout.js CHANGED
@@ -8,11 +8,6 @@ import Header from "@/components/Header";
8
  config.autoAddCss = false;
9
  const inter = Inter({ subsets: ["latin"] });
10
 
11
- export const metadata = {
12
- title: "Home",
13
- description: "Generated by create next app",
14
- };
15
-
16
  export default function RootLayout({ children }) {
17
  return (
18
  <html lang="en">
 
8
  config.autoAddCss = false;
9
  const inter = Inter({ subsets: ["latin"] });
10
 
 
 
 
 
 
11
  export default function RootLayout({ children }) {
12
  return (
13
  <html lang="en">
frontend/src/app/movie/[title]/page.js CHANGED
@@ -1,6 +1,7 @@
1
  "use client";
2
  import { useEffect, useState } from "react";
3
  import Link from "next/link";
 
4
  import "./movie.css";
5
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
6
  import {
@@ -80,12 +81,14 @@ export default function MovieDetailsPage({ params }) {
80
  </h1>
81
  </div>
82
  <div className="movie-details-poster">
83
- <img
84
  src={
85
  metadata?.data?.image ||
86
  "https://via.placeholder.com/800x450?text=No+Image+Available"
87
  }
88
  alt={`${englishTitle} Poster`}
 
 
89
  />
90
  </div>
91
  <div className="movie-details-actions">
@@ -100,7 +103,7 @@ export default function MovieDetailsPage({ params }) {
100
  </div>
101
  <div className="movie-details-info">
102
  <div className="movie-details-metadata">
103
- <p className="geners-section">
104
  <strong>Genre:</strong>{" "}
105
  {genres.length > 0 ? (
106
  <ul className="genre-list">
@@ -115,7 +118,7 @@ export default function MovieDetailsPage({ params }) {
115
  ) : (
116
  "Genres not available"
117
  )}
118
- </p>
119
  <p>
120
  <strong>Director / Writer:</strong> Jon Watts, Steve Ditko, Stan
121
  Lee, Chris McKenna, Erik Sommers
 
1
  "use client";
2
  import { useEffect, useState } from "react";
3
  import Link from "next/link";
4
+ import Image from "next/image";
5
  import "./movie.css";
6
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
7
  import {
 
81
  </h1>
82
  </div>
83
  <div className="movie-details-poster">
84
+ <Image
85
  src={
86
  metadata?.data?.image ||
87
  "https://via.placeholder.com/800x450?text=No+Image+Available"
88
  }
89
  alt={`${englishTitle} Poster`}
90
+ height={300}
91
+ width={250}
92
  />
93
  </div>
94
  <div className="movie-details-actions">
 
103
  </div>
104
  <div className="movie-details-info">
105
  <div className="movie-details-metadata">
106
+ <label className="geners-section">
107
  <strong>Genre:</strong>{" "}
108
  {genres.length > 0 ? (
109
  <ul className="genre-list">
 
118
  ) : (
119
  "Genres not available"
120
  )}
121
+ </label>
122
  <p>
123
  <strong>Director / Writer:</strong> Jon Watts, Steve Ditko, Stan
124
  Lee, Chris McKenna, Erik Sommers
frontend/src/app/page.js CHANGED
@@ -1,18 +1,16 @@
1
- import Head from "next/head";
2
  import HeroSection from "@/components/HeroSection";
3
  import "./index.css";
4
 
 
 
 
 
 
 
 
5
  const HomePage = () => {
6
  return (
7
  <>
8
- <Head>
9
- <title>Home</title>
10
- <meta
11
- name="description"
12
- content="Home page for the streaming service"
13
- />
14
- <link rel="icon" href="/favicon.ico" />
15
- </Head>
16
  <div className="index-page">
17
  <div className="index-page-container">
18
  <HeroSection />
 
 
1
  import HeroSection from "@/components/HeroSection";
2
  import "./index.css";
3
 
4
+ export const metadata = {
5
+ title: "Home",
6
+ icons: {
7
+ icon: '/favicon.ico"',
8
+ },
9
+ };
10
+
11
  const HomePage = () => {
12
  return (
13
  <>
 
 
 
 
 
 
 
 
14
  <div className="index-page">
15
  <div className="index-page-container">
16
  <HeroSection />