From c7581e976ea27dd7aaa067277eec3b14db0bf3cb Mon Sep 17 00:00:00 2001
From: muerwre <gotham48@gmail.com>
Date: Tue, 20 Aug 2019 22:30:06 +0700
Subject: [PATCH] changed image switcher appearance

---
 src/components/node/ImageSwitcher/index.tsx    | 18 +++++++++++++-----
 src/components/node/ImageSwitcher/styles.scss  | 10 ++++++++--
 src/containers/examples/ImageExample/index.tsx |  2 +-
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/components/node/ImageSwitcher/index.tsx b/src/components/node/ImageSwitcher/index.tsx
index 16e76edf..c4dbc03f 100644
--- a/src/components/node/ImageSwitcher/index.tsx
+++ b/src/components/node/ImageSwitcher/index.tsx
@@ -1,13 +1,21 @@
 import React, { FC } from 'react';
 import * as styles from './styles.scss';
+import range from 'ramda/es/range';
+import classNames = require("classnames");
 
-const ImageSwitcher: FC<{}> = () => (
+interface IProps {
+  total: number;
+  current: number;
+}
+
+const ImageSwitcher: FC<IProps> = ({ total, current }) => (
   <div className={styles.wrap}>
     <div className={styles.switcher}>
-      <div />
-      <div />
-      <div />
-      <div />
+      {
+        range(0, total).map((item) => (
+          <div className={classNames({ is_active: item === current })} />
+        ))
+      }
     </div>
   </div>
 );
diff --git a/src/components/node/ImageSwitcher/styles.scss b/src/components/node/ImageSwitcher/styles.scss
index c997a5ff..ba53465b 100644
--- a/src/components/node/ImageSwitcher/styles.scss
+++ b/src/components/node/ImageSwitcher/styles.scss
@@ -18,12 +18,12 @@
     width: 30px;
     height: 30px;
     box-sizing: border-box;
-    opacity: .3;
     cursor: pointer;
-    transition: opacity 0.25s;
     display: flex;
     align-items: center;
     justify-content: center;
+    opacity: .5;
+    transition: opacity 0.25s;
 
     &:hover {
       opacity: 1;
@@ -38,5 +38,11 @@
       border-radius: 8px;
       box-shadow: inset white 0 0 0 2px;
     }
+
+    &:global(.is_active) {
+      &::after {
+        background: white;
+      }
+    }
   }
 }
diff --git a/src/containers/examples/ImageExample/index.tsx b/src/containers/examples/ImageExample/index.tsx
index 308fd984..5a39beed 100644
--- a/src/containers/examples/ImageExample/index.tsx
+++ b/src/containers/examples/ImageExample/index.tsx
@@ -15,7 +15,7 @@ interface IProps {}
 
 const ImageExample: FC<IProps> = () => (
   <Card className={styles.node} seamless>
-    <ImageSwitcher />
+    <ImageSwitcher total={5} current={2} />
 
     <div className={styles.image_container}>
       <img