changed image switcher appearance

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

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

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