Figma

Tile

import { Tile } from '@megafon/ui-core';
"Код DemoTileWrapper"
export const DemoTileWrapper = (props: {
    wrapperTheme: 'light' | 'dark',
    children: React.ReactNode,
}) => {
    const { wrapperTheme = 'light', children } = props;
    const theme = wrapperTheme === 'dark' ? darkWrapperStyle : lightWrapperStyle;


    return <div style={theme}>{children}</div>;
};
"Код tileInner"
const tileInner = {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    padding: '15px',
    height: '100%',
    boxSizing: 'border-box',
    width: '50px',
    margin: '0 auto',
};

Формы

<DemoTileWrapper>
      <Tile shadowLevel="default">
          <div style={tileInner}>Квадратная плитка</div>
      </Tile>
      <Tile radius="rounded" shadowLevel="default">
          <div style={tileInner}>Округлая плитка</div>
      </Tile>
  </DemoTileWrapper>

Тени

<DemoTileWrapper>
      <Tile shadowLevel="zero">
          <div style={tileInner}>Zero</div>
      </Tile>
      <Tile shadowLevel="default">
          <div style={tileInner}>Default</div>
      </Tile>
      <Tile shadowLevel="hover">
          <div style={tileInner}>Hover</div>
      </Tile>
      <Tile shadowLevel="pressed">
          <div style={tileInner}>Pressed</div>
      </Tile>
  </DemoTileWrapper>

Тень при наведении

<DemoTileWrapper>
      <Tile isInteractive shadowLevel="zero">
          <div style={tileInner}>Zero</div>
      </Tile>
      <Tile isInteractive shadowLevel="default">
          <div style={tileInner}>Default</div>
      </Tile>
      <Tile isInteractive shadowLevel="hover">
          <div style={tileInner}>Hover</div>
      </Tile>
      <Tile isInteractive shadowLevel="pressed">
          <div style={tileInner}>Pressed</div>
      </Tile>
  </DemoTileWrapper>

Цветовой фон

Светлый

<DemoTileWrapper>
      <Tile shadowLevel="zero" theme="light">
          <div style={tileInner}>Zero shadow</div>
      </Tile>
      <Tile shadowLevel="default" theme="light">
          <div style={tileInner}>Default shadow</div>
      </Tile>
      <Tile shadowLevel="hover" theme="light">
          <div style={tileInner}>Hover shadow</div>
      </Tile>
      <Tile shadowLevel="pressed" theme="light">
          <div style={tileInner}>Pressed shadow</div>
      </Tile>
  </DemoTileWrapper>
  <DemoTileWrapper>
      <Tile radius="rounded" shadowLevel="zero" theme="light">
          <div style={tileInner}>Zero shadow</div>
      </Tile>
      <Tile radius="rounded" shadowLevel="default" theme="light">
          <div style={tileInner}>Default shadow</div>
      </Tile>
      <Tile radius="rounded" shadowLevel="hover" theme="light">
          <div style={tileInner}>Hover shadow</div>
      </Tile>
      <Tile radius="rounded" shadowLevel="pressed" theme="light">
          <div style={tileInner}>Pressed shadow</div>
      </Tile>
  </DemoTileWrapper>

Тёмный

Тень плитки более прозрачная

<DemoTileWrapper wrapperTheme="dark">
      <Tile shadowLevel="zero" theme="dark">
          <div style={tileInnerWhite}>Zero shadow</div>
      </Tile>
      <Tile shadowLevel="default" theme="dark">
          <div style={tileInnerWhite}>Default shadow</div>
      </Tile>
      <Tile shadowLevel="hover" theme="dark">
          <div style={tileInnerWhite}>Hover shadow</div>
      </Tile>
      <Tile shadowLevel="pressed" theme="dark">
          <div style={tileInnerWhite}>Pressed shadow</div>
      </Tile>
  </DemoTileWrapper>
  <DemoTileWrapper wrapperTheme="dark">
      <Tile radius="rounded" shadowLevel="zero">
          <div style={tileInnerWhiteRounded}>Zero shadow</div>
      </Tile>
      <Tile radius="rounded" shadowLevel="default">
          <div style={tileInnerWhiteRounded}>Default shadow</div>
      </Tile>
      <Tile radius="rounded" shadowLevel="hover">
          <div style={tileInnerWhiteRounded}>Hover shadow</div>
      </Tile>
      <Tile radius="rounded" shadowLevel="pressed">
          <div style={tileInnerWhiteRounded}>Pressed shadow</div>
      </Tile>
  </DemoTileWrapper>

Ссылка

<DemoTileWrapper>
      <div style={{ width: '350px' }}>
          <Tile shadowLevel="pressed" href="#">
              <div style={tileInner}>Ссылка</div>
          </Tile>
      </div>
  </DemoTileWrapper>