crowetic/commerce
1
0
Fork 1
mirror of https://github.com/vercel/commerce.git synced 2025-03-14 22:42:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Abstract Libs

Browse Source
This commit is contained in:
Belen Curcio 2020-10-16 12:29:04 -03:00
parent 3c9f6d4d05
commit 77b011474d
2 changed files with 20 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/core/Avatar/Avatar.tsx
View File

@ -1,27 +1,12 @@
import cn from 'classnames'
import { FC } from 'react'
import { random } from 'lodash'
import { useState } from 'react'
import { FC, useState } from 'react'
import { getRandomPairOfColors } from '@lib/colors'
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)
@ -32,8 +17,7 @@ const Avatar: FC<Props> = ({}) => {
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
}}
>
{/* Add an image - We're generating a gradient as placeholder
<img></img> */}
{/* Add an image - We're generating a gradient as placeholder <img></img> */}
</div>
)
}

16
lib/colors.ts Normal file
View File

@ -0,0 +1,16 @@
import { random } from 'lodash'
export 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]]
}