forked from crowetic/commerce
Abstract Libs
This commit is contained in:
parent
3c9f6d4d05
commit
77b011474d
@ -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
16
lib/colors.ts
Normal 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]]
|
||||||
|
}
|
Loading…
x
Reference in New Issue
Block a user