Merge pull request Techtonica#1907 from Techtonica/dependabot/npm_and…

…_yarn/projects/Template2023Projects/client/webpack-5.76.2

Adding one router rout

projects/2023TemplateWithVite/client/src/App.css

@@ -70,3 +70,7 @@ button.btn.btn-primary {
   margin-left: 2em;
   margin-right: 2em;
 }
+
+#contact{
+  padding: 5em;
+}

projects/2023TemplateWithVite/client/src/components/contact.jsx

@@ -0,0 +1,49 @@
+
+
+export default function Contact() {
+  const contact = {
+    first: "Cristina",
+    last: "Rodriguez",
+    avatar: "https://placekitten.com/g/200/200",
+    twitter: "yosola",
+    notes: "Some notes",
+    favorite: true,
+  };
+
+  return (
+    <div id="contact">
+      <div>
+        <img
+          key={contact.avatar}
+          src={contact.avatar || null}
+        />
+      </div>
+
+      <div>
+        <h1>
+          {contact.first || contact.last ? (
+            <>
+              {contact.first} {contact.last}
+            </>
+          ) : (
+            <i>No Name</i>
+          )}{" "}
+        </h1>
+
+        {contact.twitter && (
+          <p>
+            <a
+              target="_blank"
+              href={`https://twitter.com/${contact.twitter}`}
+            >
+              {contact.twitter}
+            </a>
+          </p>
+        )}
+
+        {contact.notes && <p>{contact.notes}</p>}
+
+        </div>
+        </div>
+        )
+    }

projects/2023TemplateWithVite/client/src/components/error-page.jsx

@@ -0,0 +1,16 @@
+import { useRouteError } from "react-router-dom";
+
+export default function ErrorPage() {
+  const error = useRouteError();
+  console.error(error);
+
+  return (
+    <div id="error-page">
+      <h1>Oops Techtonica template apologizes!!</h1>
+      <p>Sorry,  an unexpected error has occurred.</p>
+      <p>
+        <i>{error.statusText || error.message}</i>
+      </p>
+    </div>
+  );
+}