crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-06-30 02:11:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avatar background

Browse Source
This commit is contained in:
okbel 2021-02-04 12:33:59 -03:00
parent 573d274b13
commit 7bf4978ac8
1 changed files with 4 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
components/common/Avatar/Avatar.tsx
View File

@ -1,5 +1,5 @@
import { FC, useState, useMemo, useRef, useEffect } from 'react' import { FC, useRef, useEffect } from 'react'
import { getRandomPairOfColors } from '@lib/colors' import { useUserAvatar } from '@lib/hooks/useUserAvatar'
interface Props { interface Props {
className?: string className?: string
@ -7,18 +7,13 @@ interface Props {
} }
const Avatar: FC<Props> = ({}) => { const Avatar: FC<Props> = ({}) => {
const [bg] = useState(useMemo(() => getRandomPairOfColors, []))
let ref = useRef() as React.MutableRefObject<HTMLInputElement> let ref = useRef() as React.MutableRefObject<HTMLInputElement>
let { userAvatar } = useUserAvatar()
useEffect(() => {
if (ref && ref.current) {
ref.current.style.backgroundImage = `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`
}
}, [bg])
return ( return (
<div <div
ref={ref} ref={ref}
style={{ backgroundImage: userAvatar }}
className="inline-block h-8 w-8 rounded-full border-2 border-primary hover:border-secondary focus:border-secondary transition linear-out duration-150" 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> */} {/* Add an image - We're generating a gradient as placeholder <img></img> */}