Name and links edit component (#84)

* Name And Links * Name And Links Edit Component * fixed hero snapshot * fixed hero snapshot * Edit reponsive * edit Name and Links component * Edit input in Name And Links Component * updated snapshot tests * updated failing tests Co-authored-by: Allan <[email protected]> Co-authored-by: allan <[email protected]>
ReCoded-Org · Nov 8, 2022 · b158dfb · b158dfb
1 parent 75f2562
commit b158dfb
Show file tree

Hide file tree

Showing 5 changed files with 139 additions and 4 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -57,10 +57,10 @@ const data = [
     id: 4,
   },
   {
-    position: "Web Developer fr",
-    salary: "2000$-3000$",
-    date: "10/10/2022",
-    fullTime: true,
+    position: 'Web Developer fr',
+    salary: '2000$-3000$',
+    date: '10/10/2022',
+    fullTime: true,              
     partTime: false,
     remote: true,
     id: 5,

diff --git a/src/components/NameAndLinks/--Test--/NameAndLinks.test.js b/src/components/NameAndLinks/--Test--/NameAndLinks.test.js
@@ -0,0 +1,8 @@
+import renderer from "react-test-renderer";
+import NameAndLinks from "../NameAndLinks";
+import React from "react";
+
+it("renders  NameAndLinks component correctly", () => {
+  const tree = renderer.create(<NameAndLinks />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/NameAndLinks/--Test--/__snapshots__/NameAndLinks.test.js.snap b/src/components/NameAndLinks/--Test--/__snapshots__/NameAndLinks.test.js.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders  NameAndLinks component correctly 1`] = `
+<div
+  className=""
+>
+  <div
+    className="  flex flex-row pt-6  pl-44  small:pl-10 "
+  >
+    <div
+      className="bg-black  pt-6 p-10  "
+    >
+      <img
+        alt=""
+        className="w-20 bg-blue-100"
+        src="https://i.pinimg.com/236x/44/ab/21/44ab21be0821eed03d0943dd5662def8.jpg"
+      />
+    </div>
+    <div
+      className=" flex flex-col   pt-6  "
+    >
+      <button
+        className="bg-dark-gray hover:bg-[#226086]  ml-8  mb-4 w-40 text-white font-bold py-2 px-4 rounded-full  "
+        type="button"
+      >
+        UPload Photo
+      </button>
+      <button
+        className="bg-transparent hover:bg-dark-gray w-40  ml-8 mb-4  text-[#154360] font-semibold hover:text-white py-2 px-4 border border-dark-gray hover:border-transparent rounded-full"
+        type="button"
+      >
+        Delete
+      </button>
+    </div>
+  </div>
+  <div
+    className="pt-32  pb-32 pl-44 small:pl-10 "
+  >
+    <h1
+      className="mb-4 text-4xl  text-dark-gray md:text-5xl lg:text-6x  pb-7 text-left"
+    >
+      Resume File
+    </h1>
+    <form>
+      <div
+        className="relative"
+      >
+        <div
+          className="flex absolute  items-center "
+        >
+          <input
+            className="  p-6 pl-44 pr-96   small:pl-24 small:pr-8  medium:pl-44  medium:pr-24  rounded-lg border border-gray-300 "
+            placeholder="No File Selected"
+            required={true}
+          />
+          <button
+            className="text-white absolute left-8 rounded-full bg-dark-gray small:w-20 small:left-3 small:px-1 w-32 hover:bg-[#226086] font-bold  px-4 py-2 "
+            type="button"
+          >
+            Choose
+          </button>
+        </div>
+      </div>
+    </form>
+  </div>
+</div>
+`;
diff --git a/src/components/NameAndLinks/NameAndLinks.js b/src/components/NameAndLinks/NameAndLinks.js
@@ -0,0 +1,56 @@
+import React from "react";
+
+const NameAndLinks = () => {
+  return (
+    <div className="">
+      <div className="  flex flex-row pt-6  pl-44  small:pl-10 ">
+        <div className="bg-black  pt-6 p-10  ">
+          <img
+            src="https://i.pinimg.com/236x/44/ab/21/44ab21be0821eed03d0943dd5662def8.jpg"
+            className="w-20 bg-blue-100"
+            alt=""
+          />
+        </div>
+        <div className=" flex flex-col   pt-6  ">
+          <button
+            type="button"
+            className="bg-dark-gray hover:bg-[#226086]  ml-8  mb-4 w-40 text-white font-bold py-2 px-4 rounded-full  "
+          >
+            UPload Photo
+          </button>
+          <button
+            type="button"
+            className="bg-transparent hover:bg-dark-gray w-40  ml-8 mb-4  text-[#154360] font-semibold hover:text-white py-2 px-4 border border-dark-gray hover:border-transparent rounded-full"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+      <div className="pt-32  pb-32 pl-44 small:pl-10 ">
+        <h1 className="mb-4 text-4xl  text-dark-gray md:text-5xl lg:text-6x  pb-7 text-left">
+          Resume File
+        </h1>
+
+        <form>
+          <div className="relative">
+            <div className="flex absolute  items-center ">
+              <input
+                className="  p-6 pl-44 pr-96   small:pl-24 small:pr-8  medium:pl-44  medium:pr-24  rounded-lg border border-gray-300 "
+                placeholder="No File Selected"
+                required
+              />
+              <button
+                type="button"
+                className="text-white absolute left-8 rounded-full bg-dark-gray small:w-20 small:left-3 small:px-1 w-32 hover:bg-[#226086] font-bold  px-4 py-2 "
+              >
+                Choose
+              </button>
+            </div>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default NameAndLinks;
diff --git a/yarn.lock b/yarn.lock
@@ -9657,7 +9657,11 @@ symbol-tree@^3.2.4:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+<<<<<<< HEAD
+tailwindcss@^3.0.2, tailwindcss@^3.1.8:
+=======
 tailwindcss@^3.0.2, tailwindcss@^3.2.1:
+>>>>>>> e22fe1c860f62d1caee9ec233fe33d559abd033a
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.2.tgz#705f78cec8f4de2feb52abdb7a8a056e67f2d736"
   integrity sha512-c2GtSdqg+harR4QeoTmex0Ngfg8IIHNeLQH5yr2B9uZbZR1Xt1rYbjWOWTcj3YLTZhrmZnPowoQDbSRFyZHQ5Q==