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: #
|
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 |
-
<
|
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 |
-
<
|
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 |
-
<
|
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 |
-
<
|
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 |
-
</
|
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 />
|