add input component

ArtisanConnect/app/(tabs)/notice/create.jsx

@@ -1,4 +1,71 @@
+import { Button, ButtonText } from "@/components/ui/button";
+import { FormControl } from "@/components/ui/form-control";
+import { Input, InputField } from "@/components/ui/input";
 import { Text } from "@/components/ui/text";
+import { VStack } from "@/components/ui/vstack";
+import { Textarea, TextareaInput } from "@/components/ui/textarea";
+import {
+  Select,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectDragIndicator,
+  SelectDragIndicatorWrapper,
+  SelectItem,
+} from "@/components/ui/select";
+import { ChevronDownIcon } from "@/components/ui/icon";
+
 export default function CreateNotice() {
-  return <Text>Tworzenie ogłoszenia</Text>;
+  return (
+    <FormControl className="p-4 border rounded-lg border-outline-300">
+      <VStack space="xl">
+        <VStack space="xs">
+          <Text className="text-typography-500">Tytuł</Text>
+          <Input className="min-w-[250px]">
+            <InputField type="text" />
+          </Input>
+        </VStack>
+
+        <VStack space="xs">
+          <Text className="text-typography-500">Opis</Text>
+          <Textarea size="md" className="min-w-[250px] ">
+            <TextareaInput placeholder="Opisz produkt" />
+          </Textarea>
+        </VStack>
+
+        <VStack space="xs">
+          <Text className="text-typography-500">Cena</Text>
+          <Input className="min-w-[250px]">
+            <InputField type="text" />
+          </Input>
+        </VStack>
+        <VStack space="xs">
+          <Text className="text-typography-500">Kategoria</Text>
+          <Select>
+            <SelectTrigger variant="outline" size="md">
+              <SelectInput placeholder="Wybierz kategorię" />
+              <SelectIcon className="mr-3" as={ChevronDownIcon} />
+            </SelectTrigger>
+            <SelectPortal>
+              <SelectBackdrop />
+              <SelectContent>
+                <SelectDragIndicatorWrapper>
+                  <SelectDragIndicator />
+                </SelectDragIndicatorWrapper>
+                <SelectItem label="Meble" value="Furniture" />
+                <SelectItem label="Biżuteria" value="Jewelry" />
+                <SelectItem label="Ceramika" value="Ceramics" />
+              </SelectContent>
+            </SelectPortal>
+          </Select>
+        </VStack>
+        <Button className="ml-auto">
+          <ButtonText className="text-typography-0">Save</ButtonText>
+        </Button>
+      </VStack>
+    </FormControl>
+  );
 }