Generateurv2/frontend/components/Tag.jsx
2022-05-18 10:15:54 +02:00

50 lines
1.6 KiB
JavaScript

import React from 'react';
import chroma from "chroma-js";
import styles from "../styles/exos/Tag.module.scss";
import { css, Global, keyframes } from "@emotion/react";
//import styled from "@emotion/styled";
export default function Tag({tag, onDelete}){
//console.log(ref, 'porpos')
const colorChrome = chroma(tag.color);
return (
<div
css={css`
background-color: ${colorChrome.alpha(0.1).css()};
border-radius: 4px;
color: ${colorChrome.css()};
display: flex;
box-sizing: border-box;
width: max-content;
padding-right: ${!onDelete ? '6px': "3px"}
`}
className={styles.tag}
>
<div className={styles["tag-label"]}>{tag.name}</div>
{onDelete && <div
className={styles["tag-remove"]}
css={css`
color: ${colorChrome.css()};
&:hover {
color: white;
background-color: ${colorChrome.css()};
}
`}
onClick={() => {
onDelete && onDelete(tag.id_code);
}}
>
<svg
height="14"
width="14"
viewBox="0 0 20 20"
aria-hidden="true"
focusable="false"
>
<path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
</svg>
</div>}
</div>
);
}