Merge pull request #199 from jasmeetsohal/different-colors-feature

add random bullet color in user's events list
This commit is contained in:
Bailey Pumfleet 2021-05-17 10:16:08 +01:00 committed by GitHub
commit 2d0b5709a1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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>
@ -80,3 +80,13 @@ export async function getServerSideProps(context) {
}, },
} }
} }
// Auxiliary methods
export function getRandomColorCode() {
let color = '#';
for (let idx = 0; idx < 6; idx++) {
color += Math.floor(Math.random() * 10);
}
return color;
}