- designing the dashboard

- resume preview
- create resume modal

src/components/shared/Input.js

@@ -0,0 +1,32 @@
+import React from "react";
+import { v4 as uuidv4 } from "uuid";
+import styles from "./Input.module.css";
+
+const Input = ({
+  label,
+  name,
+  value,
+  onChange,
+  placeholder,
+  type = "text",
+}) => {
+  const uuid = uuidv4();
+
+  return (
+    <div className={styles.container}>
+      <label htmlFor={uuid}>
+        <span>{label}</span>
+        <input
+          id={uuid}
+          name={name}
+          type={type}
+          value={value}
+          onChange={onChange}
+          placeholder={placeholder}
+        />
+      </label>
+    </div>
+  );
+};
+
+export default Input;

src/components/shared/Input.module.css

@@ -0,0 +1,15 @@
+.container > label {
+  @apply flex flex-col;
+}
+
+.container > label > span {
+  @apply mb-1 text-gray-600 font-medium text-sm uppercase;
+}
+
+.container > label > input {
+  @apply py-4 px-4 rounded bg-gray-200 border border-gray-200;
+}
+
+.container > label > input:focus {
+  @apply outline-none border-gray-500;
+}

src/components/shared/Logo.js

@@ -2,7 +2,7 @@ import React from "react";
 import { useStaticQuery, graphql } from "gatsby";
 import GatsbyImage from "gatsby-image";
 
-const Logo = ({ size = "256px" }) => {
+const Logo = ({ size = "256px", className }) => {
   const { file } = useStaticQuery(graphql`
     query {
       file(relativePath: { eq: "logo.png" }) {
@@ -18,7 +18,7 @@ const Logo = ({ size = "256px" }) => {
   return (
     <GatsbyImage
       loading="eager"
-      className="shadow-md rounded"
+      className={`rounded ${className}`}
       style={{ width: size, height: size }}
       fluid={file.childImageSharp.fluid}
     />