feat(stories): add story items and styles (#142)

* feat(stories): add story items and styles

* feat(stories): change classnames

* feat(stories): change classnames

src/scripts/components/presentation-selector/presentation-selector.tsx

@@ -1,12 +1,14 @@
 import React, {FunctionComponent} from 'react';
+import {Link} from 'react-router-dom';
 
 import styles from './presentation-selector.styl';
-import Stories from '../stories/stories';
+import StoryList from '../story-list/story-list';
 
 const PresentationSelector: FunctionComponent<{}> = () => (
   <div className={styles.presentationSelector}>
-    <h1>Presenter Test</h1>
-    <Stories />
+    <Link to="/">Go back</Link>
+    <h1>Presenter Mode</h1>
+    <StoryList />
   </div>
 );
 

src/scripts/components/showcase-selector/showcase-selector.tsx

@@ -1,12 +1,14 @@
 import React, {FunctionComponent} from 'react';
+import {Link} from 'react-router-dom';
 
 import styles from './showcase-selector.styl';
-import Stories from '../stories/stories';
+import StoryList from '../story-list/story-list';
 
 const ShowcaseSelector: FunctionComponent<{}> = () => (
   <div className={styles.showcaseSelector}>
-    <h1>Showcase Test</h1>
-    <Stories />
+    <Link to="/">Go back</Link>
+    <h1>Showcase Mode</h1>
+    <StoryList />
   </div>
 );
 

src/scripts/components/story-item/story-item.styl

@@ -0,0 +1,9 @@
+.storyItem
+  padding: 5px
+
+.image
+  height: 150px
+  background-color: #ccc
+
+.title
+  font-size: 1em

src/scripts/components/story-item/story-item.tsx

@@ -0,0 +1,17 @@
+import React, {FunctionComponent} from 'react';
+
+import styles from './story-item.styl';
+import {Story} from '../../actions/fetch-stories';
+
+interface Props {
+  story: Story;
+}
+
+const StoryItem: FunctionComponent<Props> = ({story}) => (
+  <div className={styles.storyItem}>
+    <div className={styles.image}></div>
+    <p className={styles.title}>{story.title}</p>
+  </div>
+);
+
+export default StoryItem;

src/scripts/components/story-list/story-list.styl

@@ -0,0 +1,4 @@
+.stories
+  display: grid
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr))
+  grid-gap: 10px

src/scripts/components/stories/stories.tsx → src/scripts/components/story-list/story-list.tsx

@@ -3,10 +3,15 @@ import {useSelector, useDispatch} from 'react-redux';
 
 import {storiesSelector} from '../../reducers/stories';
 import fetchStories from '../../actions/fetch-stories';
+import styles from './story-list.styl';
+import StoryItem from '../story-item/story-item';
 
-import styles from './stories.styl';
+interface Story {
+  id: string;
+  title: string;
+}
 
-const Stories: FunctionComponent<{}> = () => {
+const StoryList: FunctionComponent<{}> = () => {
   const stories = useSelector(storiesSelector);
   const dispatch = useDispatch();
 
@@ -16,9 +21,11 @@ const Stories: FunctionComponent<{}> = () => {
 
   return (
     <div className={styles.stories}>
-      <h2>{stories.length && stories[0].title}</h2>
+      {stories.map(story => (
+        <StoryItem key={story.id} story={story} />
+      ))}
     </div>
   );
 };
 
-export default Stories;
+export default StoryList;