wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style : update style

Browse Source
This commit is contained in:
lukman
2024-09-13 17:15:46 +08:00
parent 5d72c78aba
commit e4175d17f8
7 changed files with 166 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/module/project/ui/list_project.tsx
View File

@@ -55,6 +55,8 @@ export default function ListProject() {
}
const isMobile = useMediaQuery('(max-width: 369px)');
const paddingLift = useMediaQuery('(max-width: 505px)')
return (
<Box mt={20}>
<Grid justify='center' align='center'>
@@ -104,12 +106,16 @@ export default function ListProject() {
{isData.map((v, i) => {
return (
<Box key={i}>
<Grid align='center'>
<Grid align='center' onClick={() => router.push(`/project/${v.id}`)}>
<Grid.Col span={{
base: 2,
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1
}}>
<Group onClick={() => router.push(`/project/${v.id}`)}>
<Group >
<Center>
<ActionIcon
variant="gradient"
@@ -129,8 +135,12 @@ export default function ListProject() {
</Group>
</Grid.Col>
<Grid.Col span={{
base: 10,
xl: 11
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}>
<Group justify='space-between' align='center'>
<Box>
@@ -138,7 +148,7 @@ export default function ListProject() {
base: isMobile ? 200 : 230,
xl: 430
}}>
<Text truncate="end" pl={20}>
<Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.title}
</Text>
</Box>

103
src/module/project/ui/tab_project.tsx
View File

@@ -57,9 +57,18 @@ export default function TabProject() {
} />
<Box p={20}>
<Carousel dragFree slideGap={"xs"} align="start" slideSize={"xs"} withIndicators withControls={false}>
{dataStatus.map((item, index) => (
<Carousel.Slide key={index}>
<Box
style={{
display: "flex",
gap: "20px",
position: "relative",
overflowX: "scroll",
scrollbarWidth: "none",
maxWidth: "550px"
}}
>
<Flex gap={"md"} justify={"space-between"}>
{dataStatus.map((item, index) => (
<Button
variant="subtle"
color={
@@ -67,6 +76,7 @@ export default function TabProject() {
? "white"
: tema.get().utama
}
key={index}
onClick={() => { router.push("?status=" + item.id + "&group=" + group) }}
defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}
radius={"xl"}
@@ -75,91 +85,14 @@ export default function TabProject() {
? tema.get().utama
: "transparent"
}
leftSection={item.icon}
>
{item.icon}
<Box ml={10}>{item.title}</Box>
{item.title}
</Button>
</Carousel.Slide>
))}
</Carousel>
{/* <Flex justify={"center"} gap={'sm'} align={'center'} mt={10}>
{dataStatus.map((v, i) => (
<Box key={i}>
<Box w={6} h={6} bg={
status == v.id
? tema.get().utama
: "#B0AEAE"
} style={{
borderRadius: 100
}} />
</Box>
))}
</Flex> */}
))}
</Flex>
</Box>
<ListProject />
{/* <Tabs variant="pills" radius="md" defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 4 }}
>
<Tabs.Tab value="0"
leftSection={<TbClockPause style={iconStyle} />}
onClick={() => { router.push("?status=0&group=" + group) }}
color={tema.get().utama}
>
Segera
</Tabs.Tab>
<Tabs.Tab value="1"
leftSection={<RiProgress3Line style={iconStyle} />}
onClick={() => { router.push("?status=1&group=" + group) }}
color={tema.get().utama}
>
Dikerjakan
</Tabs.Tab>
<Tabs.Tab value="2"
leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
onClick={() => { router.push("?status=2&group=" + group) }}
color={tema.get().utama}>
Selesai
</Tabs.Tab>
<Tabs.Tab value="3"
leftSection={<IoCloseCircleOutline style={iconStyle} />}
onClick={() => { router.push("?status=3&group=" + group) }}
color={tema.get().utama}>
Batal
</Tabs.Tab>
</SimpleGrid>
<ListProject />
</Tabs> */}
{/* <Tabs variant="pills" radius="xl" defaultValue={(status == "1" || status == "2" || status == "3") ? status : "0"}>
<Tabs.List grow justify='center'>
<Tabs.Tab value="0" w={"23%"}
leftSection={<TbClockPause style={iconStyle} />}
onClick={() => { router.push("?status=0&group=" + group) }}
color={tema.get().utama}
>
Segera
</Tabs.Tab>
<Tabs.Tab value="1" w={"28%"}
leftSection={<RiProgress3Line style={iconStyle} />}
onClick={() => { router.push("?status=1&group=" + group) }}
color={tema.get().utama}
>
Dikerjakan
</Tabs.Tab>
<Tabs.Tab value="2" w={"23%"}
leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}
onClick={() => { router.push("?status=2&group=" + group) }}
color={tema.get().utama}>
Selesai
</Tabs.Tab>
<Tabs.Tab value="3" w={"20%"}
leftSection={<IoCloseCircleOutline style={iconStyle} />}
onClick={() => { router.push("?status=3&group=" + group) }}
color={tema.get().utama}>
Batal
</Tabs.Tab>
</Tabs.List>
<ListProject />
</Tabs> */}
</Box>