Merge branch 'CreateOrder' into 'main'

Added Create order component

See merge request !6

src/app/page.tsx

-import Home from "@/pages/Home/Home"
+import CreateOrder from "@/pages/CreateOrder/CreateOrder"
 
 const HomePage = () => {
-  return <Home />
+  return (
+    <div>
+      <CreateOrder />
+    </div>
+  )
+
 }
- export default HomePage
\ No newline at end of file
+export default HomePage
\ No newline at end of file

src/components/Options.tsx

+type Props = {
+    regime: "country" | "city"
+    contry:string
+    city:string
+    selectHandler:(e:React.ChangeEvent<HTMLSelectElement>)=>void
+}
+
+
+const Options = (props: Props) => {
+     const contries = {
+            Kazakhstan: ["Almaty","Astana","Shymkent"],
+            USA:["Los-Angelse","Maiami", "Houston"]
+        }
+    const optCont = (
+        <select onChange={props.selectHandler} value={props.contry} name="contry">
+            {Object.keys(contries)?.map((i, index) => {
+                return <option  key={index} >{i}</option>
+            })} 
+
+        </select>
+    )
+
+    const optCity = (
+        <select name="city" onChange={props.selectHandler} value={props.city}>
+            {contries[props.contry as keyof typeof contries]?.map((i, index) => {
+                return <option key={index} >{i}</option>
+            })}
+
+        </select>
+    )
+
+    return (
+        <div>
+            {props.regime=="country"?
+            optCont
+            :
+            optCity
+        }
+        </div >
+    )
+}
+
+export default Options
+

src/pages/CreateOrder/CreateOrder.tsx

+'use client'
+
+import Options from "@/components/Options"
+import { useState } from "react"
+
+export default function CreateOrder() {
+
+
+    const [inputs, setInputs] = useState<{
+        title: string,
+        description: string,
+        reward: string
+    }>({
+        title: "",
+        description: "",
+        reward: ""
+    })
+    const [selectOne, setSelectOne] = useState<{
+        contry: string,
+        city: string,
+    }>({
+        contry: "Kazakhstan",
+        city: "Almaty",
+    })
+
+     const [selectTwo, setSelectTwo] = useState<{
+        contry: string,
+        city: string,
+    }>({
+        contry: "USA",
+        city: "Los-Angelse",
+    })
+
+
+
+    function inputHandler(e: React.ChangeEvent<HTMLInputElement>) {
+        setInputs(
+            {
+                ...inputs,
+                [e.target.name]: e.target.value
+
+            }
+        )
+    }
+
+
+    function selectionHandlerFrom(e: React.ChangeEvent<HTMLSelectElement>) {
+        setSelectOne(
+            {
+                ...selectOne,
+                [e.target.name]: e.target.value
+
+            }
+        )
+    }
+
+       function selectionHandlerTo(e: React.ChangeEvent<HTMLSelectElement>) {
+        setSelectTwo(
+            {
+                ...selectTwo,
+                [e.target.name]: e.target.value
+
+            }
+        )
+    }
+    return (
+        <div>
+            <form action="">
+                <h3>
+                    Title
+                </h3>
+
+
+                <input type="text" name="title" value={inputs.title} onChange={inputHandler} />
+                <h3>
+                    Description
+                </h3>
+                <input name="description" onChange={inputHandler}></input>
+                <h3>Upload Image</h3>
+                <h3>Reward</h3>
+                <input name="reward" type="text" onChange={inputHandler} />
+                <h3>Form</h3>
+
+                <Options regime={"country"} selectHandler={(e) => { selectionHandlerFrom(e) }} contry={selectTwo.contry} city={selectOne.city} />
+                <Options regime={"city"} selectHandler={(e) => { selectionHandlerFrom(e) }} contry={selectTwo.contry} city={selectOne.city} />
+
+
+                <h3>To</h3>
+                <Options regime={"country"} selectHandler={(e) => { selectionHandlerTo(e) }} contry={selectOne.contry} city={selectTwo.city} />
+                <Options regime={"city"} selectHandler={(e) => { selectionHandlerTo(e) }} contry={selectOne.contry} city={selectTwo.city} />
+
+
+
+                <h3>
+                    Type of delivery
+                </h3>
+
+                <button>Create Order</button>
+            </form>
+
+        </div>
+    )
+}