cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests 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 cn from 'classnames'
import { FC } from 'react' import { FC, useState } from 'react'
import { random } from 'lodash' import { getRandomPairOfColors } from '@lib/colors'
import { useState } from 'react'
interface Props { interface Props {
className?: string className?: string
children?: any 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 Avatar: FC<Props> = ({}) => {
const [bg] = useState(getRandomPairOfColors) const [bg] = useState(getRandomPairOfColors)
@ -32,8 +17,7 @@ const Avatar: FC<Props> = ({}) => {
backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`, backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
}} }}
> >
{/* Add an image - We're generating a gradient as placeholder {/* Add an image - We're generating a gradient as placeholder <img></img> */}
<img></img> */}
</div> </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]]
}