From 175ef582f6368e1cf8f05942cbdc879daacaacb3 Mon Sep 17 00:00:00 2001
From: Vadim <korobeinikovv@mail.ru>
Date: Tue, 19 Jan 2021 21:29:50 +0300
Subject: [PATCH] Add base styles

---
 src/ImageCarousel.svelte                   | 42 +++++++++++++++++++---
 src/{ => stories}/ImageCarousel.stories.js | 10 +++---
 src/stories/ImageCarouselView.svelte       | 22 ++++++++++++
 3 files changed, 65 insertions(+), 9 deletions(-)
 rename src/{ => stories}/ImageCarousel.stories.js (51%)
 create mode 100644 src/stories/ImageCarouselView.svelte

diff --git a/src/ImageCarousel.svelte b/src/ImageCarousel.svelte
index ce50b77..de62788 100644
--- a/src/ImageCarousel.svelte
+++ b/src/ImageCarousel.svelte
@@ -1,10 +1,44 @@
 <script>
-	export let title = 'Hello';
+  /**
+   * Enable Next/Previos arrows
+   */
+	export let arrows = true;
 </script>
 
-<main>
-	<h1>{title}</h1>
-</main>
+<div class="main-container">
+  {#if arrows}
+  <div class="side-container">
+    <span class="clickable">&lt;</span>
+  </div>
+  {/if}
+  <div class="content-container">
+    <slot></slot>
+  </div>
+  {#if arrows}
+  <div class="side-container">
+    <span class="clickable">&gt;</span>
+  </div>
+  {/if}
+</div>
 
 <style>
+  .main-container {
+    display: flex;
+    width: 100%;
+  }
+  .content-container {
+    flex: 1;
+  }
+  .side-container {
+    background-color: cornflowerblue;
+    height: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .clickable {
+    cursor: pointer;
+  }
 </style>
\ No newline at end of file
diff --git a/src/ImageCarousel.stories.js b/src/stories/ImageCarousel.stories.js
similarity index 51%
rename from src/ImageCarousel.stories.js
rename to src/stories/ImageCarousel.stories.js
index d8320c4..25b1795 100644
--- a/src/ImageCarousel.stories.js
+++ b/src/stories/ImageCarousel.stories.js
@@ -1,19 +1,19 @@
-import ImageCarousel from './ImageCarousel.svelte';
+import ImageCarouselView from './ImageCarouselView.svelte';
 
 export default {
   title: 'ImageCarousel',
-  component: ImageCarousel,
+  component: ImageCarouselView,
   argTypes: {
-    title: { control: 'text' },
+    arrows: { control: 'boolean' },
   },
 };
 
 const Template = ({ ...args }) => ({
-  Component: ImageCarousel,
+  Component: ImageCarouselView,
   props: args,
 });
 
 export const Primary = Template.bind({});
 Primary.args = {
-  title: 'This is a title'
+  arrows: true
 };
diff --git a/src/stories/ImageCarouselView.svelte b/src/stories/ImageCarouselView.svelte
new file mode 100644
index 0000000..89c24c2
--- /dev/null
+++ b/src/stories/ImageCarouselView.svelte
@@ -0,0 +1,22 @@
+<script>
+  import ImageCarousel from '../ImageCarousel.svelte'
+
+  /**
+   * Enable Next/Previos arrows
+   */
+	export let arrows = true;
+</script>
+
+<div class="main-container">
+  <ImageCarousel {arrows} >
+    <h1>Element 1</h1>
+    <h1>Element 2</h1>
+  </ImageCarousel>
+</div>
+
+<style>
+  .main-container {
+    display: flex;
+    width: 100%;
+  }
+</style>
\ No newline at end of file