From 768d1801f2bbe1b3dff02159020a1f70dd592a39 Mon Sep 17 00:00:00 2001
From: Tomas Havlicek <xhavlic@fi.muni.cz>
Date: Sat, 11 Jun 2022 23:17:04 +0200
Subject: [PATCH] feat:added preview skeleton and example

---
 frontend/src/components/MainPage.tsx |   4 +-
 frontend/src/components/Preview.tsx  | 124 +++++++++++++++++++++++++++
 frontend/src/styles/MainPage.css     |   3 -
 3 files changed, 127 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/Preview.tsx
 delete mode 100644 frontend/src/styles/MainPage.css

diff --git a/frontend/src/components/MainPage.tsx b/frontend/src/components/MainPage.tsx
index 09e68fc..1e74ebe 100644
--- a/frontend/src/components/MainPage.tsx
+++ b/frontend/src/components/MainPage.tsx
@@ -5,6 +5,7 @@ import 'antd/dist/antd.css'
 import MenuItem from 'antd/lib/menu/MenuItem';
 import logo from '../LogoMovieBase.png';
 import '../styles/MainPage.css';
+import Preview from './Preview';
 
 const MainPage = () => (
   <Layout className="layout">
@@ -31,7 +32,8 @@ const MainPage = () => (
         padding: '0 50px',
       }}
     >
-    This is the content page and this is some Content
+    This is the content page and this is some Content.
+    <Preview></Preview>
     </Content>
     <Footer
       style={{
diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
new file mode 100644
index 0000000..cc378a9
--- /dev/null
+++ b/frontend/src/components/Preview.tsx
@@ -0,0 +1,124 @@
+import { Card, Carousel, Space } from "antd";
+import Meta from "antd/lib/card/Meta";
+import React from "react";
+const contentStyle: React.CSSProperties = {
+  height: "160px",
+  color: "#fff",
+  lineHeight: "160px",
+  textAlign: "center",
+  background: "#364d79",
+};
+
+const Preview: React.FC = () => (
+  <div>
+    <Space>
+      <Card
+        hoverable
+        style={{
+          width: 240,
+        }}
+        cover={
+          <img
+            alt="Cars"
+            src="https://upload.wikimedia.org/wikipedia/en/3/34/Cars_2006.jpg"
+          />
+        }
+      >
+        <Meta title="Cars" description="Auta" />
+      </Card>
+      <Card
+        hoverable
+        style={{
+          width: 240,
+        }}
+        cover={
+          <img
+            alt="Monster House"
+            src="https://images-na.ssl-images-amazon.com/images/S/pv-target-images/9a996123e0b01f618ab2291b479f9d5034de354b2d1bb58979ddc6937588dfa8._RI_V_TTW_.jpg"
+          />
+        }
+      >
+        <Meta title="Monster house" description="V tom domě straší" />
+      </Card>
+      <Card
+        hoverable
+        style={{
+          width: 240,
+        }}
+        cover={
+          <img
+            alt="Pokemon"
+            src="https://www.obchod.crew.cz/im/coc/1280/0/content/629080/cover_image.1607432614.jpg"
+          />
+        }
+      >
+        <Meta title="Pokemon 3" description="Pokémon 3" />
+      </Card>
+      <Card
+        hoverable
+        style={{
+          width: 240,
+        }}
+        cover={
+          <img
+            alt="Gympl"
+            src="https://img.csfd.cz/files/images/user/profile/162/847/162847510_91e839.jpg"
+          />
+        }
+      >
+        <Meta title="The Can" description="Gympl" />
+      </Card>
+      <Card
+        hoverable
+        style={{
+          width: 240,
+        }}
+        cover={
+          <img
+            alt="Toy Story"
+            src="https://m.media-amazon.com/images/M/MV5BMDU2ZWJlMjktMTRhMy00ZTA5LWEzNDgtYmNmZTEwZTViZWJkXkEyXkFqcGdeQXVyNDQ2OTk4MzI@._V1_.jpg"
+          />
+        }
+      >
+        <Meta title="Toy Story" description="www.instagram.com" />
+      </Card>
+      <Card
+        hoverable
+        style={{
+          width: 240,
+        }}
+        cover={
+          <img
+            alt="Kour"
+            src="https://img.csfd.cz/files/images/user/profile/164/556/164556101_d8e43b.jpg"
+          />
+        }
+      >
+        <Meta title="Smoke" description="KouĹ™" />
+      </Card>
+    </Space>
+
+    <Carousel autoplay>
+      <div>
+        <h3 style={contentStyle}>Avengers: Infinity War</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>Morbius</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>Princezna a BubenĂ­k</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>Scary Movie</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>Scary Movie 2</h3>
+      </div>
+      <div>
+        <h3 style={contentStyle}>Scary Movie 3</h3>
+      </div>
+    </Carousel>
+  </div>
+);
+
+export default Preview;
diff --git a/frontend/src/styles/MainPage.css b/frontend/src/styles/MainPage.css
deleted file mode 100644
index be456de..0000000
--- a/frontend/src/styles/MainPage.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.logo{
-   object-fit: contain;
-}
\ No newline at end of file
-- 
GitLab