Merge pull request #199 from jasmeetsohal/different-colors-feature
add random bullet color in user's events list
This commit is contained in:
commit
2d0b5709a1
1 changed files with 12 additions and 2 deletions
|
@ -8,7 +8,7 @@ export default function User(props) {
|
||||||
<li key={type.id}>
|
<li key={type.id}>
|
||||||
<Link href={'/' + props.user.username + '/' + type.slug}>
|
<Link href={'/' + props.user.username + '/' + type.slug}>
|
||||||
<a className="block px-6 py-4">
|
<a className="block px-6 py-4">
|
||||||
<div className="inline-block w-3 h-3 rounded-full bg-blue-600 mr-2"></div>
|
<div className="inline-block w-3 h-3 rounded-full mr-2" style={{backgroundColor:getRandomColorCode()}}></div>
|
||||||
<h2 className="inline-block font-medium">{type.title}</h2>
|
<h2 className="inline-block font-medium">{type.title}</h2>
|
||||||
<p className="inline-block text-gray-400 ml-2">{type.description}</p>
|
<p className="inline-block text-gray-400 ml-2">{type.description}</p>
|
||||||
</a>
|
</a>
|
||||||
|
@ -79,4 +79,14 @@ export async function getServerSideProps(context) {
|
||||||
eventTypes
|
eventTypes
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Auxiliary methods
|
||||||
|
|
||||||
|
export function getRandomColorCode() {
|
||||||
|
let color = '#';
|
||||||
|
for (let idx = 0; idx < 6; idx++) {
|
||||||
|
color += Math.floor(Math.random() * 10);
|
||||||
|
}
|
||||||
|
return color;
|
||||||
|
}
|
Loading…
Reference in a new issue