tim1_frontendweb

components/ComingSoonList.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import MovieList from './MovieList';
+import { Movie } from '../types/Movie';
+import styles from './styling.module.css';
+
+const comingSoonMovies1: Movie[] = [
+    {
+        id: '1',
+        title: 'Movie 1',
+        description: 'Movie 1 description',
+        posterUrl: '/soonMovie1.jpg'
+    },
+    {
+        id: '2',
+        title: 'Movie 2',
+        description: 'Movie 2 description',
+        posterUrl: '/soonMovie2.jpg'
+    },
+    {
+        id: '3',
+        title: 'Movie 3',
+        description: 'Movie 3 description',
+        posterUrl: '/soonMovie3.jpg'
+    },
+    {
+        id: '4',
+        title: 'Movie 4',
+        description: 'Movie 4 description',
+        posterUrl: '/soonMovie4.jpg'
+    },
+];
+
+const comingSoonMovies2: Movie[] = [
+    {
+        id: '1',
+        title: 'Movie 1',
+        description: 'Movie 1 description',
+        posterUrl: '/soonMovie5.jpg'
+    },
+    {
+        id: '2',
+        title: 'Movie 2',
+        description: 'Movie 2 description',
+        posterUrl: '/soonMovie6.jpg'
+    },
+    {
+        id: '3',
+        title: 'Movie 3',
+        description: 'Movie 3 description',
+        posterUrl: '/soonMovie7.jpg'
+    },
+    {
+        id: '4',
+        title: 'Movie 4',
+        description: 'Movie 4 description',
+        posterUrl: '/soonMovie8.jpg'
+    },
+];
+
+const ComingSoonList: React.FC = () => {
+    return (
+        <div>
+            <h2 className={styles['centerText']}>Coming Soon</h2>
+            <MovieList movies={comingSoonMovies1} />
+            <MovieList movies={comingSoonMovies2} />
+        </div>
+    );
+};
+
+export default ComingSoonList;

components/MovieCard.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Link from 'next/link';
+
+interface MovieCardProps {
+    id: string;
+    posterUrl: string;
+}
+
+const MovieCard: React.FC<MovieCardProps> = ({ id, posterUrl }) => {
+    return (
+        <Link href={`/movies/${id}`}>
+            <div className="movie-card">
+                <img src={posterUrl} />
+            </div>
+        </Link>
+    );
+};
+
+export default MovieCard;

components/MovieList.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import MovieCard from './MovieCard';
+import { Movie } from '../types/Movie';
+
+interface MovieListProps {
+    movies: Movie[];
+}
+
+const MovieList: React.FC<MovieListProps> = ({ movies }) => {
+    return (
+        <div className="movie-list">
+            {movies.map(movie => (
+                <MovieCard 
+                    key={movie.id}
+                    id={movie.id}
+                    posterUrl={movie.posterUrl}
+                />
+            ))}
+        </div>
+    );
+};
+
+export default MovieList;

components/MovieSelection.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import MovieList from './MovieList';
+import { Movie } from '../types/Movie';
+import styles from './styling.module.css';
+
+const nowPlayingMovies: Movie[] = [
+    {
+        id: '1',
+        title: 'Movie 1',
+        description: 'Movie 1 description',
+        posterUrl: '/nowMovie1.jpg'
+    },
+    {
+        id: '2',
+        title: 'Movie 2',
+        description: 'Movie 2 description',
+        posterUrl: '/nowMovie2.jpg'
+    },
+    {
+        id: '3',
+        title: 'Movie 3',
+        description: 'Movie 3 description',
+        posterUrl: '/nowMovie3.jpg'
+    },
+    {
+        id: '4',
+        title: 'Movie 4',
+        description: 'Movie 4 description',
+        posterUrl: '/nowMovie4.jpg'
+    },
+];
+
+const MovieSelectionList: React.FC = () => {
+    return (
+        <div>
+            <h2 className={styles['centerText']}>Movie Selection</h2>
+            <MovieList movies={nowPlayingMovies} />
+        </div>
+    );
+};
+
+export default MovieSelectionList;

components/NavBar.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+
+const NavBar: React.FC = () => {
+    return (
+        <nav style={{ display: 'flex', alignItems: 'center' }}>
+            {/* Logo Section */}
+            <div style={{ marginRight: '20px' }}>
+                <Link href="/">
+                    <Image src="/CGVLogo.png" alt="Logo" width={137} height={137} />
+                </Link>
+            </div>
+
+            {/* Navigation Links */}
+            <ul style={{ display: 'flex', listStyle: 'none', padding: 0, margin: 0 }}>
+                <li style={{ marginRight: '15px' }}><Link href="/moviespage">Movies</Link></li>
+                <li style={{ marginRight: '15px' }}><Link href="/cinemas">Cinemas</Link></li>
+                <li style={{ marginRight: '15px' }}><Link href="/promotions">Promotion</Link></li>
+                <li style={{ marginRight: '15px' }}><Link href="/membershipOut">Membership</Link></li>
+                <li style={{ marginRight: '15px' }}><Link href="/login">Concession</Link></li>
+                <li style={{ marginRight: '15px' }}><Link href="/special">Special</Link></li>
+            </ul>
+        </nav>
+    );
+};
+
+export default NavBar;

components/NowPlayingList.tsx

@@ -0,0 +1,154 @@
+import React from 'react';
+import MovieList from './MovieList';
+import { Movie } from '../types/Movie';
+import styles from './styling.module.css';
+
+const nowPlayingMovies1: Movie[] = [
+    {
+        id: '1',
+        title: 'Movie 1',
+        description: 'Movie 1 description',
+        posterUrl: '/nowMovie1.jpg'
+    },
+    {
+        id: '2',
+        title: 'Movie 2',
+        description: 'Movie 2 description',
+        posterUrl: '/nowMovie2.jpg'
+    },
+    {
+        id: '3',
+        title: 'Movie 3',
+        description: 'Movie 3 description',
+        posterUrl: '/nowMovie3.jpg'
+    },
+    {
+        id: '4',
+        title: 'Movie 4',
+        description: 'Movie 4 description',
+        posterUrl: '/nowMovie4.jpg'
+    },
+];
+
+const nowPlayingMovies2: Movie[] = [
+    {
+        id: '5',
+        title: 'Movie 5',
+        description: 'Movie 5 description',
+        posterUrl: '/nowMovie5.jpg'
+    },
+    {
+        id: '6',
+        title: 'Movie 6',
+        description: 'Movie 6 description',
+        posterUrl: '/nowMovie6.jpg'
+    },
+    {
+        id: '7',
+        title: 'Movie 7',
+        description: 'Movie 7 description',
+        posterUrl: '/nowMovie7.jpg'
+    },
+    {
+        id: '8',
+        title: 'Movie 8',
+        description: 'Movie 8 description',
+        posterUrl: '/nowMovie8.jpg'
+    },
+];
+
+const nowPlayingMovies3: Movie[] = [
+    {
+        id: '9',
+        title: 'Movie 9',
+        description: 'Movie 9 description',
+        posterUrl: '/nowMovie9.jpg'
+    },
+    {
+        id: '10',
+        title: 'Movie 10',
+        description: 'Movie 10 description',
+        posterUrl: '/nowMovie10.jpg'
+    },
+    {
+        id: '11',
+        title: 'Movie 11',
+        description: 'Movie 11 description',
+        posterUrl: '/nowMovie11.jpg'
+    },
+    {
+        id: '12',
+        title: 'Movie 12',
+        description: 'Movie 12 description',
+        posterUrl: '/nowMovie12.jpg'
+    },
+];
+
+const nowPlayingMovies4: Movie[] = [
+    {
+        id: '13',
+        title: 'Movie 13',
+        description: 'Movie 13 description',
+        posterUrl: '/nowMovie13.jpg'
+    },
+    {
+        id: '14',
+        title: 'Movie 14',
+        description: 'Movie 14 description',
+        posterUrl: '/nowMovie14.jpg'
+    },
+    {
+        id: '15',
+        title: 'Movie 15',
+        description: 'Movie 15 description',
+        posterUrl: '/nowMovie15.jpg'
+    },
+    {
+        id: '16',
+        title: 'Movie 16',
+        description: 'Movie 16 description',
+        posterUrl: '/nowMovie16.jpg'
+    },
+];
+
+const nowPlayingMovies5: Movie[] = [
+    {
+        id: '17',
+        title: 'Movie 17',
+        description: 'Movie 17 description',
+        posterUrl: '/nowMovie17.jpg'
+    },
+    {
+        id: '18',
+        title: 'Movie 18',
+        description: 'Movie 18 description',
+        posterUrl: '/nowMovie18.jpg'
+    },
+    {
+        id: '19',
+        title: 'Movie 19',
+        description: 'Movie 19 description',
+        posterUrl: '/nowMovie19.jpg'
+    },
+    {
+        id: '20',
+        title: 'Movie 20',
+        description: 'Movie 20 description',
+        posterUrl: '/nowMovie20.jpg'
+    },
+];
+
+const NowPlayingList: React.FC = () => {
+    return (
+        <div>
+            <h2 className={styles['centerText']}>Now Playing</h2>
+            <MovieList movies={nowPlayingMovies1} />
+            <MovieList movies={nowPlayingMovies2} />
+            <MovieList movies={nowPlayingMovies3} />
+            <MovieList movies={nowPlayingMovies4} />
+            <MovieList movies={nowPlayingMovies5} />
+        </div>
+    );
+};
+
+export default NowPlayingList;

components/SocSignBar.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import Link from 'next/link';
+
+const SocSignBar: React.FC = () => {
+    return (
+        <nav>
+            <ul>
+                <li><Link href="/">news</Link></li>
+                <li><Link href="/login">login</Link></li>
+                <li><Link href="/register">sign up</Link></li>
+            </ul>
+        </nav>
+    );
+};
+
+export default SocSignBar;

components/styling.module.css

@@ -0,0 +1,17 @@
+.centerSection {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 10vh;
+    background-color: #FDF6DC;
+    padding: 20px;
+    text-align: center;
+}
+
+.centerText {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+}

data/movies.ts

@@ -0,0 +1,17 @@
+const movies = [
+    {
+        id: '1',
+        title: 'Movie 1',
+        description: 'Movie 1 desc',
+        posterUrl: '/images/inception.jpg'
+    },
+    {
+        id: '2',
+        title: 'Movie 2',
+        description: 'Movie 2 desc',
+        posterUrl: '/images/dark-knight.jpg'
+    },
+    // Add more movies as needed
+];
+
+export default movies;