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 (
-
-
-
-
{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 (
+
+
+
-
- );
+ );
+ }
}
-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
zcmbVw2UJsA)Ak9)2vS5qIw(yMklqxCs5B7)=`~cPBTbN!;6((HA|eQgfb<@E?@|S%
zg9NDol@ds(0aCtr?|tuk*ZSAD*0=u2+2_pJYwvyLnLT@EGNf;$W#Ef?pvxlw(A5R5
z0RV6oI0L!>P?9+i`3HbF0qQ?_05Ab@{lnXUuKqoS0sttO|2sa?1)%zSJbBGON$c
uAai{hUZ`?Dzj%jcf?d(597`F$hJ
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