mirror of
https://github.com/vercel/commerce.git
synced 2025-03-27 15:55:54 +00:00
42 lines
980 B
TypeScript
42 lines
980 B
TypeScript
import cn from 'classnames'
|
|
import { FC } from 'react'
|
|
import { random } from 'lodash'
|
|
import { useState } from 'react'
|
|
interface Props {
|
|
className?: string
|
|
children?: any
|
|
}
|
|
|
|
function getRandomPairOfColors() {
|
|
const colors = ['#37B679', '#DA3C3C', '#3291FF', '#7928CA', '#79FFE1']
|
|
const getRandomIdx = () => random(0, colors.length - 1)
|
|
let idx = getRandomIdx()
|
|
let idx2 = getRandomIdx()
|
|
|
|
// Has to be a different color
|
|
while (idx2 === idx) {
|
|
idx2 = getRandomIdx()
|
|
}
|
|
|
|
// Returns a pair of colors
|
|
return [colors[idx], colors[idx2]]
|
|
}
|
|
|
|
const Avatar: FC<Props> = ({}) => {
|
|
const [bg] = useState(getRandomPairOfColors)
|
|
|
|
return (
|
|
<div
|
|
className="inline-block h-8 w-8 rounded-full border-2 border-accents-2"
|
|
style={{
|
|
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
|
|
}}
|
|
>
|
|
{/* Add an image - We're generating a gradient as placeholder
|
|
<img></img> */}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Avatar
|