Contact_skills (#91)

* Contact_skills * Update contact_skills_page.jsx 1: Removed Whitespaces 2: Making it responsive * deleted extra imports * added missing import * Responsive Fixed * Added Jest Snapshot Co-authored-by: Allan <[email protected]> Co-authored-by: allan <[email protected]>
ReCoded-Org · Nov 21, 2022 · a687ae3 · a687ae3
1 parent 92a53a2
commit a687ae3
Show file tree

Hide file tree

Showing 4 changed files with 8,248 additions and 8,426 deletions.
diff --git a/src/components/ProfileEdit/__tests__/__snapshots__/contact_skills_page_test.jsx.snap b/src/components/ProfileEdit/__tests__/__snapshots__/contact_skills_page_test.jsx.snap
@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly when there are no items 1`] = `
+<div>
+  <div
+    className="flex  flex-col h-96 bg-gray-200 content-start items-start "
+  >
+    <h2
+      className="text-4xl py-12 small:pl-10 px-60 "
+    >
+      Contact
+    </h2>
+    <div
+      className=" justify-start flex flex-wrap"
+    >
+      <div
+        className="flex small:pl-10 px-60 flex-col   w-80 items-start w-100 "
+      >
+        <h6
+          className="py-2"
+        >
+          Location
+        </h6>
+        <dt
+          className="pb-4 whitespace-nowrap"
+        />
+        <input
+          className="px-4 placeholder:text-xs  bg-gray-100 w-60 h-12 max-h-screen rounded-xl"
+          placeholder="E.g Duhok"
+        />
+      </div>
+      <div
+        className="flex small:pl-10 px-60 flex-col   w-80 items-start w-100 "
+      >
+        <h6
+          className="py-2"
+        >
+          Email
+        </h6>
+        <dt
+          className="pb-4 whitespace-nowrap"
+        />
+        <input
+          className="px-4 placeholder:text-xs  bg-gray-100 w-60 h-12 max-h-screen rounded-xl"
+          placeholder="E.g [email protected]"
+        />
+      </div>
+      <div
+        className="flex small:pl-10 px-60 flex-col   w-80 items-start w-100 "
+      >
+        <h6
+          className="py-2"
+        >
+          Phone
+        </h6>
+        <dt
+          className="pb-4 whitespace-nowrap"
+        />
+        <input
+          className="px-4 placeholder:text-xs  bg-gray-100 w-60 h-12 max-h-screen rounded-xl"
+          placeholder="+964 750 111 1111"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="flex flex-col h-96 py-10 bg-gray-200 content-start items-start"
+  >
+    <h2
+      className="text-4xl py-12 small:pl-10 px-60 "
+    >
+      Social
+    </h2>
+    <div
+      className=" justify-start flex  flex-wrap "
+    >
+      <div
+        className="flex small:pl-10 px-60 flex-col   w-80 items-start w-100 "
+      >
+        <h6
+          className="py-2"
+        >
+          Linkedin
+        </h6>
+        <dt
+          className="pb-4 whitespace-nowrap"
+        />
+        <input
+          className="px-4 placeholder:text-xs  bg-gray-100 w-60 h-12 max-h-screen rounded-xl"
+          placeholder="Linkedin"
+        />
+      </div>
+      <div
+        className="flex small:pl-10 px-60 flex-col   w-80 items-start w-100 "
+      >
+        <h6
+          className="py-2"
+        >
+          Github
+        </h6>
+        <dt
+          className="pb-4 whitespace-nowrap"
+        />
+        <input
+          className="px-4 placeholder:text-xs  bg-gray-100 w-60 h-12 max-h-screen rounded-xl"
+          placeholder="Github"
+        />
+      </div>
+      <div
+        className="flex small:pl-10 px-60 flex-col   w-80 items-start w-100 "
+      >
+        <h6
+          className="py-2"
+        >
+          Facebook
+        </h6>
+        <dt
+          className="pb-4 whitespace-nowrap"
+        />
+        <input
+          className="px-4 placeholder:text-xs  bg-gray-100 w-60 h-12 max-h-screen rounded-xl"
+          placeholder="Facebook"
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    className="flex flex-col h-96 py-24 bg-gray-200 content-start items-start"
+  >
+    <h2
+      className="text-4xl py-12 small:pl-10 px-60 "
+    >
+      Skills
+    </h2>
+    <div
+      className=" justify-start flex flex-wrap  "
+    >
+      <div
+        className="flex small:pl-10 px-60 flex-col   w-80 items-start w-100 "
+      >
+        <h6
+          className="py-2"
+        >
+          Skills
+        </h6>
+        <dt
+          className="pb-4 whitespace-nowrap"
+        >
+          Add skills as commas perated values.
+        </dt>
+        <input
+          className="px-4 placeholder:text-xs  bg-gray-100 w-60 h-12 max-h-screen rounded-xl"
+          placeholder="Skills"
+        />
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/ProfileEdit/__tests__/contact_skills_page_test.jsx b/src/components/ProfileEdit/__tests__/contact_skills_page_test.jsx
@@ -0,0 +1,8 @@
+import React from "react";
+import renderer from "react-test-renderer";
+import ContactSkills from "../contact_skills_page";
+
+it("renders correctly when there are no items", () => {
+  const tree = renderer.create(<ContactSkills />).toJSON();
+  expect(tree).toMatchSnapshot();
+});
diff --git a/src/components/ProfileEdit/contact_skills_page.jsx b/src/components/ProfileEdit/contact_skills_page.jsx
@@ -0,0 +1,68 @@
+function formComponent({ props }) {
+  return (
+    <div className="flex small:pl-10 px-60 flex-col   w-80 items-start w-100 ">
+      <h6 className="py-2">{props.name}</h6>
+      {props.desc != null}
+      <dt className="pb-4 whitespace-nowrap">{props.desc}</dt>
+      <input
+        placeholder={props.hint}
+        className="px-4 placeholder:text-xs  bg-gray-100 w-60 h-12 max-h-screen rounded-xl"
+      />
+    </div>
+  );
+}
+function SocialSection({ props }) {
+  return (
+    <div className="flex flex-col h-96 py-10 bg-gray-200 content-start items-start">
+      <h2 className="text-4xl py-12 small:pl-10 px-60 ">{props.name}</h2>
+      <div className=" justify-start flex  flex-wrap ">
+        {formComponent({ props: { hint: "Linkedin", name: "Linkedin" } })}
+        {formComponent({ props: { hint: "Github", name: "Github" } })}
+        {formComponent({ props: { hint: "Facebook", name: "Facebook" } })}
+      </div>
+    </div>
+  );
+}
+
+function ContactSection({ props }) {
+  return (
+    <div className="flex  flex-col h-96 bg-gray-200 content-start items-start ">
+      <h2 className="text-4xl py-12 small:pl-10 px-60 ">{props.name}</h2>
+      <div className=" justify-start flex flex-wrap">
+        {formComponent({ props: { hint: "E.g Duhok", name: "Location" } })}
+        {formComponent({
+          props: { hint: "E.g [email protected]", name: "Email" },
+        })}
+        {formComponent({ props: { hint: "+964 750 111 1111", name: "Phone" } })}
+      </div>
+    </div>
+  );
+}
+function SkillsSection({ props }) {
+  return (
+    <div className="flex flex-col h-96 py-24 bg-gray-200 content-start items-start">
+      <h2 className="text-4xl py-12 small:pl-10 px-60 ">{props.name}</h2>
+      <div className=" justify-start flex flex-wrap  ">
+        {formComponent({
+          props: {
+            hint: "Skills",
+            name: "Skills",
+            desc: "Add skills as commas perated values.",
+          },
+        })}
+      </div>
+    </div>
+  );
+}
+
+function ContactSkills() {
+  return (
+    <div>
+      {ContactSection({ props: { name: "Contact" } })}
+      {SocialSection({ props: { name: "Social" } })}
+      {SkillsSection({ props: { name: "Skills" } })}
+    </div>
+  );
+}
+
+export default ContactSkills;