#23 added lab tabs

src/components/lab/LabHeadItem/index.tsx

@@ -0,0 +1,32 @@
+import React, { FC } from 'react';
+import { Group } from '~/components/containers/Group';
+import { Icon } from '~/components/input/Icon';
+import { Placeholder } from '~/components/placeholders/Placeholder';
+import styles from './styles.module.scss';
+import classNames from 'classnames';
+
+interface IProps {
+  icon: string;
+  isLoading?: boolean;
+  active?: boolean;
+}
+
+const LabHeadItem: FC<IProps> = ({ icon, children, isLoading, active }) => {
+  if (isLoading) {
+    return (
+      <Group horizontal className={styles.item}>
+        <Placeholder width="32px" height={32} />
+        <Placeholder width="96px" height={18} />
+      </Group>
+    );
+  }
+
+  return (
+    <Group horizontal className={classNames(styles.item, { [styles.active]: active })}>
+      <Icon icon={icon} size={24} />
+      <span className={styles.text}>{children}</span>
+    </Group>
+  );
+};
+
+export { LabHeadItem };

src/components/lab/LabHeadItem/styles.module.scss

@@ -0,0 +1,26 @@
+@import "~/styles/variables.scss";
+
+.item {
+  flex: 0 0 auto;
+  padding: $gap / 2;
+  fill: currentColor;
+  color: darken(white, 50%);
+  transition: color 0.25s;
+  cursor: pointer;
+
+  &:hover {
+    color: white;
+  }
+
+  &.active {
+    color: $blue;
+
+    &:hover {
+      color: lighten($blue, 4%);
+    }
+  }
+}
+
+.text {
+  font: $font_16_semibold;
+}