From 1fe6533db5ddac239bed94352f22c814e5e2e597 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9CHenry-Hiles=E2=80=9D?= <“henry@henryhiles.com”>
Date: Mon, 14 Nov 2022 11:44:25 -0500
Subject: [PATCH] Add placeholder for actor image

---
 public/placeholder.svg      | 49 +++++++++++++++++++++++++++++++++++++
 src/pages/Movie.jsx         | 16 ++++++------
 src/styles/Movie.module.css |  4 +++
 3 files changed, 61 insertions(+), 8 deletions(-)
 create mode 100644 public/placeholder.svg

diff --git a/public/placeholder.svg b/public/placeholder.svg
new file mode 100644
index 0000000..31b9cfc
--- /dev/null
+++ b/public/placeholder.svg
@@ -0,0 +1,49 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="200"
+   height="300"
+   fill="currentColor"
+   class="bi bi-person-fill"
+   viewBox="0 0 200 300"
+   version="1.1"
+   id="svg4"
+   sodipodi:docname="placeholder.svg"
+   inkscape:version="1.2.1 (9c6d41e410, 2022-07-14)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs8" />
+  <sodipodi:namedview
+     id="namedview6"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="2.4058203"
+     inkscape:cx="209.28413"
+     inkscape:cy="148.18231"
+     inkscape:window-width="1920"
+     inkscape:window-height="1056"
+     inkscape:window-x="1920"
+     inkscape:window-y="24"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg4" />
+  <rect
+     style="fill:#f2f2f2;stroke:none;stroke-width:7.124;stroke-linecap:round;stroke-linejoin:round"
+     id="rect1623"
+     width="200"
+     height="300"
+     x="0"
+     y="0"
+     ry="0" />
+  <path
+     d="m 26.375518,234.2428 c 0,0 -14.724897,0 -14.724897,-14.7249 0,-14.72489 14.724897,-58.89958 88.349379,-58.89958 73.62448,0 88.34938,44.17469 88.34938,58.89958 0,14.7249 -14.7249,14.7249 -14.7249,14.7249 z M 100,145.89342 a 44.174691,44.174691 0 1 0 0,-88.349382 44.174691,44.174691 0 0 0 0,88.349382 z"
+     id="path2"
+     style="fill:#333333;stroke-width:14.7249" />
+</svg>
diff --git a/src/pages/Movie.jsx b/src/pages/Movie.jsx
index 73777cd..84448f9 100644
--- a/src/pages/Movie.jsx
+++ b/src/pages/Movie.jsx
@@ -132,14 +132,14 @@ const Movie = () => {
                                     to={`/actor/${actor.id}`}
                                     className={styles.Actor}
                                 >
-                                    {actor.profile_path ? (
-                                        <img
-                                            src={`https://image.tmdb.org/t/p/w200${actor.profile_path}`}
-                                            alt={actor.name}
-                                        />
-                                    ) : (
-                                        <p>Image Unavailable</p>
-                                    )}
+                                    <img
+                                        src={
+                                            actor.profile_path
+                                                ? `https://image.tmdb.org/t/p/w200${actor.profile_path}`
+                                                : "../placeholder.svg" //`https://ui-avatars.com/api/?name=${encodeURIComponent(actor.name)}&size=300`
+                                        }
+                                        alt={actor.name}
+                                    />
 
                                     <h3>{actor.name}</h3>
                                 </Link>
diff --git a/src/styles/Movie.module.css b/src/styles/Movie.module.css
index 4c384c3..e969ef2 100644
--- a/src/styles/Movie.module.css
+++ b/src/styles/Movie.module.css
@@ -90,6 +90,10 @@
     color: white;
 }
 
+.Actor img {
+    height: 300px;
+}
+
 .Actor:not(:hover) {
     text-decoration: none;
 }