Merge pull request #3 from clubedevit/Resumodavaga

Resumo da vaga

src/app/globals.css

@@ -12,12 +12,14 @@
   margin: 0;
 }
 
-html,
+
 body {
   max-width: 100vw;
   overflow-x: hidden;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   height: 100%;
+  padding: 20px;
 }

src/app/page.tsx

@@ -1,9 +1,13 @@
 import JobPostingForm from '../components/molecules/JobPostingForm/index'
+import JobPostingForm2 from '../components/molecules/JobPostingForm2/resumo'
 
 export default function Home() {
   return (
-
+    <>
+    <JobPostingForm2></JobPostingForm2>
     <JobPostingForm></JobPostingForm>
 
+    </>
+
   )
 }

src/components/atoms/InputForm/index.tsx

@@ -1,42 +1,44 @@
-import { Label } from './label';
-import { ContainerInput , Field } from './style'
+import { Label } from "./label";
+import { ContainerInput, Field } from "./style";
 
 interface InputFormProps {
-    id: string;
-    name: string;
-    type: string;
-    placeholder: string;
-    label: string;
-    width: string;
-    height?: number
+  id: string;
+  name: string;
+  type: string;
+  placeholder: string;
+  label: string;
+  width?: string;
+  height?: number;
+  options?: string[];
 }
 
-export default function InputForm
-({
-    id,
-    name,
-    type,
-    placeholder,
-    label,
-    width,
-    height
-} : InputFormProps) 
-
-{
-    return (
-        <ContainerInput>
-            <Label 
-                htmlFor={id} 
-                name={label} 
-            />
-            <Field 
-                id={id}
-                name={name}
-                type={type}
-                placeholder={placeholder}
-                width={width}
-                height={height}
-            />
-        </ContainerInput>
-    )
-}
+export default function InputForm({
+  id,
+  name,
+  type,
+  placeholder,
+  label,
+  width,
+  height,
+  options,
+
+}: InputFormProps) {
+  return (
+    <ContainerInput>
+      <Label htmlFor={id} name={label}/>
+      <Field
+        id={id}
+        name={name}
+        type={type}
+        placeholder={placeholder}
+        width={width}
+        height={height}
+        as={options ? "select" : "input"}
+      >
+        {options?.map((option) => (
+            <option key={option} value={option}>{option}</option>
+        ))}
+      </Field>
+    </ContainerInput>
+  );
+}

src/components/atoms/InputForm/style.ts

@@ -12,7 +12,7 @@ export const Field = styled(FieldComponent)`
     border-radius: 12px;
     border: 1px solid #FFF;
     background: #DEDEDE;
-    padding: 10px 10px;
+    padding: 10px;
     margin-top: 3px;
     margin-bottom: 15px;
 
@@ -29,9 +29,11 @@ export const Field = styled(FieldComponent)`
 export const StyledLabel = styled.label`
     font-size: 12px;
   color: #FFF;
-  margin-left: 5px
+  margin-left: 5px;
+  height: 15px;
 `;
 
 export const StyledLabelError = styled(StyledLabel)`
     margin-left: 5px
+    height: 15px;
 `;