feat : update validation and color

src/module/project/ui/edit_task_project.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funEditProject, funGetOneProjectById } from '../lib/api_project';
 import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Input, Stack } from '@mantine/core';
+import { Box, Button, Input, Stack, TextInput } from '@mantine/core';
 import { LayoutNavbarNew, WARNA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 
@@ -13,6 +13,9 @@ export default function EditTaskProject() {
   const [name, setName] = useState("")
   const [openModal, setOpenModal] = useState(false)
   const param = useParams<{ id: string }>()
+  const [touched, setTouched] = useState({
+    name: false,
+ });
 
   function onVerification() {
     if (name == "")
@@ -32,7 +35,7 @@ export default function EditTaskProject() {
       }
     } catch (error) {
       console.log(error)
-      toast.error("Gagal mengedit proyek, coba lagi nanti")
+      toast.error("Gagal mengedit Kegiatan, coba lagi nanti")
     }
   }
 
@@ -47,7 +50,7 @@ export default function EditTaskProject() {
 
     } catch (error) {
       console.error(error);
-      toast.error("Gagal mendapatkan data proyek, coba lagi nanti");
+      toast.error("Gagal mendapatkan data Kegiatan, coba lagi nanti");
     }
   }
 
@@ -56,11 +59,11 @@ export default function EditTaskProject() {
   }, [param.id])
 
   return (
-    <Box>
-      <LayoutNavbarNew back="" title={"Edit Judul Proyek"} menu />
+    <Box pos={"relative"} h={"100vh"}>
+      <LayoutNavbarNew back="" title={"Edit Judul Kegiatan"} menu />
       <Box p={20}>
         <Stack pt={15}>
-          <Input
+          <TextInput
             styles={{
               input: {
                 border: `1px solid ${"#D6D8F6"}`,
@@ -68,12 +71,22 @@ export default function EditTaskProject() {
               },
             }}
             placeholder="Tugas"
+            required
             size="md"
             value={name}
-            onChange={(e) => { setName(e.target.value) }}
+            onChange={(e) => {
+              setName(e.target.value)
+              setTouched({ ...touched, name: false })
+             }}
+            error={
+              touched.name && (
+                 name == "" ? "Judul Tidak Boleh Kosong" : null
+              )
+           }
+            onBlur={() => setTouched({ ...touched, name: true })}
           />
         </Stack>
-        <Box mt={"xl"}>
+        <Box pos={"absolute"} bottom={10} left={0} right={0} p={20}>
           <Button
             c={"white"}
             bg={WARNA.biruTua}