From 02852cc5b17e1e586efc65668a186e0a3426478a Mon Sep 17 00:00:00 2001 From: frits000000 <45283950+frits000000@users.noreply.github.com> Date: Fri, 20 Nov 2020 22:34:01 +0100 Subject: [PATCH] searchpage company cards and filter setup --- ReactJS/alfaprentice/public/index.html | 2 + .../alfaprentice/src/Components/CTA/CTA.js | 19 ++- .../src/Components/Cards/Cards.css | 7 + .../src/Components/Cards/CompanyResult.js | 145 ++++++++++++++++++ .../src/Components/Dropdown/Dropdown.js | 23 +++ .../src/Components/GlobalStyles.css | 9 ++ .../src/Components/Pages/HomePage.css | 2 +- .../Pages/Search/InternSearchPage.css | 9 ++ .../Pages/Search/InternSearchPage.js | 14 ++ ReactJS/alfaprentice/src/Components/index.js | 4 + 10 files changed, 228 insertions(+), 6 deletions(-) create mode 100644 ReactJS/alfaprentice/src/Components/Cards/Cards.css create mode 100644 ReactJS/alfaprentice/src/Components/Cards/CompanyResult.js create mode 100644 ReactJS/alfaprentice/src/Components/Dropdown/Dropdown.js create mode 100644 ReactJS/alfaprentice/src/Components/Pages/Search/InternSearchPage.css diff --git a/ReactJS/alfaprentice/public/index.html b/ReactJS/alfaprentice/public/index.html index 356dd42..e99b906 100644 --- a/ReactJS/alfaprentice/public/index.html +++ b/ReactJS/alfaprentice/public/index.html @@ -13,4 +13,6 @@ + + diff --git a/ReactJS/alfaprentice/src/Components/CTA/CTA.js b/ReactJS/alfaprentice/src/Components/CTA/CTA.js index beb7cae..e729d1d 100644 --- a/ReactJS/alfaprentice/src/Components/CTA/CTA.js +++ b/ReactJS/alfaprentice/src/Components/CTA/CTA.js @@ -7,21 +7,30 @@ import "./Cta.css" class CTA extends React.Component { constructor(props) { super(props); - this.state = { - BTNText : this.props.BtnText, - ContentText : this.props.ContentText, - } } render() { + function ContentSwitch(props) { + const BtnChecker = props.BTNText; + const ContentChecker = props.ContentText; + if (BtnChecker){ + return ({BtnChecker}); + } + if (ContentChecker){ + return (

{ContentChecker}

); + } + else { + return ""; + } + } return (

{this.props.title}

- {this.props.BtnText} +
) diff --git a/ReactJS/alfaprentice/src/Components/Cards/Cards.css b/ReactJS/alfaprentice/src/Components/Cards/Cards.css new file mode 100644 index 0000000..0357430 --- /dev/null +++ b/ReactJS/alfaprentice/src/Components/Cards/Cards.css @@ -0,0 +1,7 @@ +.CompanyResultCard .CompantResultBtn{ + text-align: right; +} + +.CompanyResultCard .row{ + align-items: center; +} \ No newline at end of file diff --git a/ReactJS/alfaprentice/src/Components/Cards/CompanyResult.js b/ReactJS/alfaprentice/src/Components/Cards/CompanyResult.js new file mode 100644 index 0000000..c9cc6b7 --- /dev/null +++ b/ReactJS/alfaprentice/src/Components/Cards/CompanyResult.js @@ -0,0 +1,145 @@ +//Modules +import React from 'react'; + +//Style +import "./Cards.css"; + +class CompanyResult extends React.Component { + render() { + return( +
+
+
+
+

Bedrijf 1

+
+
+ Wij bij bedrijf 1 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ……. +
+ +
+
+
+ bla +
+
+ bla +
+
+ bla +
+
+ bla +
+
+ bla +
+
+
+
+
+ +
+
+

Bedrijf 2

+
+
+ Wij bij bedrijf 2 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ……. +
+ +
+
+
+ bla +
+
+ bla +
+
+ bla +
+
+ bla +
+
+ bla +
+
+
+
+
+ +
+
+

Bedrijf 3

+
+
+ Wij bij bedrijf 3 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ……. +
+ +
+
+
+ bla +
+
+ bla +
+
+ bla +
+
+ bla +
+
+ bla +
+
+
+
+
+ +
+
+

Bedrijf 4

+
+
+ Wij bij bedrijf 4 zijn bezig met bla bla en zoeken altijd naar bla bla bla. Wij zijn bla bla en bla bla maar altijd bla bla. bla bla bla tolereren wij echten niet. bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla ……. +
+ +
+
+
+ bla +
+
+ bla +
+
+ bla +
+
+ bla +
+
+ bla +
+
+
+
+
+
+
+ ) + } +} + +export default CompanyResult; \ No newline at end of file diff --git a/ReactJS/alfaprentice/src/Components/Dropdown/Dropdown.js b/ReactJS/alfaprentice/src/Components/Dropdown/Dropdown.js new file mode 100644 index 0000000..291f5d4 --- /dev/null +++ b/ReactJS/alfaprentice/src/Components/Dropdown/Dropdown.js @@ -0,0 +1,23 @@ +import React from 'react'; + + +class Dropdown extends React.Component { + constructor(props){ + super(props) + } + render() { + return ( +
+ + +
+ {this.props.Category} +
+
+ ) + } +} + +export default Dropdown; \ No newline at end of file diff --git a/ReactJS/alfaprentice/src/Components/GlobalStyles.css b/ReactJS/alfaprentice/src/Components/GlobalStyles.css index 1a87faa..e5e43dd 100644 --- a/ReactJS/alfaprentice/src/Components/GlobalStyles.css +++ b/ReactJS/alfaprentice/src/Components/GlobalStyles.css @@ -32,3 +32,12 @@ .AP-color-primary{ color: #DE0000; } + +.Container-NP{ + padding-left: 0px !important; + padding-right: 0px !important; +} + +.GlobalHR{ + border: 2px solid #DE0000; +} \ No newline at end of file diff --git a/ReactJS/alfaprentice/src/Components/Pages/HomePage.css b/ReactJS/alfaprentice/src/Components/Pages/HomePage.css index e4635ba..860bc19 100644 --- a/ReactJS/alfaprentice/src/Components/Pages/HomePage.css +++ b/ReactJS/alfaprentice/src/Components/Pages/HomePage.css @@ -6,7 +6,7 @@ } .HomeHero:before { - background: #ff0000; + background: #DE0000; opacity: 0.7; clip-path: polygon(0 0, 40% 0, 60% 100%, 0% 100%); content: ''; diff --git a/ReactJS/alfaprentice/src/Components/Pages/Search/InternSearchPage.css b/ReactJS/alfaprentice/src/Components/Pages/Search/InternSearchPage.css new file mode 100644 index 0000000..f93baca --- /dev/null +++ b/ReactJS/alfaprentice/src/Components/Pages/Search/InternSearchPage.css @@ -0,0 +1,9 @@ +.SearchPage hr{ + border: 2px solid #DE0000; + margin-left: 0px !important; +} + +.dropdown-toggle{ + min-width: 10rem; + display: inline-block !important; +} \ No newline at end of file diff --git a/ReactJS/alfaprentice/src/Components/Pages/Search/InternSearchPage.js b/ReactJS/alfaprentice/src/Components/Pages/Search/InternSearchPage.js index 258282f..4233a0e 100644 --- a/ReactJS/alfaprentice/src/Components/Pages/Search/InternSearchPage.js +++ b/ReactJS/alfaprentice/src/Components/Pages/Search/InternSearchPage.js @@ -1,10 +1,15 @@ //Module import React from 'react'; +//Style +import "./InternSearchPage.css"; + //Component import { HeroOne, CTA, + Dropdown, + CompanyResults, } from "../../"; class InternSearch extends React.Component { @@ -12,6 +17,15 @@ class InternSearch extends React.Component { return (
+
+
+ + + +
+
+
+
) diff --git a/ReactJS/alfaprentice/src/Components/index.js b/ReactJS/alfaprentice/src/Components/index.js index f8f02f1..fdf1794 100644 --- a/ReactJS/alfaprentice/src/Components/index.js +++ b/ReactJS/alfaprentice/src/Components/index.js @@ -4,6 +4,8 @@ import Header from "./Header/Header"; import HeroOne from "./Hero/Hero"; import CTA from "./CTA/CTA" import Footer from "./Footer/Footer"; +import Dropdown from "./Dropdown/Dropdown"; +import CompanyResults from "./Cards/CompanyResult"; //Layout imports import DefaultLayout from "./Layouts/DefaultLayout"; @@ -22,6 +24,8 @@ export { HeroOne, CTA, Footer, + Dropdown, + CompanyResults, }