added hoverable hints

src/components/common/Hoverable/index.tsx

@@ -0,0 +1,30 @@
+import React, { FC, ReactNode } from 'react';
+
+import classNames from 'classnames';
+
+import { DivProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface HoverableProps extends DivProps {
+  icon?: ReactNode;
+}
+
+const Hoverable: FC<HoverableProps> = ({
+  children,
+  className,
+  icon,
+  ...rest
+}) => (
+  <div
+    {...rest}
+    className={classNames(styles.hoverable, className, {
+      [styles.with_icon]: !!icon,
+    })}
+  >
+    {icon && <div className={styles.icon}>{icon}</div>}
+    {children}
+  </div>
+);
+
+export { Hoverable };

src/components/common/Hoverable/styles.module.scss

@@ -0,0 +1,43 @@
+@import 'src/styles/variables';
+
+.hoverable {
+  position: relative;
+  cursor: pointer;
+
+  &::after {
+    content: ' ';
+    position: absolute;
+    inset: 0;
+    border-radius: $radius;
+    opacity: 0;
+    transition: all 100ms;
+    box-shadow: inset $color_primary 0 0 0 2px;
+    touch-action: none;
+    pointer-events: none;
+  }
+
+  &.with_icon::after {
+    background: linear-gradient(325deg, $color_primary 20px, transparent 100px);
+  }
+
+  &:hover {
+    z-index: 10;
+    transition: all 100ms;
+
+    &::after {
+      opacity: 1;
+    }
+  }
+}
+
+.icon {
+  position: absolute;
+  bottom: 4px;
+  right: 4px;
+  z-index: 2;
+  opacity: 0;
+
+  .hoverable:hover & {
+    opacity: 1;
+  }
+}