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

style : update division

Browse Source 
Deskripsi:
- form edit discussion
- list discussion
- navbar detail

No Issue
This commit is contained in:
lukman
2024-07-17 14:58:54 +08:00
parent 240105f657
commit 71f439bb93
7 changed files with 77 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/module/division_new/_division_fitur/discussion/component/form_edit_discussion.tsx
View File

@@ -28,6 +28,12 @@ export default function FormEditDiscussion() {
<Textarea
placeholder="Tuliskan apa yang ingin anda diskusikan"
w={"100%"}
styles={{
input: {
border: 'none',
backgroundColor: 'transparent',
}
}}
/>
</Box>
</Group>

33
src/module/division_new/_division_fitur/discussion/component/list_discussion.tsx
View File

@@ -1,8 +1,9 @@
'use client'
import { WARNA } from "@/module/_global";
import { Avatar, Badge, Box, Flex, Group, Text } from "@mantine/core";
import { Avatar, Badge, Box, Divider, Flex, Group, Text, TextInput } from "@mantine/core";
import { useRouter } from "next/navigation";
import { GrChatOption } from "react-icons/gr";
import { HiMagnifyingGlass } from "react-icons/hi2";
const dataAnggota = [
{
@@ -51,17 +52,30 @@ export default function ListDiscussion() {
const router = useRouter()
return (
<Box p={20}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
borderRadius: WARNA.biruTua,
borderColor: WARNA.biruTua,
},
}}
size="md"
radius={30}
leftSection={<HiMagnifyingGlass size={20} />}
placeholder="Pencarian"
/>
{dataAnggota.map((v, i) => {
return (
<>
<Box key={i} pl={10} pr={10}
onClick={() => {
router.push(`/discussion/${v.id}`)
}}
>
<Flex
justify={"space-between"}
align={"center"}
mt={20}
key={i}
onClick={() => {
router.push(`/discussion/${v.id}`)
}}
>
<Group>
<Avatar src={v.image} alt="it's me" size="lg" />
@@ -74,7 +88,7 @@ export default function ListDiscussion() {
</Group>
<Text c={"grey"}>1 Jam</Text>
</Flex>
<Box>{v.desc}</Box>
<Box mt={10}>{v.desc}</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Group gap={5} align="center">
<GrChatOption size={18} />
@@ -84,7 +98,10 @@ export default function ListDiscussion() {
<Text fz={13}>{v.jumlah} Komentar</Text>
</Group>
</Group>
</>
<Box mt={20}>
<Divider size={"xs"} />
</Box>
</Box>
);
})}
</Box>

2
src/module/division_new/_division_fitur/discussion/component/navbar_detail_discussion.tsx
View File

@@ -9,7 +9,7 @@ export default function NavbarDetailDiscussion() {
const [openDrawer, setOpenDrawer] = useState(false)
return (
<>
<LayoutNavbarNew back="" title="Diskusi Divisi Keuangan"
<LayoutNavbarNew back="" title="Diskusi "
menu={
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />

47
src/module/division_new/_division_fitur/discussion/view/view_detail_discussion.tsx
View File

@@ -1,7 +1,9 @@
import { Avatar, Badge, Box, Flex, Group, Text } from "@mantine/core";
"use client"
import { Avatar, Badge, Box, Center, Divider, Flex, Grid, Group, Text, TextInput } from "@mantine/core";
import NavbarDetailDiscussion from "../component/navbar_detail_discussion";
import { WARNA } from "@/module/_global";
import { GrChatOption } from "react-icons/gr";
import { LuSendHorizonal } from "react-icons/lu";
const dataAnggota = [
{
@@ -38,7 +40,7 @@ const dataAnggota = [
},
{
id: 5,
name: "Imam Baroni",
name: "Imam Baronis",
image: "https://i.pravatar.cc/1000?img=22",
status: false,
jumlah: 29,
@@ -68,7 +70,7 @@ export default function ViewDetailDiscussion() {
</Group>
<Text c={"grey"}>1 Jam</Text>
</Flex>
<Box>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</Box>
<Box mt={10}>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</Box>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>
<Group gap={5} align="center">
<GrChatOption size={18} />
@@ -79,27 +81,56 @@ export default function ViewDetailDiscussion() {
<Box p={10}>
{dataAnggota.map((v, i) => {
return (
<Box key={i} style={{ borderBottom: "1px solid #8C8C8C" }} p={5}>
<Box key={i} p={10}>
<Flex
justify={"space-between"}
align={"center"}
>
<Group>
<Avatar src={v.image} alt="it's me" size="lg" />
<Avatar src={v.image} alt="it's me" size="md" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
<Text c={WARNA.biruTua} fw={"bold"} fz={15}>
{v.name}
</Text>
</Box>
</Group>
<Text c={"grey"}>1 Jam</Text>
</Flex>
<Box>{v.desc}</Box>
<Box mt={10}>{v.desc}</Box>
<Box mt={20}>
<Divider size={"xs"} />
</Box>
</Box>
);
})}
</Box>
<Box h={60} pos={"fixed"} bottom={0} w={{ base: "90%", md: "35.5%" }} style={{
zIndex: 999
}}>
<Grid bg={"white"} style={{
border: '1px solid gray',
borderRadius: 40
}} justify="center" align="center">
<Grid.Col span={10}>
<TextInput
styles={{
input: {
color: WARNA.biruTua,
border: "none",
backgroundColor: "transparent"
},
}}
size="md"
placeholder="Kirim Komentar"
/>
</Grid.Col>
<Grid.Col span={2}>
<Center>
<LuSendHorizonal size={30} />
</Center>
</Grid.Col>
</Grid>
</Box>
</Box>
</>
)

8
src/module/division_new/_division_fitur/task/component/tabs_division_task.tsx
View File

@@ -17,16 +17,16 @@ export default function TabsDivisionTask() {
padding: 5,
borderRadius: 100
}}>
<Tabs.Tab value="segera" leftSection={<TbClockPause style={iconStyle} />}>
<Tabs.Tab value="segera" w={"23%"} leftSection={<TbClockPause style={iconStyle} />}>
Segera
</Tabs.Tab>
<Tabs.Tab value="dikerjakan" leftSection={<RiProgress3Line style={iconStyle} />}>
<Tabs.Tab value="dikerjakan" w={"28%"} leftSection={<RiProgress3Line style={iconStyle} />}>
Dikerjakan
</Tabs.Tab>
<Tabs.Tab value="selesai" leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}>
<Tabs.Tab value="selesai" w={"23%"} leftSection={<IoIosCheckmarkCircleOutline style={iconStyle} />}>
Selesai
</Tabs.Tab>
<Tabs.Tab value="batal" leftSection={<IoCloseCircleOutline style={iconStyle} />}>
<Tabs.Tab value="batal" w={"20%"} leftSection={<IoCloseCircleOutline style={iconStyle} />}>
Batal
</Tabs.Tab>
</Tabs.List>

2
src/module/division_new/components/detail_division/list_discussion.tsx
View File

@@ -52,7 +52,7 @@ export default function ListDiscussionOnDetailDivision() {
<Group>
<GoDiscussionClosed size={25} />
<Box w={{ base: 230, md: 400 }}>
<Text fw={'bold'}>{v.judul}</Text>
<Text fw={'bold'} truncate="end">{v.judul}</Text>
</Box>
</Group>
<Group justify="space-between" mt={20} c={'#8C8C8C'}>

2
src/module/division_new/components/detail_division/list_task.tsx
View File

@@ -40,7 +40,7 @@ export default function ListTaskOnDetailDivision() {
{dataTask.map((v, i) =>
<Carousel.Slide key={v.id}>
<Box p={20} w={{ base: 300, md: 400 }} bg={WARNA.biruTua} style={{ borderRadius: 10, border: `1px solid ${"#D6D8F6"}` }}>
<Text fw={'bold'} c={WARNA.bgWhite}>{v.title}</Text>
<Text fw={'bold'} c={WARNA.bgWhite} truncate="end">{v.title}</Text>
<Group justify="space-between" mt={20} c={'#aeaeae'}>
<Group gap={5} align="center">
<CiClock2 size={18} />