From 8f5b94db154aa9f6b2de1a7cff6b55505d04aa01 Mon Sep 17 00:00:00 2001 From: Devin McDaniel <111747269+dmcdaniel90@users.noreply.github.com> Date: Fri, 8 Dec 2023 13:29:57 +0000 Subject: [PATCH] Add robot placeholder image --- .gitignore | 1 + package-lock.json | 1 - src/components/Card.js | 43 ++++++++++++++++++++++++++++--------- src/images/placeholder.jpg | Bin 0 -> 7890 bytes 4 files changed, 34 insertions(+), 11 deletions(-) create mode 100644 src/images/placeholder.jpg diff --git a/.gitignore b/.gitignore index 1fafdf883..5abb2873b 100644 --- a/.gitignore +++ b/.gitignore @@ -16,6 +16,7 @@ .env.development.local .env.test.local .env.production.local +.vscode npm-debug.log* yarn-debug.log* diff --git a/package-lock.json b/package-lock.json index 606e392aa..5e6af8131 100644 --- a/package-lock.json +++ b/package-lock.json @@ -27814,4 +27814,3 @@ } } } - diff --git a/src/components/Card.js b/src/components/Card.js index 499990f3f..1f715d264 100644 --- a/src/components/Card.js +++ b/src/components/Card.js @@ -1,15 +1,38 @@ import React from 'react'; +import placeholder from '../images/placeholder.jpg'; -const Card = ({ name, email, id }) => { - return ( -
- robots -
-

{name}

-

{email}

+class Card extends React.Component { + constructor(props) { + super(props); + this.state = { + hasImageLoaded: false + }; + } + + setImageLoaded = () => { + this.setState({ hasImageLoaded: true }); + } + + render() { + const { name, email, id } = this.props; + const robotImageUrl = `https://robohash.org/${id}?size=200x200`; + + const { hasImageLoaded } = this.state; + + return ( +
+ robots +
+

{name}

+

{email}

+
-
- ); + ); + } } -export default Card; +export default Card; \ No newline at end of file diff --git a/src/images/placeholder.jpg b/src/images/placeholder.jpg new file mode 100644 index 0000000000000000000000000000000000000000..d055f0594c772bebac4cab6489ac18e23e15fbec GIT binary patch literal 7890 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