style : update style responsive

Deskripsi:
- update api discussion
- update calender
- update dicussion

No Issue

src/module/calender/ui/create_user_calender.tsx

@@ -6,7 +6,7 @@ import { useHookstate } from '@hookstate/core';
 import toast from 'react-hot-toast';
 import { useShallowEffect } from '@mantine/hooks';
 import { LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
-import { Avatar, Box, Button, Divider, Flex, Group, rem, Text } from '@mantine/core';
+import { Avatar, Box, Button, Divider, Flex, Grid, Group, rem, Text } from '@mantine/core';
 import { FaCheck } from 'react-icons/fa6';
 
 export default function CreateUserCalender({ onClose }: { onClose: (val: any) => void }) {
@@ -31,7 +31,7 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
       } else {
         toast.error(response.message)
       }
-      
+
     } catch (error) {
       console.log(error)
       toast.error("Gagal mendapatkan anggota, coba lagi nanti");
@@ -83,77 +83,73 @@ export default function CreateUserCalender({ onClose }: { onClose: (val: any) =>
 
   return (
     <Box>
-    <LayoutNavbarNew
-      // back=""
-      title="Pilih Anggota"
-      menu
-    />
-    <Box p={20}>
-      <Group justify="space-between" mt={20} onClick={handleSelectAll}>
-        <Text c={WARNA.biruTua} fw={"bold"}>
-          Pilih Semua Anggota
-        </Text>
-        {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
+      <LayoutNavbarNew
+        // back=""
+        title="Pilih Anggota"
+        menu
+      />
+      <Box p={20}>
+        <Group justify="space-between" mt={20} onClick={handleSelectAll}>
+          <Text c={WARNA.biruTua} fw={"bold"}>
+            Pilih Semua Anggota
+          </Text>
+          {selectAll ? <FaCheck style={{ marginRight: 10 }} /> : ""}
         </Group>
-        {loading ? 
+        {loading ?
           Array(8)
-          .fill(null)
-          .map((_, i) => (
-             <Box key={i}>
+            .fill(null)
+            .map((_, i) => (
+              <Box key={i}>
                 <SkeletonSingle />
-             </Box>
-          ))
-          :  
-      <Box mt={20}>
-        {isData.map((v, i) => {
-          const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
-          return (
-            <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
-              <Flex justify={"space-between"} align={"center"}>
-                <Group>
-                  <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
-                  <Text style={{
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
+              </Box>
+            ))
+          :
+          <Box mt={20} mb={100}>
+            {isData.map((v, i) => {
+              const isSelected = selectedFiles.some((i: any) => i?.idUser == v.idUser);
+              return (
+                <Box mb={15} key={i} onClick={() => handleFileClick(i)}>
+                  <Grid align='center' gutter={{
+                    base: 60,
+                    xl: "xs"
                   }}>
-                    {v.name}
-                  </Text>
-                </Group>
-                <Text
-                  style={{
-                    cursor: 'pointer',
-                    display: 'flex',
-                    alignItems: 'center',
-                    paddingLeft: 20,
-                  }}
-                >
-                  {isSelected ? <FaCheck style={{ marginRight: 10 }} /> : ""}
-                </Text>
-              </Flex>
-              <Divider my={"md"} />
-            </Box>
-          );
-        })}
-      </Box>
+                    <Grid.Col span={2}>
+                      <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                    </Grid.Col>
+                    <Grid.Col span={10}>
+                      <Flex justify='space-between' align={"center"}>
+                        <Flex direction={'column'} align="flex-start" justify="flex-start">
+                          <Text lineClamp={1}>{v.name}</Text>
+                        </Flex>
+                        {isSelected ? <FaCheck /> : null}
+                      </Flex>
+                    </Grid.Col>
+                  </Grid>
+                  <Box mt={10}>
+                    <Divider size={"xs"} />
+                  </Box>
+                </Box>
+              );
+            })}
+          </Box>
         }
-    </Box>
+      </Box>
       <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-            maxWidth: rem(550),
-            zIndex: 999,
-            backgroundColor: `${WARNA.bgWhite}`,
-         }}>
+        maxWidth: rem(550),
+        zIndex: 999,
+        backgroundColor: `${WARNA.bgWhite}`,
+      }}>
         <Button
           c={"white"}
           bg={WARNA.biruTua}
           size="lg"
           radius={30}
           fullWidth
-          onClick={() => {onSubmit()}}
+          onClick={() => { onSubmit() }}
         >
           Simpan
         </Button>
       </Box>
-  </Box>
+    </Box>
   );
 }