forked from crowetic/commerce
954760865b
This reverts commit bf50965a39ef0b1b956461ebe62070809fbe1d63, reversing changes made to 0dad4ddedbf0bff2d0b5800ca469fda0073889ea.
30 lines
830 B
TypeScript
30 lines
830 B
TypeScript
import { FC, useState, useMemo, useRef, useEffect } from 'react'
|
|
import { getRandomPairOfColors } from '@lib/colors'
|
|
|
|
interface Props {
|
|
className?: string
|
|
children?: any
|
|
}
|
|
|
|
const Avatar: FC<Props> = ({}) => {
|
|
const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
|
|
let ref = useRef() as React.MutableRefObject<HTMLInputElement>
|
|
|
|
useEffect(() => {
|
|
if (ref && ref.current) {
|
|
ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
|
|
}
|
|
}, [bg])
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150"
|
|
>
|
|
{/* Add an image - We're generating a gradient as placeholder <img></img> */}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Avatar
|