diff --git a/src/components/lab/LabHead/index.tsx b/src/components/lab/LabHead/index.tsx index 0427b758..40d1a908 100644 --- a/src/components/lab/LabHead/index.tsx +++ b/src/components/lab/LabHead/index.tsx @@ -1,32 +1,17 @@ import React, { FC } from 'react'; -import { Group } from '~/components/containers/Group'; -import { Card } from '~/components/containers/Card'; -import { Placeholder } from '~/components/placeholders/Placeholder'; -import { Filler } from '~/components/containers/Filler'; import styles from './styles.module.scss'; -import { Grid } from '~/components/containers/Grid'; +import { LabHeadItem } from '~/components/lab/LabHeadItem'; interface IProps {} const LabHead: FC = () => (
- - - - - - - - - - - - - - - - + + Свежие + + Популярные + Важные
); diff --git a/src/components/lab/LabHead/styles.module.scss b/src/components/lab/LabHead/styles.module.scss index 98f82210..0848772f 100644 --- a/src/components/lab/LabHead/styles.module.scss +++ b/src/components/lab/LabHead/styles.module.scss @@ -5,7 +5,7 @@ border-radius: $radius; background-color: $content_bg; - padding: $gap; + padding: $gap / 2; } .group { @@ -13,6 +13,8 @@ @include tablet { flex-wrap: wrap; + align-items: center; + justify-content: center; } & > * { diff --git a/src/components/lab/LabHeadItem/index.tsx b/src/components/lab/LabHeadItem/index.tsx new file mode 100644 index 00000000..b4f51583 --- /dev/null +++ b/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 = ({ icon, children, isLoading, active }) => { + if (isLoading) { + return ( + + + + + ); + } + + return ( + + + {children} + + ); +}; + +export { LabHeadItem }; diff --git a/src/components/lab/LabHeadItem/styles.module.scss b/src/components/lab/LabHeadItem/styles.module.scss new file mode 100644 index 00000000..1967bb0b --- /dev/null +++ b/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; +} diff --git a/src/components/node/NodePanelInner/styles.module.scss b/src/components/node/NodePanelInner/styles.module.scss index c9b9a94b..e1d3764f 100644 --- a/src/components/node/NodePanelInner/styles.module.scss +++ b/src/components/node/NodePanelInner/styles.module.scss @@ -215,6 +215,7 @@ transition: fill, stroke 0.25s; will-change: transform; position: relative; + flex: 0 0 32px; &:global(.is_liked) { svg { diff --git a/src/sprites/Sprites.tsx b/src/sprites/Sprites.tsx index f822d726..ee678362 100644 --- a/src/sprites/Sprites.tsx +++ b/src/sprites/Sprites.tsx @@ -283,6 +283,22 @@ const Sprites: FC<{}> = () => ( transform="scale(0.011) translate(120, 120)" /> + + + + + + + + + + );