components Tags.tsx

87.5% Statements 7/8

100% Branches 0/0

100% Functions 5/5

87.5% Lines 7/8

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38  
 
 
 
 
 
 
356x
 
 
 
1690x
 
 
 
 
 
1x
 
 
 
 
 
1x
1370x
 
 
 
 
 
1370x
1370x
 
 
 
 
 
  import { ReactElement } from "react";
import styled from "styled-components";
 
interface Props {
  tags: string[];
}
 
export const Tags = ({ tags }: Props): ReactElement => {
  return (
    <TagsContainer>
      {tags.map((tag) => (
        <TagElement key={tag}>{tag}</TagElement>
      ))}
    </TagsContainer>
  );
};
 
const TagsContainer = styled.div`
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
`;
 
const TagElement = styled.span`
  background-color: ${(props) => props.theme.backgroundTag};
  border-radius: 100px;
  align-items: center;
  text-align: center;
  padding: 5px 8px;
  margin-bottom: 4px;
  font-size: ${(props) => props.theme.fontSizeSmaller};
  color: ${(props) => props.theme.textTag};
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 256px;
`;