Skip to content

Commit 2e3a37a

Browse files
kenoldkenold
committed
rename and add h-cards to /horizontal
1 parent a43cd34 commit 2e3a37a

File tree

8 files changed

+114
-118
lines changed

8 files changed

+114
-118
lines changed

‎src/components/Card/Horizontal.js

-46
This file was deleted.

‎src/components/Card/Horizontal/Basic.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
import { FaComment } from 'react-icons/fa';
3+
import SectionHero from '~components/sectionHero'
4+
import BlogData from '~data/posts.json';
5+
6+
const HorizontalBasic = () => (
7+
<SectionHero title="Horizontal">
8+
{BlogData.slice(0,1).map((post) => (
9+
<article key={post.id} className="card card--horizontal show-1-1">
10+
<div className="card__image">
11+
<a href="#blog-detail">
12+
<img src={"/800627/" + post.id + ".jpg"} alt={post.title} />
13+
</a>
14+
</div>
15+
<div className="card__content">
16+
<div className="card__topic">{post.topic}</div>
17+
<header className="card__header">
18+
<h2 className="card__title" title={post.title}>
19+
<a href="#blog-detail">{post.title}.</a>
20+
</h2>
21+
</header>
22+
<p className="card__text">{post.text}</p>
23+
<div className="card__footer">
24+
<div className="card__meta-author">by {post.author}</div>
25+
<div className="card__meta-comment">
26+
<FaComment />
27+
<span className="card__meta-comment-count">24</span>
28+
</div>
29+
</div>
30+
</div>
31+
</article>
32+
))}
33+
</SectionHero>
34+
)
35+
export default HorizontalBasic
36+

‎src/components/Card/Horizontal/Reverse.js

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
import SectionHero from '~components/sectionHero'
3+
import BlogData from '~data/posts.json';
4+
5+
const HorizontalReverse = () => (
6+
<SectionHero cssClasses="l-cards--horizontal--reverse">
7+
{BlogData.slice(1,2).map((post) => (
8+
<article key={post.id} className="card card--horizontal card--horizontal--reverse show-1-1">
9+
<div className="card__image">
10+
<a href="#blog-detail">
11+
<img src="/misc/shopping-cart-colour-400px.png" alt={post.title} />
12+
</a>
13+
</div>
14+
<div className="card__content">
15+
<div className="card__topic">
16+
{post.topic}
17+
</div>
18+
<header className="card__header">
19+
<h2 className="card__title" title={post.title}>
20+
<a href="#blog-detail">{post.title}.</a>
21+
</h2>
22+
</header>
23+
<p className="card__text">{post.text}</p>
24+
<a href="#blog-detail">
25+
<div className="btn btn--primary">Learn more</div>
26+
</a>
27+
</div>
28+
</article>
29+
))}
30+
</SectionHero>
31+
)
32+
export default HorizontalReverse

‎src/components/Card/Horizontal/Video.js

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from "react";
2+
import { FaPlay } from 'react-icons/fa';
3+
import Button from "../../Button/Icon";
4+
import SectionHero from '~components/sectionHero'
5+
import BlogData from '~data/posts.json';
6+
7+
const HorizontalVideo = () => (
8+
<SectionHero cssClasses="l-cards--horizontal--video">
9+
{BlogData.slice(2,3).map((post) => (
10+
<article key={post.id} className="card card--horizontal card--horizontal--video show-1-1">
11+
<div className="card__image">
12+
<img src={"/800627/" + post.id + ".jpg"} alt={post.title} />
13+
<Button url="#play" type="circle"><FaPlay /></Button>
14+
</div>
15+
<div className="card__content">
16+
<div className="card__topic">Watch the video</div>
17+
<header className="card__header">
18+
<h2 className="card__title" title={post.title}>
19+
<a href="#blog-detail">{post.title}.</a>
20+
</h2>
21+
</header>
22+
<p className="card__text">{post.text}</p>
23+
</div>
24+
</article>
25+
))}
26+
</SectionHero>
27+
)
28+
29+
export default HorizontalVideo

‎src/components/Card/HorizontalFlipped.js

-35
This file was deleted.

‎src/components/Card/HorizontalVideo.js

-31
This file was deleted.

‎src/components/sectionHero.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
3+
const SectionHero = (props) => (
4+
<section className={"l-cards l-cards--horizontal"
5+
+ (props.cssClasses ? " " + props.cssClasses:"")}>
6+
<div className="container">
7+
{props.children}
8+
</div>
9+
</section>
10+
)
11+
export default SectionHero

‎src/pages/card.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from "react"
22
import Layout from "~components/layout"
33
import SEO from "~components/seo"
44

5-
// card components using ~Card alias from gatsby-node.js
5+
// importbcard components using ~Card alias from gatsby-node.js
66
import { StackedBasicList } from '~Card/Stacked/Basic';
77
import { StackedSocialList } from '~Card/Stacked/Social';
88
import { StackedOverlapList } from '~Card/Stacked/Overlap';
@@ -15,9 +15,9 @@ import { StackedCtaList } from '~Card/Stacked/Cta';
1515
import { StackedTestimonialList } from '~Card/Stacked/Testimonial';
1616
import { StackedBadgeVideoList } from '~Card/Stacked/BadgeVideo';
1717

18-
import Horizontal from '~Card/Horizontal';
19-
import HorizontalFlipped from "~Card/HorizontalFlipped";
20-
import HorizontalVideo from '~Card/HorizontalVideo';
18+
import HorizontalBasic from '~Card/Horizontal/Basic';
19+
import HorizontalReverse from "~Card/Horizontal/Reverse";
20+
import HorizontalVideo from '~Card/Horizontal/Video';
2121
import HorizontalMusicPlayer from '~Card/HorizontalMusicPlayer';
2222

2323
import { OverlayMovieList } from '~Card/Overlay/Movie';
@@ -36,8 +36,8 @@ const Card = () => (
3636
<StackedBadgeList />
3737
<StackedFloatingIconList />
3838
<StackedMinimalThemedList />
39-
<Horizontal />
40-
<HorizontalFlipped />
39+
<HorizontalBasic />
40+
<HorizontalReverse />
4141
<HorizontalVideo />
4242
<HorizontalMusicPlayer />
4343
<StackedCtaList />

0 commit comments

Comments
 (0)