style : style mobile

Deskripsi:
- update announcement
- update division new
- update project

No Issue

src/module/project/ui/create_project.tsx

@@ -11,7 +11,7 @@ import LayoutModal from "@/module/_global/layout/layout_modal";
 import toast from "react-hot-toast";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
 import { funGetUserByCookies } from "@/module/auth";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import { useHookstate } from "@hookstate/core";
 import { globalMemberProject } from "../lib/val_project";
 import ViewDateEndTask from "./create_date_end_task";
@@ -40,6 +40,7 @@ export default function CreateProject() {
   const [indexDelFile, setIndexDelFile] = useState<number>(0)
   const [indexDelTask, setIndexDelTask] = useState<number>(0)
   const roleLogin = useHookstate(globalRole)
+  const isMobile = useMediaQuery('(max-width: 369px)');
 
   const [body, setBody] = useState<any>({
     idGroup: "",
@@ -302,19 +303,19 @@ export default function CreateProject() {
                           >
                             <Grid.Col span={9}>
                               <Group>
-                                <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                                <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
                                 <Box w={{
-                                  base: 140,
+                                  base: isMobile ? 130 : 140,
                                   xl: 270
                                 }}>
-                                  <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1}>
+                                  <Text c={WARNA.biruTua} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16}>
                                     {v.name}
                                   </Text>
                                 </Box>
                               </Group>
                             </Grid.Col>
                             <Grid.Col span={3}>
-                              <Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
+                              <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
                                 Anggota
                               </Text>
                             </Grid.Col>

src/module/project/ui/list_anggota_detail_project.tsx

@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { funDeleteMemberProject, funGetOneProjectById } from '../lib/api_project';
 import toast from 'react-hot-toast';
 import { useParams, useRouter } from 'next/navigation';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IDataMemberProject } from '../lib/type_project';
 import { FaUser } from 'react-icons/fa6';
 import { IoIosCloseCircle } from 'react-icons/io';
@@ -45,6 +45,7 @@ export default function ListAnggotaDetailProject() {
     getOneData();
   }, [param.id])
 
+
   async function onSubmit() {
     try {
       const res = await funDeleteMemberProject(param.id, { idUser: dataChoose.id });
@@ -61,6 +62,7 @@ export default function ListAnggotaDetailProject() {
       toast.error("Gagal menghapus anggota Kegiatan, coba lagi nanti");
     }
   }
+  const isMobile = useMediaQuery('(max-width: 369px)');
 
   return (
     <Box pt={20}>
@@ -100,20 +102,20 @@ export default function ListAnggotaDetailProject() {
                         >
                           <Grid.Col span={9}>
                             <Group>
-                              <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size="lg" />
+                              <Avatar src={`/api/file/img?jenis=image&cat=user&file=${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
                               <Box w={{
-                                base: 140,
+                                base: isMobile ? 130 : 140,
                                 xl: 270
                               }}>
                                 <Flex direction={'column'} align="flex-start" justify="flex-start">
-                                  <Text lineClamp={1}>{v.name}</Text>
-                                  <Text c={"#5A687D"} fz={14} lineClamp={1}>{v.email}</Text>
+                                  <Text lineClamp={1} fz={isMobile ? 14 : 16}>{v.name}</Text>
+                                  <Text c={"#5A687D"} fz={isMobile ? 10 : 14} lineClamp={1}>{v.email}</Text>
                                 </Flex>
                               </Box>
                             </Group>
                           </Grid.Col>
                           <Grid.Col span={3}>
-                            <Text c={WARNA.biruTua} fw={"bold"} ta={'end'}>
+                            <Text c={WARNA.biruTua} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
                               Anggota
                             </Text>
                           </Grid.Col>

src/module/project/ui/list_project.tsx

@@ -8,7 +8,7 @@ import { MdAccountCircle } from 'react-icons/md';
 import { RiCircleFill } from 'react-icons/ri';
 import { funGetAllProject } from '../lib/api_project';
 import toast from 'react-hot-toast';
-import { useShallowEffect } from '@mantine/hooks';
+import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
 import { IDataProject } from '../lib/type_project';
 import { useHookstate } from '@hookstate/core';
 import _ from 'lodash';
@@ -52,6 +52,7 @@ export default function ListProject() {
   const handleList = () => {
     setIsList(!isList)
   }
+  const isMobile = useMediaQuery('(max-width: 369px)');
 
   return (
     <Box mt={20}>
@@ -132,7 +133,7 @@ export default function ListProject() {
                       <Group justify='space-between' align='center'>
                         <Box>
                           <Box w={{
-                            base: 230,
+                            base: isMobile ? 200 : 230,
                             xl: 430
                           }}>
                             <Text truncate="end" pl={20}>

src/module/project/ui/results_file.tsx

@@ -22,7 +22,7 @@ export default function ResultsFile({ name, extension }: IListFileTaskProject) {
           </Center>
         </Grid.Col>
         <Grid.Col span={10}>
-        <Text>{name}</Text>
+        <Text lineClamp={1}>{name}</Text>
         </Grid.Col>
       </Grid>
       <Group>