From 07f66c0146a08c7bfa4a368981bffa56b875e114 Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Tue, 20 Aug 2019 22:14:12 +0700
Subject: [PATCH] added example image switcher

---
 src/components/node/ImageSwitcher/index.tsx   | 15 +++++++
 src/components/node/ImageSwitcher/styles.scss | 42 +++++++++++++++++++
 .../examples/ImageExample/index.tsx           |  4 +-
 3 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 src/components/node/ImageSwitcher/index.tsx
 create mode 100644 src/components/node/ImageSwitcher/styles.scss

diff --git a/src/components/node/ImageSwitcher/index.tsx b/src/components/node/ImageSwitcher/index.tsx
new file mode 100644
index 00000000..16e76edf
--- /dev/null
+++ b/src/components/node/ImageSwitcher/index.tsx
@@ -0,0 +1,15 @@
+import React, { FC } from 'react';
+import * as styles from './styles.scss';
+
+const ImageSwitcher: FC<{}> = () => (
+  <div className={styles.wrap}>
+    <div className={styles.switcher}>
+      <div />
+      <div />
+      <div />
+      <div />
+    </div>
+  </div>
+);
+
+export { ImageSwitcher };
diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.scss
new file mode 100644
index 00000000..c997a5ff
--- /dev/null
+++ b/src/components/node/ImageSwitcher/styles.scss
@@ -0,0 +1,42 @@
+.wrap {
+  width: 100%;
+  height: 0;
+  position: relative;
+}
+
+.switcher {
+  position: absolute;
+  background: transparentize(black, 0.5);
+  display: flex;
+  right: $gap;
+  top: $gap;
+  border-radius: 24px;
+  padding: 0 3px;
+  flex-wrap: wrap;
+
+  & > div {
+    width: 30px;
+    height: 30px;
+    box-sizing: border-box;
+    opacity: .3;
+    cursor: pointer;
+    transition: opacity 0.25s;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &::after {
+      content: ' ';
+      display: block;
+      width: 14px;
+      height: 14px;
+      // background: white;
+      border-radius: 8px;
+      box-shadow: inset white 0 0 0 2px;
+    }
+  }
+}
diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx
index 1495db06..308fd984 100644
--- a/src/containers/examples/ImageExample/index.tsx
+++ b/src/containers/examples/ImageExample/index.tsx
@@ -8,13 +8,15 @@ import { Comment } from '~/components/node/Comment';
 import { NodePanel } from '~/components/node/NodePanel';
 import { NodeRelated } from '~/components/node/NodeRelated';
 import { Tags } from '~/components/node/Tags';
-import { MenuButton } from '~/components/node/MenuButton';
 import { NodeNoComments } from '~/components/node/NodeNoComments';
+import { ImageSwitcher } from "~/components/node/ImageSwitcher";
 
 interface IProps {}
 
 const ImageExample: FC<IProps> = () => (
   <Card className={styles.node} seamless>
+    <ImageSwitcher />
+
     <div className={styles.image_container}>
       <img
         className={styles.image}