From 728734caa98d95a4d5900ddba87f61aa0468b6c8 Mon Sep 17 00:00:00 2001
From: Tomas Havlicek <xhavlic@fi.muni.cz>
Date: Mon, 13 Jun 2022 16:14:57 +0200
Subject: [PATCH] feat: search input prepared
---
frontend/src/App.tsx | 4 ++--
frontend/src/components/MainPage.tsx | 1 -
frontend/src/components/Preview.tsx | 9 ++++++---
frontend/src/components/Search.tsx | 9 ---------
frontend/src/components/SearchPage.tsx | 28 ++++++++++++++++++++++++++
5 files changed, 36 insertions(+), 15 deletions(-)
delete mode 100644 frontend/src/components/Search.tsx
create mode 100644 frontend/src/components/SearchPage.tsx
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index bbfd9b1..ce87e6e 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -7,7 +7,7 @@ import { NavigationBar } from "./components/NavigationBar";
import { About } from "./components/About";
import React from "react";
import { Browse } from "./components/Browse";
-import { Search } from "./components/Search";
+import { SearchPage } from "./components/SearchPage";
import { ErrorPage } from "./components/ErrorPage";
function App() {
@@ -19,7 +19,7 @@ function App() {
<Routes>
<Route path="/" element={<MainPage/>}></Route>
<Route path="/browse" element={<Browse/>}></Route>
- <Route path="/search" element={<Search/>}></Route>
+ <Route path="/search" element={<SearchPage/>}></Route>
<Route path="/about" element={<About/>}></Route>
<Route path="*" element={<ErrorPage/>}></Route>
</Routes>
diff --git a/frontend/src/components/MainPage.tsx b/frontend/src/components/MainPage.tsx
index 5e1cad9..34b8154 100644
--- a/frontend/src/components/MainPage.tsx
+++ b/frontend/src/components/MainPage.tsx
@@ -13,7 +13,6 @@ const MainPage = () => (
padding: '0 50px',
}}
>
- This is the content page and this is some Content.
<Preview></Preview>
</Content>
<Footer
diff --git a/frontend/src/components/Preview.tsx b/frontend/src/components/Preview.tsx
index 45b1d74..59dc24f 100644
--- a/frontend/src/components/Preview.tsx
+++ b/frontend/src/components/Preview.tsx
@@ -1,8 +1,9 @@
-import { Card, Carousel, Space } from "antd";
+import { Card, Carousel, Image, Space } from "antd";
import Meta from "antd/lib/card/Meta";
+import Title from "antd/lib/skeleton/Title";
import React from "react";
const contentStyle: React.CSSProperties = {
- height: "160px",
+ height: "320px",
color: "#fff",
lineHeight: "160px",
textAlign: "center",
@@ -26,7 +27,9 @@ const cardsData: DisplayCards[] =[
const Preview: React.FC = () => (
<div>
+ <h1>Popular movies</h1>
<Space>
+
{cardsData.map((movie) => {
return (
<>
@@ -51,7 +54,7 @@ const Preview: React.FC = () => (
<Carousel autoplay>
<div>
- <h3 style={contentStyle}>Avengers: Infinity War</h3>
+ <h3 style={contentStyle}>Avengers</h3>
</div>
<div>
<h3 style={contentStyle}>Morbius</h3>
diff --git a/frontend/src/components/Search.tsx b/frontend/src/components/Search.tsx
deleted file mode 100644
index 31bc1bf..0000000
--- a/frontend/src/components/Search.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react"
-
-//for searching movies
-export const Search = () => {
- return (
- <div className="search-container">
- <div className="search-page">Search goes here</div>
- </div>)
-}
\ No newline at end of file
diff --git a/frontend/src/components/SearchPage.tsx b/frontend/src/components/SearchPage.tsx
new file mode 100644
index 0000000..e63c306
--- /dev/null
+++ b/frontend/src/components/SearchPage.tsx
@@ -0,0 +1,28 @@
+import { AudioOutlined } from '@ant-design/icons';
+import { Input, Space } from 'antd';
+import React from 'react';
+
+const { Search } = Input;
+
+//function that happens when search button is pressed
+const onSearch = (value: string) => console.log(value);
+
+//for searching movies
+export const SearchPage = () => {
+ return (
+ <>
+ <Space direction="vertical" style={{ display: 'flex', padding: 24, textAlign: 'center' }}>
+ <Search
+ placeholder="input search text"
+ allowClear
+ enterButton="Search"
+ size="large"
+ onSearch={onSearch}
+ width="400 px" />
+ </Space>
+ <Space>
+ Results here
+ </Space>
+ </>
+ );
+};
--
GitLab