@prezly/theme-kit-ui
Version:
UI components for Prezly themes
38 lines • 1.5 kB
JavaScript
/* eslint-disable jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */
import React, { useRef, useState } from 'react';
import { twMerge } from 'tailwind-merge';
import tinycolor from 'tinycolor2';
var DARKNESS_THRESHOLD = 180;
var BRIGHTNESS_THRESHOLD = 220;
export function ColorSwatch(_ref) {
var {
value,
hex
} = _ref;
var [notification, setNotification] = useState('');
var timeoutRef = useRef(null);
var color = tinycolor(hex);
var isDark = color.getBrightness() < DARKNESS_THRESHOLD;
var isBright = color.getBrightness() > BRIGHTNESS_THRESHOLD;
var borderColor = isBright ? color.clone().darken(5).toHexString() : undefined;
function handleValueClick() {
if (timeoutRef.current) {
clearTimeout(timeoutRef.current);
}
navigator.clipboard.writeText(hex);
setNotification('Value copied!');
timeoutRef.current = setTimeout(() => setNotification(''), 2000);
}
return /*#__PURE__*/React.createElement("div", {
className: "relative p-4 border-transparent border-[1px] rounded-lg",
style: {
backgroundColor: hex,
borderColor
}
}, /*#__PURE__*/React.createElement("p", {
className: twMerge('font-medium text-sm text-gray-800 opacity-50 uppercase m-0', isDark && 'text-white')
}, notification), /*#__PURE__*/React.createElement("p", {
className: twMerge('font-bold text-lg leading-7 text-gray-800 m-0', isDark && 'text-gray-50'),
onClick: handleValueClick
}, value));
}