/
SOFG1
/
generic
Обзор
Документация
Войти
/
SOFG1
/
generic
Код
Запросы
0
Задачи
Пакеты
0
Релизы
0
Аналитика
Безопасность
master
src/components/RelationsComponents/ChartLegendComponent.tsx
44 строки
976 B
Eddy
initial commit
22 июл 2024, 17:06
22 июл 2024, 17:06
a72fa2b
Код
Авторство
О чём код?
import React from "react"; import styled from "styled-components"; import { desktopBp } from "../../styles/variables"; const StyledWrapper = styled.div` display: flex; flex-wrap: wrap; gap: 5px 15px; margin-top: 3.13vw; margin-bottom: 5px; @media screen and (max-width: ${desktopBp}) { margin-top: 39px; } `; const StyledItem = styled.div` display: flex; align-items: center; gap: 5px; `; const StyledText = styled.p` margin: 0; ` const StyledPoint = styled.span<{color: string}>` height: 10px; width: 10px; border-radius: 50%; background-color: ${({color}) => color}; ` interface IProps { items: { color: string; id: number; tag: string }[]; } const ChartLegendComponent = React.memo(({ items }: IProps) => { return <StyledWrapper>{items.map(i => <StyledItem key={i.id}> <StyledPoint color={i.color} /> <StyledText>{i.tag}</StyledText> </StyledItem>)}</StyledWrapper>; }); export default ChartLegendComponent;