style : update style

src/module/task/ui/list_division_task.tsx

@@ -7,7 +7,7 @@ import { MdAccountCircle } from "react-icons/md";
 import { IDataTask } from "../lib/type_task";
 import { funGetAllTask } from "../lib/api_task";
 import toast from "react-hot-toast";
-import { useShallowEffect } from "@mantine/hooks";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
 import _ from "lodash";
 import { useHookstate } from "@hookstate/core";
 
@@ -21,6 +21,7 @@ export default function ListDivisionTask() {
    const [searchQuery, setSearchQuery] = useState('')
    const [loading, setLoading] = useState(true);
    const tema = useHookstate(TEMA)
+   const paddingLift = useMediaQuery('(max-width: 505px)')
 
    const handleList = () => {
       setIsList(!isList)
@@ -102,7 +103,11 @@ export default function ListDivisionTask() {
                         <Box key={i}>
                            <Grid align='center'>
                               <Grid.Col span={{
-                                 base: 2,
+                                 base: 1,
+                                 xs: 1,
+                                 sm: 1,
+                                 md: 1,
+                                 lg: 1,
                                  xl: 1
                               }}>
                                  <Group onClick={() => router.push(`task/${v.id}`)}>
@@ -125,15 +130,19 @@ export default function ListDivisionTask() {
                                  </Group>
                               </Grid.Col>
                               <Grid.Col span={{
-                                 base: 10,
-                                 xl: 11
+                                 base: 11,
+                                 xs: 11,
+                                 sm: 11,
+                                 md: 11,
+                                 lg: 11,
+                                 xl: 11,
                               }}>
                                  <Box>
                                     <Box w={{
                                        base: 280,
                                        xl: 430
                                     }}>
-                                       <Text truncate="end" pl={20}>
+                                       <Text truncate="end" pl={paddingLift ? 30 : 20}>
                                           {v.title}
                                        </Text>
                                     </Box>

src/module/task/ui/tabs_division_task.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { Box, Button, rem, Tabs } from "@mantine/core";
+import { Box, Button, Flex, rem, Tabs } from "@mantine/core";
 import { IoIosCheckmarkCircleOutline } from "react-icons/io";
 import { IoCloseCircleOutline } from "react-icons/io5";
 import { RiProgress3Line } from "react-icons/ri";
@@ -42,60 +42,40 @@ export default function TabsDivisionTask() {
 
    return (
       <Box p={20}>
-         {/* <Tabs variant="pills" color='#FF9861' radius="xl" defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}>
-            <Tabs.List grow bg={"white"} style={{
-               border: `1px solid ${"#EDEDED"}`,
-               padding: 5,
-               borderRadius: 100
-            }}>
-               <Tabs.Tab value="0" w={"23%"}
-                  leftSection={<TbClockPause style={iconStyle} />}
-                  onClick={() => { router.push("?status=0") }}>
-                  Segera
-               </Tabs.Tab>
-               <Tabs.Tab value="1" w={"28%"}
-                  leftSection={<RiProgress3Line style={iconStyle} />}
-                  onClick={() => { router.push("?status=1") }}>
-                  Dikerjakan
-               </Tabs.Tab>
-               <Tabs.Tab value="2" w={"23%"}
-                  leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
-                  onClick={() => { router.push("?status=2") }}>
-                  Selesai
-               </Tabs.Tab>
-               <Tabs.Tab value="3" w={"20%"}
-                  leftSection={<IoCloseCircleOutline style={iconStyle} />}
-                  onClick={() => { router.push("?status=3") }}>
-                  Batal
-               </Tabs.Tab>
-            </Tabs.List>
-            <ListDivisionTask />
-         </Tabs> */}
-         <Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
+         <Box
+          style={{
+            display: "flex",
+            gap: "20px",
+            position: "relative",
+            overflowX: "scroll",
+            scrollbarWidth: "none",
+            maxWidth: "550px"
+          }}
+        >
+          <Flex gap={"md"} justify={"space-between"}>
             {dataStatus.map((item, index) => (
-               <Carousel.Slide key={index}>
-                  <Button
-                     variant="subtle"
-                     color={
-                        status == item.id
-                           ? "white"
-                           : (status == null && item.id == "0") ? "white" : tema.get().utama
-                     }
-                     onClick={() => { router.push("?status=" + item.id) }}
-                     defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
-                     radius={"xl"}
-                     bg={
-                        status == item.id
-                           ? tema.get().bgFiturDivisi
-                           : (status == null && item.id == "0") ? tema.get().bgFiturDivisi : "transparent"
-                     }
-                  >
-                     {item.icon}
-                     <Box ml={10}>{item.title}</Box>
-                  </Button>
-               </Carousel.Slide>
+              <Button
+              variant="subtle"
+              color={
+                 status == item.id
+                    ? "white"
+                    : (status == null && item.id == "0") ? "white" : tema.get().utama
+              }
+              onClick={() => { router.push("?status=" + item.id) }}
+              defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
+              radius={"xl"}
+              bg={
+                 status == item.id
+                    ? tema.get().bgFiturDivisi
+                    : (status == null && item.id == "0") ? tema.get().bgFiturDivisi : "transparent"
+              }
+              leftSection={item.icon}
+           >
+                {item.title}
+              </Button>
             ))}
-         </Carousel>
+          </Flex>
+        </Box>
          <ListDivisionTask />
       </Box>
    )