initiate drf app

frontend/components/AddressSelector.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import React, { useState } from 'react'
+import TextInput from './ui/TextInput'
+import Button from './ui/Button'
+
+export default function AddressSelector() {
+  const [fromAddress, setFromAddress] = useState('')
+  const [toAddress, setToAddress] = useState('')
+
+  return (
+    <div className="bg-white rounded-xl shadow-lg p-4 sm:p-6 w-full my-2 sm:my-4">
+      <div className="flex flex-col sm:flex-row sm:items-end gap-4 sm:gap-3">
+        <div className="w-full sm:flex-[3] min-w-0 sm:px-1">
+          <TextInput
+            placeholder="Минск, Беларусь"
+            tooltip="Укажите пункт (Город/Страна), откуда необходимо забрать посылку."
+            label="Забрать посылку из"
+            value={fromAddress}
+            handleChange={(e) => setFromAddress(e.target.value)}
+            name="fromAddress"
+          />
+        </div>
+        <div className="w-full sm:flex-[3] min-w-0 sm:px-1">
+          <TextInput
+            placeholder="Москва, Россия"
+            label="Доставить посылку в"
+            tooltip="Укажите пункт (Город/Страна), куда необходимо доставить посылку."
+            value={toAddress}
+            handleChange={(e) => setToAddress(e.target.value)}
+            name="toAddress"
+          />
+        </div>
+        <Button
+          text="Найти перевозчика"
+          className="w-full sm:w-auto sm:flex-1 whitespace-nowrap bg-orange hover:bg-orange/80 text-white p-4"
+        />
+        <Button
+          text="Найти посылку"
+          className="w-full sm:w-auto sm:flex-1 whitespace-nowrap bg-gray-100 hover:bg-gray-200 text-gray-800 p-4"
+        />
+      </div>
+    </div>
+  )
+}