50 lines
1.6 KiB
React
50 lines
1.6 KiB
React
|
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>
|
||
|
|
);
|
||
|
|
}
|