added example image switcher

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 };

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;
+    }
+  }
+}

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}