diff --git a/src/app/globals.css b/src/app/globals.css
index e0a597c..40dff82 100644
--- a/src/app/globals.css
+++ b/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;
}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index f151b79..9689e81 100644
--- a/src/app/page.tsx
+++ b/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 (
-
+ <>
+
+
+
)
}
diff --git a/src/components/atoms/InputForm/index.tsx b/src/components/atoms/InputForm/index.tsx
index 4b666c7..cb69a44 100644
--- a/src/components/atoms/InputForm/index.tsx
+++ b/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 (
-
-
-
-
- )
-}
\ No newline at end of file
+export default function InputForm({
+ id,
+ name,
+ type,
+ placeholder,
+ label,
+ width,
+ height,
+ options,
+
+}: InputFormProps) {
+ return (
+
+
+ );
+}
diff --git a/src/components/atoms/InputForm/style.ts b/src/components/atoms/InputForm/style.ts
index a56dd36..1e22c3b 100644
--- a/src/components/atoms/InputForm/style.ts
+++ b/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;
`;
\ No newline at end of file
diff --git a/src/components/molecules/JobPostingForm/index.tsx b/src/components/molecules/JobPostingForm/index.tsx
index 04caea4..cdfed66 100644
--- a/src/components/molecules/JobPostingForm/index.tsx
+++ b/src/components/molecules/JobPostingForm/index.tsx
@@ -1,148 +1,148 @@
-'use client'
+"use client";
-import { Formik, Form, Field } from 'formik'
-import InputForm from '../../atoms/InputForm/index'
-import { ContainerForm , ContainerTitle } from './style'
+import { Formik, Form, Field } from "formik";
+import InputForm from "../../atoms/InputForm/index";
+import { ContainerForm, ContainerTitle } from "./style";
export default function JobPostingForm() {
- return (
-
-
- Vaga
-
+ return (
+
+ Vaga
- {
- alert(JSON.stringify(values, null, 2));
- actions.setSubmitting(false)
- }}
- >
-
- )
-}
\ No newline at end of file
+
+
+
+
+ );
+}
diff --git a/src/components/molecules/JobPostingForm/style.ts b/src/components/molecules/JobPostingForm/style.ts
index 99c9636..831d4a0 100644
--- a/src/components/molecules/JobPostingForm/style.ts
+++ b/src/components/molecules/JobPostingForm/style.ts
@@ -4,9 +4,9 @@ export const ContainerForm = styled.div`
border-radius: 20px;
background: #0C2240;
width: 773px;
- height: 651px;
flex-shrink: 0;
- padding: 60px 50px
+ padding: 60px 50px;
+ margin-bottom: 50px;
`
export const ContainerTitle = styled.h3`
diff --git a/src/components/molecules/JobPostingForm2/resumo.tsx b/src/components/molecules/JobPostingForm2/resumo.tsx
new file mode 100644
index 0000000..0ed7473
--- /dev/null
+++ b/src/components/molecules/JobPostingForm2/resumo.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { Formik, Form, Field } from "formik";
+import InputForm from "../../atoms/InputForm/index";
+import { ContainerForm, ContainerTitle } from "../JobPostingForm/style";
+
+export default function JobPostingForm() {
+ const options = [
+ { value: "linkedin", label: "LinkedIn" },
+ { value: "instagram", label: "Instagram" },
+ { value: "facebook", label: "Facebook" },
+ ];
+ return (
+
+ Resumo da vaga
+
+ {
+ alert(JSON.stringify(values, null, 2));
+ actions.setSubmitting(false);
+ }}
+ >
+
+
+
+ );
+}