first commit

src/features/region/ui/AddedRegion.tsx

@@ -0,0 +1,83 @@
+import type { RegionType } from "@/features/region/lib/data";
+import { regionForm } from "@/features/region/lib/form";
+import { Button } from "@/shared/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormMessage,
+} from "@/shared/ui/form";
+import { Input } from "@/shared/ui/input";
+import { Label } from "@/shared/ui/label";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { Loader2 } from "lucide-react";
+import { useState, type Dispatch, type SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import type z from "zod";
+
+interface Props {
+  initialValues: RegionType | null;
+  setDialogOpen: Dispatch<SetStateAction<boolean>>;
+  setPlans: Dispatch<SetStateAction<RegionType[]>>;
+}
+
+const AddedRegion = ({ initialValues, setDialogOpen, setPlans }: Props) => {
+  const [load, setLoad] = useState<boolean>(false);
+  const form = useForm<z.infer<typeof regionForm>>({
+    resolver: zodResolver(regionForm),
+    defaultValues: { name: initialValues?.name || "" },
+  });
+
+  function onSubmit(value: z.infer<typeof regionForm>) {
+    setLoad(true);
+
+    setTimeout(() => {
+      setPlans((prev) => {
+        if (initialValues) {
+          return prev.map((item) =>
+            item.id === initialValues.id ? { ...item, ...value } : item,
+          );
+        }
+        return [
+          ...prev,
+          { id: prev.length ? prev[prev.length - 1].id + 1 : 1, ...value },
+        ];
+      });
+      setLoad(false);
+      setDialogOpen(false);
+    }, 2000);
+  }
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+        <FormField
+          control={form.control}
+          name="name"
+          render={({ field }) => (
+            <FormItem>
+              <Label>Nomi</Label>
+              <FormControl>
+                <Input placeholder="Nomi" {...field} />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )}
+        />
+
+        <Button className="w-full bg-blue-500 cursor-pointer hover:bg-blue-500">
+          {load ? (
+            <Loader2 className="animate-spin" />
+          ) : initialValues ? (
+            "Tahrirlash"
+          ) : (
+            "Qo'shish"
+          )}
+        </Button>
+      </form>
+    </Form>
+  );
+};
+
+export default AddedRegion;