Center small card list

components/AgeRating.js

@@ -0,0 +1,25 @@
+import React from "react"
+import SbEditable from "storyblok-react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/AgeRating.module.scss"
+
+const AgeRating = ({ data }) => {
+  var content = data.story.content;
+  return (
+    <SbEditable content={content} key={content._uid}>
+      <main>
+        {/* <div className={[styles.movie, styles.test].join(' ')}> */}
+        <div className={styles.agerating}>
+          <h1 className={styles.title}>
+            {content.title}
+          </h1>
+        </div>
+        <div className={styles.description}>
+          {render(content.description)}
+        </div>
+      </main>
+    </SbEditable>
+  )
+}
+
+export default AgeRating

components/Bar.js

@@ -0,0 +1,51 @@
+import React, { useState } from "react"
+import SbEditable from "storyblok-react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/Bar.module.scss"
+import { getData } from "../utils/storyblok"
+import RelatedItemGallerySmall from "./RelatedItemGallerySmall"
+import RelatedItemGallery from "./RelatedItemGallery"
+import InPageSlideshow from "./InPageSlideshow"
+import SmallCardList from "./SmallCardList"
+import DynamicComponent from './DynamicComponent' //this needs to be imported so that the blocks work
+import { FacebookShareButton, FacebookIcon,TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon } from 'next-share';
+
+const Bar = ({ data, level }) => {
+  if (level === 'data') {
+    var content = data.story.content;
+  } else {
+    var content = data;
+  }
+
+  //returning the HTML
+  return (
+    <SbEditable content={content} key={content._uid}>
+      <main>
+        <div className={styles.bar}>
+          <h1 className={styles.title}>
+            {content.title}
+          </h1>
+
+          <div className="sharebar">
+            <FacebookShareButton url={"http://imdbplus.vercel.app/"+data.story.full_slug} quote={content.short} hashtag={'#imdbplus'}><FacebookIcon size={32} round /></FacebookShareButton>
+            <LinkedinShareButton url={"http://imdbplus.vercel.app/"+data.story.full_slug} summary={content.short}><LinkedinIcon size={32} round /></LinkedinShareButton>
+            <TwitterShareButton url={"http://imdbplus.vercel.app/"+data.story.full_slug} title={content.title}><TwitterIcon size={32} round /></TwitterShareButton>
+          </div>
+
+          <div className={styles.mainpicture} style={{ backgroundImage: `url("${content.mainpicture.filename}")` }}></div>
+
+          <div className={styles.description}>
+            {render(content.description)}
+          </div>
+
+          {content.body ? content.body.map((content) =>
+          <DynamicComponent data={content} key={content._uid} />
+        ) : null}
+
+        </div>
+      </main>
+    </SbEditable>
+  )
+}
+
+export default Bar

components/BarList.js

@@ -0,0 +1,40 @@
+import React, { useState } from "react"
+import SbEditable from "storyblok-react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/BarList.module.scss"
+import { getAllItems } from "../utils/storyblok"
+import SmallCardList from "./SmallCardList"
+
+const BarList = ({ data, level, locale }) => {
+  if (level === 'data') {
+    var content = data.story.content;
+  } else {
+    var content = data;
+  }
+  const [sortby, setSortby] = useState();
+
+  function updateSortby(sortby){
+    setSortby(sortby);
+    getAllItems('bar', locale, sortby).then(
+      function (result) {
+        setItems(result.data.stories);
+      });
+  }
+
+  const [items, setItems] = useState([]);
+  getAllItems('bar', locale, sortby).then(
+    function (result) {
+      setItems(result.data.stories);
+    });
+
+  return (
+    <div className={styles.list}>
+    <div>
+        {items && items.length > 0 && <SmallCardList items={items} type="movie"></SmallCardList>}
+      </div>
+    </div>
+
+  );
+};
+
+export default BarList;

components/BlogPost.js

@@ -24,3 +24,4 @@ const BlogPost = ({ blok }) => {
 }
 
 export default BlogPost
+//test123

components/City.js

@@ -0,0 +1,57 @@
+import React, { useState } from "react"
+import SbEditable from "storyblok-react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/City.module.scss"
+import { getData } from "../utils/storyblok"
+import RelatedItemGallerySmall from "./RelatedItemGallerySmall"
+import RelatedItemGallery from "./RelatedItemGallery"
+import InPageSlideshow from "./InPageSlideshow"
+import SmallCardList from "./SmallCardList"
+import DynamicComponent from './DynamicComponent' //this needs to be imported so that the blocks work
+import { FacebookShareButton, FacebookIcon,TwitterShareButton, TwitterIcon, LinkedinShareButton, LinkedinIcon } from 'next-share';
+
+
+const City = ({ data, level }) => {
+  if (level === 'data') {
+    var content = data.story.content;
+  } else {
+    var content = data;
+  }
+
+  //returning the HTML
+  return (
+    <SbEditable content={content} key={content._uid}>
+      <main>
+        {/* <div className={[styles.movie, styles.test].join(' ')}> */}
+        <div className={styles.city}>
+          <h1 className={styles.title}>
+            {content.title}
+          </h1>
+
+          <div className={styles.score}>
+            Population: {render(content.population)}
+          </div>
+
+          <div className="sharebar">
+            <FacebookShareButton url={"http://tripadvisorplus.vercel.app/"+data.story.full_slug} quote={content.short} hashtag={'#imdbplus'}><FacebookIcon size={32} round /></FacebookShareButton>
+            <LinkedinShareButton url={"http://tripadvisorplus.vercel.app/"+data.story.full_slug} summary={content.short}><LinkedinIcon size={32} round /></LinkedinShareButton>
+            <TwitterShareButton url={"http://tripadvisorplus.vercel.app/"+data.story.full_slug} title={content.title}><TwitterIcon size={32} round /></TwitterShareButton>
+          </div>
+
+          <div className={styles.mainpicture} style={{ backgroundImage: `url("${content.mainpicture.filename}")` }}></div>
+
+          <div className={styles.description}>
+            {render(content.description)}
+          </div>
+        </div>
+
+        {content.body ? content.body.map((content) =>
+          <DynamicComponent data={content} key={content._uid} />
+        ) : null}
+
+      </main>
+    </SbEditable>
+  )
+}
+
+export default City

components/CityList.js

@@ -0,0 +1,40 @@
+import React, { useState } from "react"
+import SbEditable from "storyblok-react"
+import { render } from "storyblok-rich-text-react-renderer"
+import styles from "../styles/CityList.module.scss"
+import { getAllItems } from "../utils/storyblok"
+import SmallCardList from "./SmallCardList"
+
+const CityList = ({ data, level, locale }) => {
+  if (level === 'data') {
+    var content = data.story.content;
+  } else {
+    var content = data;
+  }
+  const [sortby, setSortby] = useState();
+
+  function updateSortby(sortby){
+    setSortby(sortby);
+    getAllItems('city', locale, sortby).then(
+      function (result) {
+        setItems(result.data.stories);
+      });
+  }
+
+  const [items, setItems] = useState([]);
+  getAllItems('city', locale, sortby).then(
+    function (result) {
+      setItems(result.data.stories);
+    });
+
+  return (
+    <div className={styles.list}>
+    <div>
+        {items && items.length > 0 && <SmallCardList items={items} type="movie"></SmallCardList>}
+      </div>
+    </div>
+
+  );
+};
+
+export default CityList;

components/DynamicComponent.js

@@ -24,6 +24,14 @@ import EmailOptin from './EmailOptin'
 import TwoCol from './TwoCol'
 import Title from './Title'
 import TopMovies from './TopMovies'
+import AgeRating from './AgeRating'
+import City from './City'
+import CityList from './CityList'
+import Restaurant from './Restaurant'
+import RestaurantList from './RestaurantList'
+import Bar from './Bar'
+import BarList from './BarList'
+import TopRestaurant from './TopRestaurant'
 
 const Components = {
   'teaser': Teaser,
@@ -51,7 +59,16 @@ const Components = {
   'emailoptin':EmailOptin,
   'twocol':TwoCol,
   'title':Title,
-  'topmovies':TopMovies
+  'topmovies':TopMovies,
+  'agerating':AgeRating,
+  'city':City,
+  'citylist':CityList,
+  'restaurant':Restaurant,
+  'restaurantlist':RestaurantList,
+  'bar':Bar,
+  'barlist':BarList,
+  'toprestaurants':TopRestaurant
+
 }
 
 

components/EmailOptin.js

@@ -10,7 +10,7 @@ const EmailOptin = ({ }) => {
 
     <div className={styles.emailoptin}>
       <div className={styles.optinbutton} onClick={() => toggleformstate()}>Keep me posted through the newsletter</div>
-      {/* {formstate&&<iframe width="540" height="900" src="" frameborder="0" scrolling="auto" allowfullscreen style={{ display: `block`, marginLeft: `auto`, marginRight: `auto`, maxWidth: '100%' }}></iframe>} */}
+      {formstate&&<iframe width="540" height="900" src="https://1dbb886b.sibforms.com/serve/MUIEAEXK1N8UeTJcQ55aYijH0yiIkH1WoozB8yNzOTg6BwhGfHNVDIftZmyBa6EuhmlkAsTM4J7oTwKhX6DJ0fQmryzQrQ3xB_rpGTL505D694DnVlFzBTVHgP-clhcOvB46SLP-CnFLy0ZjdgHe8vuCT64zNlaUJGW5IaA0f5WV1J1TDiEd35HWGFWHX_CWuGYgvKx4ducikVsg" frameborder="0" scrolling="auto" allowfullscreen style={{ display: `block`, marginLeft: `auto`, marginRight: `auto`, maxWidth: '100%' }}></iframe>}
     </div>
   );
 };

components/Footer.js

@@ -1,18 +1,17 @@
 import styles from "../styles/Footer.module.scss"
+import Image from "next/image"
+
 
 const Footer = () => {
   return (
-    <footer className={styles.footerwrapper}>
+<footer className={styles.footerwrapper}>
       <div className={styles.footer}>
 
-        <div className="">
-          <img
-            src="https://a.storyblok.com/f/133261/3039x582/a60d166ec2/logo-colored-full.png/m/200x0"
-            alt="IMDBPlus Logo"
-            className=""
-          />
+      <div className="">
+      <Image src="/trip-advisor-+-logo .png" alt="IMDBPlus Logo" width="150" height="150" />
         </div>
-        <p>IMDB Plus is every bit as good as IMDB. Plus!</p>
+
+        <p>TripAdvisorPlus is every bit as good as TripAdvisor. Plus!</p>
       </div>
     </footer>
 

components/FrontpageSlideshow.js

@@ -42,7 +42,7 @@ const FrontpageSlideshow = ({ data, level, locale }) => {
 
   const [newsitems, setNewsitems] = useState([]);
 
-  getFPSData(content._uid, locale, content.preview = false, 'newsitem').then(
+  getFPSData(content._uid, locale, content.preview = false, 'city').then(
     function (result) {
       setNewsitems(result.data.stories);
     });
@@ -69,7 +69,7 @@ const FrontpageSlideshow = ({ data, level, locale }) => {
           const lang = item.lang === "default" ? "/en" : `/${item.lang}`;
           return (
             <a
-              href={`${lang}/newsitem/${item.slug}`}
+              href={`${lang}/city/${item.slug}`}
             >
               <div className={styles.item}>
                 <div className={styles.mainpicture} style={{ backgroundImage: `url("${item.content.mainpicture.filename}")` }}>

components/Movie.js

@@ -54,6 +54,9 @@ const Movie = ({ data, level }) => {
     var genres = data.rels.filter(obj => {
       return content.genres.includes(obj.uuid);
     })
+    var ageratings = data.rels.filter(obj => {
+      return content.agerating.includes(obj.uuid);
+    })
   } else {
     var content = data;
   }
@@ -88,6 +91,16 @@ const Movie = ({ data, level }) => {
               </div>
             ))}
           </div>
+
+          <div className={styles.ageratinglist}>
+            {ageratings.map((item, index) => (
+              <a href={`/${item.full_slug}`}><div className={styles.agerating}>
+                {item.content.title}
+              </div></a>
+            ))}
+          </div>
+
+
           <div className={styles.mainpicture} style={{ backgroundImage: `url("${content.mainpicture.filename}")` }}>
           </div>
           <div className={styles.imagegallery}>
@@ -97,6 +110,11 @@ const Movie = ({ data, level }) => {
           <div className={styles.short}>
             {render(content.short)}
           </div>
+
+          <div className={styles.score}>
+            Score {render(content.score)}
+          </div>
+
           <div className={styles.synopsis}>
             {render(content.synopsis)}
           </div>