From 45b191c6bbc7e3d6e4511a3e87ef1e30abf16f65 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Wed, 14 Oct 2020 13:13:46 -0300
Subject: [PATCH] Avatar
---
components/core/Avatar/Avatar.module.css | 2 --
components/core/Avatar/Avatar.tsx | 29 +++++++++++++++++++-----
2 files changed, 23 insertions(+), 8 deletions(-)
delete mode 100644 components/core/Avatar/Avatar.module.css
diff --git a/components/core/Avatar/Avatar.module.css b/components/core/Avatar/Avatar.module.css
deleted file mode 100644
index c3a2af639..000000000
--- a/components/core/Avatar/Avatar.module.css
+++ /dev/null
@@ -1,2 +0,0 @@
-.root {
-}
diff --git a/components/core/Avatar/Avatar.tsx b/components/core/Avatar/Avatar.tsx
index 1575cd1d8..025a92068 100644
--- a/components/core/Avatar/Avatar.tsx
+++ b/components/core/Avatar/Avatar.tsx
@@ -1,22 +1,39 @@
import cn from 'classnames'
import { FC } from 'react'
-import s from './Avatar.module.css'
-
+import { random } from 'lodash'
+import { useState } from 'react'
interface Props {
className?: string
children?: any
}
-const Avatar: FC<Props> = ({ className }) => {
- const rootClassName = cn(s.root, className)
+function getRandomPairOfColors() {
+ const colors = ['#f33', '#7928ca', '#50e3c2', '#7928ca', '#7928CA']
+ 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 border-accent"
style={{
- backgroundImage: 'linear-gradient(160deg, #F9CB28, #FF4D4D 100%)',
+ backgroundImage: `linear-gradient(140deg, ${bg[0]}, ${bg[1]} 100%)`,
}}
>
- {/* <img></img> */}
+ {/* Add an image - We're generating a gradient as placeholder
+ <img></img> */}
</div>
)
}