src/driven/boundaries/http-boundary/httpBoundary.ts

@@ -1,5 +1,5 @@
 import axios, { AxiosRequestConfig } from 'axios';
-import { staticMessages } from '~/driven/utils/configs/staticMessages';
+import { staticMessages } from '~/driven/utils/constants/staticMessages';
 
 export class HTTPBoundary {
   async request<R>(options: AxiosRequestConfig) {

src/driven/utils/components/inputs/simple-input/SimpleInput.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface ISimpleInput {
+  title: string;
+  className?: string;
+}
+
+export default function SimpleInput(props: ISimpleInput) {
+  const { title, className } = props;
+  return (
+    <div className={`flex flex-col ${className}`}>
+      <label className='mb-1 text-txt-second text-xs' htmlFor={title}>{ title }</label>
+      <input className='bg-bg-gray h-11 rounded-lg focus:outline-0 px-2 text-txt-medium' id={title} />
+    </div>
+  )
+}

src/driven/utils/constants/staticMessages.ts

@@ -12,7 +12,8 @@ export const staticMessages = {
     status: 'Status',
     address: 'Address',
     qrCode: 'qrCode',
-    createUser: 'Create user'
+    createUser: 'Create user',
+    phoneNumber: 'Phone Number'
   },
   service: {
     errors: {

src/driven/utils/protocols/serviceProtocols.ts

@@ -1 +1,9 @@
 export type RequestMethods = 'get' | 'post' | 'put' | 'delete';
+
+export type apiGlobalResponseObject<DataType> = {
+  type: 'Success' | 'client Error' | string;
+  status: 200 | 400 | 401 | 500 | number;
+  message: string;
+  description: string;
+  data: DataType;
+} 

src/driving/application/core/create-user/index.tsx

@@ -0,0 +1,3 @@
+import CreateUser from "./infra/CreateUser";
+
+export default CreateUser;

src/driving/application/core/create-user/infra/CreateUser.tsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import CreateUserView from '../view/CreateUserView'
+
+export default function CreateUser() {
+  return <CreateUserView />
+}

src/driving/application/core/create-user/view/CreateUserView.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+import PrimaryButton from '~/driven/utils/components/buttons/primary-button/PrimaryButton'
+import SimpleInput from '~/driven/utils/components/inputs/simple-input/SimpleInput'
+import { staticMessages } from '~/driven/utils/constants/staticMessages'
+
+export default function CreateUserView() {
+  return (
+    <div className='px-4 my-8'>
+      <div className='flex flex-wrap w-full gap-4'>
+        <SimpleInput title={staticMessages.global.fistname} className='mb-4 w-[48%]' />
+        <SimpleInput title={staticMessages.global.lastname} className='mb-4 w-[48%]'/>
+        <SimpleInput title={staticMessages.global.phoneNumber} className='mb-4 w-[48%]'/>
+      </div>
+      <div className='flex'>
+        <PrimaryButton onClick={() => {}} title={staticMessages.global.submit} />
+      </div>
+    </div>
+  )
+}

src/driving/application/support/sidebar/view/Sidebar.tsx

@@ -8,7 +8,6 @@ export default function Sidebar() {
 
   const pages = Object.keys(routesData).map(routeKey => {
     const key = routeKey as keyof typeof routesData
-    console.log(routesData[key].title)
     return (
     <Link key={key} to={routesData[key].path} className={`flex text-white mb-6 text-sm w-full  py-2 pl-2 rounded-lg ${ isCurrentPage.pathname === routesData[key].path ? 'bg-primary-300' : ''}`}>
       <img src={routesData[key].icon} className='mr-2'/>

src/driving/main/pages/CreateUser.tsx

@@ -1,11 +1,13 @@
 import React from 'react'
 import PageTitle from '~/driven/utils/components/page-title/pageTitle'
 import { staticMessages } from '~/driven/utils/constants/staticMessages'
+import CreateUser from '~/driving/application/core/create-user'
 
-export default function CreateUser() {
+export default function CreateUserPage() {
   return (
     <>
       <PageTitle className='px-4 py-5' title={staticMessages.global.createUser} />
+      <CreateUser />
     </>
   )
 }

src/driving/main/style/App.css

@@ -19,6 +19,7 @@ html,body {
   --color-primary-100: #C7E4F4;
   --color-primary-300: #0461B8;
   --color-primary-200: #80C8EF;
+  --color-separated-border: #D4D4D4;
 }
 
 th,

tailwind.config.cjs

@@ -27,7 +27,10 @@ module.exports = {
         },
         gradient: {
           primary: 'var(--color-gradient-primary-dark)',
-        }
+        },
+        separated: {
+          border: 'var(--color-separated-border)'
+        },
       }
     },
   },