# Forum
## feat - Tampilan forum - Tampilan forumku - Tampilan komentar - Tampilam posting - Tampilan Detail posting - Tampilan Edit postinf - Tampilan edit komentat - Tampilan report posting - Tampilan report komentar ### No issuee
This commit is contained in:
117
src/app_modules/forum/main/beranda.tsx
Normal file
117
src/app_modules/forum/main/beranda.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
|
||||
import { RouterJob } from "@/app/lib/router_hipmi/router_job";
|
||||
import ComponentGlobal_AuthorNameOnHeader from "@/app_modules/component_global/author_name_on_header";
|
||||
import {
|
||||
Affix,
|
||||
rem,
|
||||
ActionIcon,
|
||||
Card,
|
||||
CardSection,
|
||||
Text,
|
||||
Stack,
|
||||
Divider,
|
||||
Group,
|
||||
} from "@mantine/core";
|
||||
import { useTimeout, useWindowScroll } from "@mantine/hooks";
|
||||
import {
|
||||
IconCirclePlus,
|
||||
IconMessageCircle,
|
||||
IconPencilPlus,
|
||||
} from "@tabler/icons-react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import ComponentForum_AuthorNameOnHeader from "../component/author_header_name";
|
||||
import { useState } from "react";
|
||||
import ComponentGlobal_V2_LoadingPage from "@/app_modules/component_global/loading_page_v2";
|
||||
import { useAtom } from "jotai";
|
||||
import { gs_forum_loading_edit_posting } from "../global_state";
|
||||
|
||||
export default function Forum_Beranda() {
|
||||
const router = useRouter();
|
||||
const skrng = Date.now();
|
||||
const [scroll, scrollTo] = useWindowScroll();
|
||||
const [loadingCreate, setLoadingCreate] = useState(false);
|
||||
const [loadingKomen, setLoadingKomen] = useState(false);
|
||||
const [loadingDetail, setLoaduingDetail] = useState(false);
|
||||
|
||||
if (loadingDetail) return <ComponentGlobal_V2_LoadingPage />;
|
||||
if (loadingKomen) return <ComponentGlobal_V2_LoadingPage />;
|
||||
|
||||
return (
|
||||
<>
|
||||
<Affix position={{ bottom: rem(100), right: rem(30) }}>
|
||||
<ActionIcon
|
||||
loading={loadingCreate ? true : false}
|
||||
opacity={scroll.y > 0 ? 0.5 : ""}
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
size={"xl"}
|
||||
radius={"xl"}
|
||||
variant="transparent"
|
||||
bg={"blue"}
|
||||
onClick={() => {
|
||||
setLoadingCreate(true);
|
||||
router.push(RouterForum.create);
|
||||
}}
|
||||
>
|
||||
<IconPencilPlus color="white" />
|
||||
</ActionIcon>
|
||||
</Affix>
|
||||
|
||||
<Stack px={"sm"}>
|
||||
{Array(5)
|
||||
.fill(0)
|
||||
.map((e, i) => (
|
||||
<Card key={i}>
|
||||
<Card.Section>
|
||||
<ComponentForum_AuthorNameOnHeader
|
||||
forumId={i as any}
|
||||
tipe="posting"
|
||||
isMoreButton={true}
|
||||
/>
|
||||
</Card.Section>
|
||||
<Card.Section
|
||||
sx={{ zIndex: 0 }}
|
||||
p={"sm"}
|
||||
onClick={() => {
|
||||
// console.log("halaman forum");
|
||||
setLoaduingDetail(true);
|
||||
router.push(RouterForum.main_detail + i);
|
||||
}}
|
||||
>
|
||||
<Stack spacing={"xs"}>
|
||||
<Text fz={"sm"} lineClamp={4}>
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
|
||||
Ad, vitae. Quisquam aspernatur, eius consequatur dicta
|
||||
repellendus facere vero recusandae deleniti voluptas quod
|
||||
architecto, tenetur totam excepturi rem nam iusto earum.
|
||||
</Text>
|
||||
</Stack>
|
||||
</Card.Section>
|
||||
<Card.Section>
|
||||
<Stack>
|
||||
<Group spacing={"xs"} px={"sm"}>
|
||||
<ActionIcon
|
||||
// loading={loadingKomen ? true : false}
|
||||
variant="transparent"
|
||||
sx={{ zIndex: 1 }}
|
||||
onClick={() => {
|
||||
setLoadingKomen(true);
|
||||
router.push(RouterForum.komentar + i);
|
||||
}}
|
||||
>
|
||||
<IconMessageCircle color="gray" size={25} />
|
||||
</ActionIcon>
|
||||
<Text c={"gray"}>1</Text>
|
||||
</Group>
|
||||
<Divider />
|
||||
</Stack>
|
||||
</Card.Section>
|
||||
</Card>
|
||||
))}
|
||||
</Stack>
|
||||
</>
|
||||
);
|
||||
}
|
||||
133
src/app_modules/forum/main/layout.tsx
Normal file
133
src/app_modules/forum/main/layout.tsx
Normal file
@@ -0,0 +1,133 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
ActionIcon,
|
||||
AppShell,
|
||||
Avatar,
|
||||
Center,
|
||||
Footer,
|
||||
Grid,
|
||||
Group,
|
||||
Header,
|
||||
Stack,
|
||||
Text,
|
||||
Title,
|
||||
} from "@mantine/core";
|
||||
import React, { useState } from "react";
|
||||
import ComponentForum_HeaderTamplate from "../component/header/header_tamplate";
|
||||
import { RouterHome } from "@/app/lib/router_hipmi/router_home";
|
||||
import { RouterForum } from "@/app/lib/router_hipmi/router_forum";
|
||||
import { IconChevronLeft, IconCircle, IconHome } from "@tabler/icons-react";
|
||||
import router from "next/router";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { title } from "process";
|
||||
import { MODEL_USER } from "@/app_modules/home/model/interface";
|
||||
import { RouterProfile } from "@/app/lib/router_hipmi/router_katalog";
|
||||
|
||||
export default function LayoutForum_Main({
|
||||
children,
|
||||
dataAuthor,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
dataAuthor: MODEL_USER;
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [hotMenu, setHotMenu] = useState(1);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
const listFooter = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Beranda",
|
||||
path: RouterForum.beranda,
|
||||
icon: <IconHome />,
|
||||
},
|
||||
|
||||
{
|
||||
id: 2,
|
||||
name: "ForumKu",
|
||||
path: RouterForum.forumku,
|
||||
icon: <IconCircle />,
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<>
|
||||
<AppShell
|
||||
header={
|
||||
<Header height={50} sx={{ borderStyle: "none" }}>
|
||||
<Group h={50} position="apart" px={"md"}>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
onClick={() => {
|
||||
return router.push(RouterHome.main_home);
|
||||
}}
|
||||
>
|
||||
<IconChevronLeft />
|
||||
</ActionIcon>
|
||||
|
||||
<Title order={5}>Forum</Title>
|
||||
<ActionIcon
|
||||
loading={loading ? true : false}
|
||||
variant="transparent"
|
||||
onClick={() => {
|
||||
setLoading(true);
|
||||
router.push(RouterForum.forumku + dataAuthor?.id);
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
radius={"xl"}
|
||||
size={30}
|
||||
sx={{
|
||||
borderStyle: "solid",
|
||||
borderWidth: "0.5px",
|
||||
borderColor: "black",
|
||||
}}
|
||||
alt="foto"
|
||||
src={
|
||||
RouterProfile.api_foto_profile +
|
||||
dataAuthor?.Profile?.imagesId
|
||||
}
|
||||
/>
|
||||
</ActionIcon>
|
||||
</Group>
|
||||
</Header>
|
||||
}
|
||||
|
||||
// footer={
|
||||
// <Footer height={60} bg={"dark"}>
|
||||
// <Grid>
|
||||
// {listFooter.map((e) => (
|
||||
// <Grid.Col
|
||||
// key={e.id}
|
||||
// span={"auto"}
|
||||
// pt={"md"}
|
||||
// onClick={() => {
|
||||
// router.replace(e.path);
|
||||
// setHotMenu(e.id);
|
||||
// }}
|
||||
// >
|
||||
// <Center>
|
||||
// <Stack align="center" spacing={0}>
|
||||
// <ActionIcon
|
||||
// variant="transparent"
|
||||
// c={hotMenu === e.id ? "blue" : "white"}
|
||||
// >
|
||||
// {e.icon}
|
||||
// </ActionIcon>
|
||||
// <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
|
||||
// {e.name}
|
||||
// </Text>
|
||||
// </Stack>
|
||||
// </Center>
|
||||
// </Grid.Col>
|
||||
// ))}
|
||||
// </Grid>
|
||||
// </Footer>
|
||||
// }
|
||||
>
|
||||
{children}
|
||||
</AppShell>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user