Merge list component with their templates

Author: kenold

src/components/Card/Overlay/Dating.js

@@ -1,7 +1,9 @@
 import React from "react";
 import { FaTimes, FaHeart } from 'react-icons/fa';
+import Section from '~components/Section'
+import DatingData from '~data/models.json';
 
-const Dating = (props) => (
+const OverlayDating = (props) => (
     <article className={"card card--overlay card--overlay--dating" + (props.cssClasses ? " " + props.cssClasses:"")}>
         <div className="card__image">
             <a href="#profile" title={props.title}>
@@ -28,4 +30,21 @@ const Dating = (props) => (
         </div>
     </article>
 )
-export default Dating
+export default OverlayDating
+
+export const OverlayDatingList = () => (
+    <Section title="Overlay + Dating">
+        <div className="cards">
+            {DatingData.map((model) => (
+                <OverlayDating
+                    key={model.id}
+                    cssClasses="show-1-3"
+                    id={model.id}
+                    name={model.name}
+                    age={model.age}
+                    text={model.text}
+                />
+            ))}
+        </div>
+    </Section>
+)

src/components/Card/Overlay/DatingList.js

@@ -1,7 +1,9 @@
 import React from "react";
 import { FaPlay, FaHeart, FaEllipsisH } from 'react-icons/fa';
+import Section from '~components/Section'
+import MovieData from '~data/movies.json';
 
-const Movie = (props) => (
+const OverlayMovie = (props) => (
     <article className={"card card--overlay" + (props.cssClasses ? " " + props.cssClasses:"")}>
         <div className="card__image">
             <a href="#movie-detail" title={props.title}>
@@ -40,4 +42,21 @@ const Movie = (props) => (
         </div>
     </article>
 )
-export default Movie
+export default OverlayMovie
+
+export const OverlayMovieList = () => (
+    <Section title="Overlay + Movie">
+        <div className="cards">
+            {MovieData.map((movie) => (
+                <OverlayMovie
+                    key={movie.id}
+                    cssClasses="show-1-3"
+                    id={movie.id}
+                    title={movie.title}
+                    isStreaming={movie.isStreaming}
+                    text={movie.text}
+                />
+            ))}
+        </div>
+    </Section>
+)

src/components/Card/Overlay/Movie.js

@@ -2,8 +2,10 @@ import React from "react";
 import { FaRegHeart } from 'react-icons/fa';
 import Rater from 'react-rater';
 import 'react-rater/lib/react-rater.css';
+import Section from '~components/Section'
+import ProductData from '~data/products.json'
 
-const Product = (props) => (
+const OverlayProduct = (props) => (
     <article className={"card card--overlay-icon" + (props.cssClasses ? " " + props.cssClasses:"")}>
         <div className="card__image">
             <a href="#product-detail" title={props.title}>
@@ -38,4 +40,22 @@ const Product = (props) => (
         </div>
     </article>
 )
-export default Product
+export default OverlayProduct
+
+export const OverlayProductList = () => (
+    <Section title="Overlay Icon">
+        <div className="cards">
+            {ProductData.map((product) => (
+                <OverlayProduct
+                    key={product.id}
+                    cssClasses="show-2-4"
+                    id={product.id}
+                    title={product.title}
+                    topic={product.topic}
+                    price={product.price}
+                    discount={product.discount}
+                />
+            ))}
+        </div>
+    </Section>
+)

src/components/Card/Overlay/MovieList.js

@@ -1,7 +1,9 @@
 import React from "react";
 import { FaPlayCircle } from 'react-icons/fa';
+import Section from '~components/Section'
+import VideoData from '~data/videos.json';
 
-const Video = (props) => (
+const OverlayVideo = (props) => (
     <article className={"card card--video" + (props.cssClasses ? " " + props.cssClasses:"")}>
         <div className="card__image">
             <a href="#video-detail">
@@ -16,4 +18,19 @@ const Video = (props) => (
         </div>
     </article>
 )
-export default Video
+export default OverlayVideo
+
+export const OverlayVideoList = (props) => (
+    <Section title="Video">
+        <div className="cards">
+        {VideoData.slice(0, 3).map((video) => (
+            <OverlayVideo
+                key={video.id}
+                cssClasses="show-1-3"
+                id={video.id}
+                title={video.title}
+            />
+        ))}
+        </div>
+    </Section>
+)

src/components/Card/Overlay/Product.js

@@ -1,7 +1,9 @@
 import React from "react";
 import Moment from 'react-moment';
+import Section from '~components/Section'
+import BlogData from '~data/posts.json';
 
-const Badge = (props) => (
+const StackedBadge = (props) => (
     <article className={"card card--badge" + (props.cssClasses ? " " + props.cssClasses:"")}>
         <div className="card__image">
             <a href="#blog-detail">
@@ -23,5 +25,22 @@ const Badge = (props) => (
         </div>
     </article>
 )
+export default StackedBadge;
 
-export default Badge
+export const StackedBadgeList = () => (
+    <Section>
+        <div className="cards">
+            {BlogData.slice(0, 3).map((post) => (
+                <StackedBadge
+                    key={post.id}
+                    cssClasses="show-1-3"
+                    id={(post.id) + 4}
+                    title={post.title}
+                    topic={post.topic}
+                    author={post.author}
+                    date={post.date}
+                />
+            ))}
+        </div>
+    </Section>
+)

src/components/Card/Overlay/ProductList.js

@@ -1,7 +1,9 @@
 import React from "react";
 import { FaPlay } from 'react-icons/fa';
+import Section from '~components/Section'
+import VideoData from '~data/videos.json'
 
-const BadgeVideo = (props) => (
+const StackedBadgeVideo = (props) => (
     // TODO: Rename video-hover class
     <article className={"card card--video-hover" + (props.cssClasses ? " " + props.cssClasses:"")}>
         <div className="card__image">
@@ -20,4 +22,20 @@ const BadgeVideo = (props) => (
         </div>
     </article>
 )
-export default BadgeVideo
+export default StackedBadgeVideo
+
+export const StackedBadgeVideoList = () => (
+    <Section title="Video + Badge">
+        <div className="cards">
+        {VideoData.slice(3, 6).map((video) => (
+            <StackedBadgeVideo
+                key={video.id}
+                cssClasses="show-1-3"
+                id={video.id}
+                title={video.title}
+                duration={video.duration}
+            />
+        ))}
+        </div>
+    </Section>
+)

src/components/Card/Overlay/Video.js

@@ -1,7 +1,9 @@
 import React from "react";
 import Moment from 'react-moment';
+import BlogData from "~data/posts.json";
+import Section from "~components/Section"
 
-const Basic = (props) => (
+const StackedBasic = (props) => (
     <article className={"card" + (props.cssClasses ? " " + props.cssClasses:"")}>
         <div className="card__image">
             <a href="#blog-detail">
@@ -24,4 +26,22 @@ const Basic = (props) => (
         </div>
     </article>
 )
-export default Basic
+export default StackedBasic
+
+export const StackedBasicList = () => (
+    <Section title="Stacked">
+        <div className="cards">
+            {BlogData.slice(0,3).map((post) => (
+                <StackedBasic
+                    key={post.id}
+                    cssClasses="show-1-3"
+                    id={(post.id) + 8}
+                    title={post.title}
+                    topic={post.topic}
+                    author={post.author}
+                    date={post.date}
+                />
+            ))}
+        </div>
+    </Section>
+)