@nafr/echo-ui
Version:
A UI library born for WAA
33 lines (32 loc) • 1.4 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { forwardRef, useEffect, useMemo, useState } from 'react';
import { cn, convertColorToRGBA } from '../../../lib/utils';
import { useStyle } from './styles';
import { SIZE, COLOR } from './constants';
export const Light = forwardRef((props, ref) => {
const { on = false, size = SIZE, color = COLOR, className, style, ...restProps } = props;
const [onState, setOnState] = useState(on);
useEffect(() => {
setOnState(on);
}, [on]);
const glassColor = useMemo(() => convertColorToRGBA(color, 0.2), [color]);
const { base, glass } = useStyle();
return (_jsx("div", { ...restProps, ref: ref, className: cn(base(), className), style: {
...style,
backdropFilter: `blur(2px)`,
zIndex: 2,
width: size,
height: size,
borderRadius: '100%',
border: '2px solid var(--echo-border)',
backgroundColor: onState ? color : '',
boxShadow: onState
? `0 0 2px 2px ${color},
0 0 5px 2px ${color}`
: '',
}, children: _jsx("div", { className: cn(glass()), style: {
backgroundImage: `
radial-gradient(circle, ${glassColor} 10%, transparent 1%),
radial-gradient(circle, transparent 10%, ${glassColor} 1%)`,
} }) }));
});