Merge pull request #1 from tavareshenrique/componentization

Componentization

CHANGELOG.md

@@ -4,6 +4,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
+## [1.0.1] - 2021-09-06
+
+Create components
+
+
 ## [1.0.0] - 2021-09-05
 
 First version.

README.md

@@ -26,7 +26,7 @@
 - [Author](#computer-author)
 - [License](#closed_book-license)
 
-# :computer: Tecnologias
+# :computer: Technologies
 
 This project was made using the following technologies:
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "randovie",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/components/Container/@interfaces/index.ts

@@ -0,0 +1,5 @@
+import { ReactNode } from 'react';
+
+export interface IContainerProps {
+  children: ReactNode;
+}

src/components/Container/index.tsx

@@ -0,0 +1,9 @@
+import { IContainerProps } from './@interfaces';
+
+export default function Container({ children }: IContainerProps) {
+  return (
+    <div className="flex flex-col justify-center items-center">
+      {children}
+    </div>
+  );
+}

src/components/Duration/@interfaces/index.ts

@@ -0,0 +1,6 @@
+import { MovieType } from '../../../@types/pages/Home/Movies';
+
+export interface IDurationProps {
+  movies: MovieType[];
+  movieIndex: number;
+}

src/components/Duration/index.tsx

@@ -0,0 +1,12 @@
+import { IDurationProps } from './@interfaces';
+
+export default function Duration({ movies, movieIndex }: IDurationProps) {
+  return (
+    <div className="flex flex-row justify-center items-center mt-4">
+      <p className="text-white text-lg">Duração</p>
+      <p className="text-white ml-2 text-lg">
+        {movies[movieIndex].properties.Duração.rich_text[0].plain_text}
+      </p>
+    </div>
+  );
+}

src/components/Platform/@interfaces/index.ts

@@ -0,0 +1,7 @@
+import { MovieType } from '../../../@types/pages/Home/Movies';
+
+export interface IPlatformProps {
+  movies: MovieType[];
+  movieIndex: number;
+  handleMovie: () => void;
+}

src/components/Platform/index.tsx

@@ -0,0 +1,81 @@
+import PlatformsList from '../PlatformsList';
+
+import netflixImg from '../../../public/netflix.png';
+import disneyImg from '../../../public/disney.png';
+import hboImg from '../../../public/hbomax.png';
+import paramountImg from '../../../public/paramount.jpeg';
+import primeImg from '../../../public/prime.png';
+import appleImg from '../../../public/appletv.jpg';
+
+import { IPlatformProps } from './@interfaces';
+
+export default function Platform({ movies, movieIndex, handleMovie }: IPlatformProps) {
+  function noPlatform() {
+    const hasPlatform = movies[movieIndex].properties.Netflix.checkbox
+    || movies[movieIndex].properties.Prime.checkbox
+    || movies[movieIndex].properties['AppleTV+'].checkbox
+    || movies[movieIndex].properties['Disney+'].checkbox
+    || movies[movieIndex].properties['HBO Max'].checkbox
+    || movies[movieIndex].properties['Paramount+'].checkbox;
+
+    return !hasPlatform;
+  }
+
+  return (
+    <div className="mt-4">
+      <h2 className="text-xl text-white text-center">Plataforma(s):</h2>
+      <div className="flex flex-col justify-center items-center mt-2">
+        <ul className="flex flex-row justify-center items-center">
+          <PlatformsList
+            image={netflixImg}
+            isVisible={movies[movieIndex].properties.Netflix.checkbox}
+            title="Netflix"
+          />
+          <PlatformsList
+            image={primeImg}
+            isVisible={movies[movieIndex].properties.Prime.checkbox}
+            title="Prime Video"
+          />
+          <PlatformsList
+            image={disneyImg}
+            isVisible={movies[movieIndex].properties['Disney+'].checkbox}
+            title="Disney+"
+          />
+          <PlatformsList
+            image={hboImg}
+            isVisible={movies[movieIndex].properties['HBO Max'].checkbox}
+            title="HBO Max"
+          />
+          <PlatformsList
+            image={paramountImg}
+            isVisible={movies[movieIndex].properties['Paramount+'].checkbox}
+            title="Paramount+"
+            height="96"
+            width="96"
+          />
+          <PlatformsList
+            image={appleImg}
+            isVisible={movies[movieIndex].properties['AppleTV+'].checkbox}
+            title="Apple TV+"
+            height="96"
+            width="96"
+          />
+
+          {noPlatform() && (
+          <PlatformsList
+            isVisible
+            noPlatform
+          />
+          )}
+        </ul>
+        <button
+          onClick={handleMovie}
+          type="button"
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full mt-4"
+        >
+          Buscar Novo Filme
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/PlatformsList/@interfaces/index.ts

@@ -0,0 +1,15 @@
+interface StaticImageData {
+  src: string
+  height: number
+  width: number
+  blurDataURL?: string
+}
+
+export interface IPlatformsListProps {
+  isVisible: boolean;
+  image?: StaticImageData;
+  title?: string;
+  height?: string;
+  width?: string;
+  noPlatform?: boolean;
+}

src/components/PlatformsList/index.tsx

@@ -0,0 +1,32 @@
+import Image from 'next/image';
+
+import { IPlatformsListProps } from './@interfaces';
+
+import styles from './style.module.css';
+
+export default function PlatformsList({
+  isVisible, image, title, height = '104', width = '104', noPlatform = false,
+}: IPlatformsListProps) {
+  return (
+    <>
+      {isVisible && !noPlatform && (
+        <li className={styles.platform__list}>
+          <Image
+            src={image}
+            alt={title}
+            height={height}
+            width={width}
+            className="rounded-2xl"
+          />
+          <span className="text-white">{title}</span>
+        </li>
+      )}
+
+      {isVisible && noPlatform && (
+        <li className={`${styles.platform__list} mt-4`}>
+          <span className="text-white">Não disponível</span>
+        </li>
+      )}
+    </>
+  );
+}

src/components/PlatformsList/style.module.css

@@ -0,0 +1,3 @@
+.platform__list {
+  @apply flex flex-col justify-center items-center m-2;
+}

src/components/Title/@interfaces/index.ts

@@ -0,0 +1,6 @@
+import { MovieType } from '../../../@types/pages/Home/Movies';
+
+export interface ITitleProps {
+  movies: MovieType[];
+  movieIndex: number;
+}

src/components/Title/index.tsx

@@ -0,0 +1,9 @@
+import { ITitleProps } from './@interfaces';
+
+export default function Title({ movies, movieIndex }: ITitleProps) {
+  return (
+    <h1 className="text-4xl text-white text-center">
+      {movies[movieIndex].properties.Name.title[0].plain_text}
+    </h1>
+  );
+}

src/pages/_app.tsx

@@ -13,7 +13,9 @@ function MyApp({ Component, pageProps }: AppProps) {
         <meta name="description" content="Randovie is a random movie generator" />
       </Head>
 
-      <Component {...pageProps} />
+      <main className="bg-gray-800 h-screen w-screen flex flex-col justify-center items-center">
+        <Component {...pageProps} />
+      </main>
     </>
   );
 }