humas
/
web-humas-fe
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: e-magazine detail

This commit is contained in:
amd123 2024-03-04 15:36:22 +07:00
parent e110a1f955
commit ef39159af4
16 changed files with 247 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/e-majalah-polri/detail/[id]/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
import { HumasLayout } from "@/components/layout/HumasLayout";
export default function DetailEMajalahLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<HumasLayout>
{children}
</HumasLayout>
);
}

8
app/e-majalah-polri/detail/[id]/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import EMagazineDetail from '@/components/detail/E-MagazineDetail'
import React from 'react'
export default function EnewsDetailPage() {
return (
<EMagazineDetail />
)
}

13
app/portal-ppid/admin/layout.tsx Normal file
View File

@ -0,0 +1,13 @@
import { PPIDAdminLayout } from "@/components/layout/PPIDAdminLayout";
export default function LayoutAdmin({
children,
}: {
children: React.ReactNode;
}) {
return (
<PPIDAdminLayout >
{children}
</PPIDAdminLayout>
);
}

38
app/portal-ppid/admin/page.tsx
View File

@ -1,7 +1,41 @@
import React from 'react' import React from 'react'
export default function PPIDAdminPage() { export default function tes() {
return ( return (
<div>PPIDAdminPage</div> <div className='bg-white'>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
<div>1</div>
</div>
) )
} }

50
components/Landing Page/ENewsPolri.tsx
View File

@ -26,24 +26,6 @@ export default function ENewsPolri() {
}, },
]; ];
// useEffect(() => {
// function updateLimitedData() {
// if (window.matchMedia("(max-width: 767px)").matches) {
// setLimitedData(eNews.slice(0, 1));
// } else if (window.matchMedia("(min-width: 768px) and (max-width: 1023px)").matches) {
// setLimitedData(eNews.slice(0, 2));
// } else {
// setLimitedData(eNews.slice(0, 3));
// }
// }
// updateLimitedData();
// window.addEventListener('resize', updateLimitedData);
// return () => {
// window.removeEventListener('resize', updateLimitedData);
// };
// }, [eNews]);
return ( return (
<div className='bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-5 flex py-4 flex-col justify-center items-center'> <div className='bg-[#1F1A17] text-center rounded-none md:rounded-lg h-auto lg:h-[338px] space-y-5 flex py-4 flex-col justify-center items-center'>
<p className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>E-Majalah Polri</p> <p className='text-white font-bold text-2xl underline underline-offset-4 decoration-red-600'>E-Majalah Polri</p>
@ -52,21 +34,23 @@ export default function ENewsPolri() {
<div className='lg:flex space-y-4 lg:space-y-0 gap-1 md:gap-2 lg:gap-8'> <div className='lg:flex space-y-4 lg:space-y-0 gap-1 md:gap-2 lg:gap-8'>
{eNews.map((data: any) => ( {eNews.map((data: any) => (
<div key={data.id} className='h-auto md:h-[200px] w-[274px]'> <div key={data.id} className='h-auto md:h-[200px] w-[274px]'>
<Card className='text-white' <Link href={`/e-majalah-polri/detail/${data.id}`}>
isFooterBlurred <Card className='text-white'
> isFooterBlurred
<Image >
alt="Woman listing to music" <Image
className="object-cover h-full" alt="Woman listing to music"
height={100} className="object-cover h-full"
src={data.img} height={100}
width={100} src={data.img}
layout='responsive' width={100}
/> layout='responsive'
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10"> />
<p className='text-xs text-left'>{data.title}</p> <CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
</CardFooter> <p className='text-xs text-left'>{data.title}</p>
</Card> </CardFooter>
</Card>
</Link>
</div> </div>
))} ))}
</div> </div>

2
components/detail/DetailPage.tsx
View File

@ -4,7 +4,7 @@ import Comment from './Comment'
import SidebarDetail from '../page/SidebarDetail' import SidebarDetail from '../page/SidebarDetail'
import RelatedNews from '../page/RelatedNews' import RelatedNews from '../page/RelatedNews'
export default function DetailPage() { export default function NewsDetailPage() {
return ( return (
<> <>
<div className='text-black md:flex bg-white'> <div className='text-black md:flex bg-white'>

60
components/detail/E-MagazineDetail.tsx Normal file
View File

@ -0,0 +1,60 @@
'use client'
import { BreadcrumbItem, Breadcrumbs } from '@nextui-org/breadcrumbs'
import { Button } from '@nextui-org/button'
import React from 'react'
export default function EMagazineDetail() {
return (
<div className='w-auto bg-[#E2E2E2] text-black'>
<div className='p-1 md:p-5 lg:px-8'>
<div className='font-bold text-xl'>E-Majalah Polri</div>
<div className="pt-2">
<Breadcrumbs color='primary'>
<BreadcrumbItem>Beranda</BreadcrumbItem>
<BreadcrumbItem>E-Majalah Polri</BreadcrumbItem>
<BreadcrumbItem>Judul</BreadcrumbItem>
</Breadcrumbs>
</div>
<div className='pt-5 space-y-4'>
<div className='font-semibold border-b-4 border-red-700 leading-loose'>MAJALAH TRIBRATA NEWS SUMSEL EDISI 33/ VII-IX/2023</div>
<div className='bg-[#FFFFFF] rounded-lg h-[380px] flex items-center justify-center'>
<img src="/emagazine.jpeg" alt="emagazine" className='h-[380px] rounded-md py-1' />
</div>
<div>
<Button
className='w-full bg-[#DD8306] text-sm font-semibold'
>
Download
</Button>
</div>
<div className='bg-[#FFFFFF] rounded-md text-sm font-medium'>
<div className='flex justify-between text-white border-t-2 border-l border-r rounded-t-md border-gray-300 p-3 bg-[#9D9D9D]'>
<div className='w-5/6'>Judul</div>
<div className='w-1/6 text-center border-l border-gray-300'>Keterangan</div>
</div>
<div className='flex justify-between border border-gray-300 p-3'>
<div className='w-5/6'>Download</div>
<div className='w-1/6 text-center border-l border-gray-300'>51</div>
</div>
<div className='flex justify-between border border-gray-300 p-3'>
<div className='w-5/6'>File Size</div>
<div className='w-1/6 text-center border-l border-gray-300'>12,.58MB</div>
</div>
<div className='flex justify-between border border-gray-300 p-3'>
<div className='w-5/6'>Download</div>
<div className='w-1/6 text-center border-l border-gray-300'>10</div>
</div>
<div className='flex justify-between border border-gray-300 p-3'>
<div className='w-5/6'>Created Date</div>
<div className='w-1/6 text-center border-l border-gray-300'>1 Oktober 2024</div>
</div>
<div className='flex justify-between border border-b border-gray-300 p-3 rounded-b-md'>
<div className='w-5/6'>Last Update</div>
<div className='w-1/6 text-center border-l border-gray-300'>1 Oktober 2024</div>
</div>
</div>
</div>
</div>
</div>
)
}

21
components/layout/PPIDAdminLayout.tsx Normal file
View File

@ -0,0 +1,21 @@
"use client";
import React, { Children } from "react";
import PPIDAdminSidebarWrapper from "../navbar/PPIDAdminSidebarWrapper";
import PPIDAdminNavbarWrapper from "../navbar/PPIDAdminNavbarWrapper";
interface Props {
children: React.ReactNode;
pageTitle?: string;
}
export const PPIDAdminLayout = ({ children, pageTitle }: Props) => {
return (
<section className="flex text-black dark:text-white dark:bg-[#0b2948] border-2 border-red-500">
<PPIDAdminSidebarWrapper />
<PPIDAdminNavbarWrapper>
{children}
</PPIDAdminNavbarWrapper>
</section>
);
};

4
components/layout/SatKerLayout.tsx
View File

@ -1,9 +1,7 @@
"use client"; "use client";
import React from "react"; import React from "react";
import FooterPPID from "../Portal PPID/FooterPPID";
import NavbarPPID from "../navbar/NavbarPPID";
import NavbarSatker from "../navbar/NavbarSatker";
import FooterSatker from "../navbar/FooterSatker"; import FooterSatker from "../navbar/FooterSatker";
import NavbarSatker from "../navbar/NavbarSatker";
interface Props { interface Props {
children: React.ReactNode; children: React.ReactNode;

54
components/navbar/PPIDAdminNavbarWrapper.tsx Normal file
View File

@ -0,0 +1,54 @@
import { Navbar, NavbarBrand, NavbarContent, NavbarItem } from '@nextui-org/navbar';
import { Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
import Link from 'next/link';
import React, { Children } from 'react'
import { ThemeSwitch } from '../theme-switch';
interface Props {
children: React.ReactNode;
pageTitle?: string;
pageSubTitle?: string;
pageSubSubTitle?: string;
mainHref?: any;
subHref?: any;
}
export default function PPIDAdminNavbarWrapper({ children, pageTitle, pageSubTitle, pageSubSubTitle, mainHref, subHref }: Props) {
return (
<div className=' relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden h-screen'>
<Navbar className='w-full bg-slate-100 dark:bg-[#0b2948]'
isBordered
classNames={{
wrapper: "w-full max-w-full"
}}>
<NavbarContent as="div" justify="end">
<Dropdown placement="bottom-end">
<DropdownTrigger>
<Avatar
isBordered
as="button"
className="transition-transform"
color="secondary"
name="Jason Hughes"
size="sm"
src="https://i.pravatar.cc/150?u=a042581f4e29026704d"
/>
</DropdownTrigger>
<DropdownMenu aria-label="Profile Actions" variant="flat">
<DropdownItem key="profile" className="h-14 gap-2">
<p className="font-semibold">Signed in as</p>
<p className="font-semibold">zoey@example.com</p>
</DropdownItem>
<DropdownItem key="settings">My Settings</DropdownItem>
<DropdownItem key="logout" color="danger">
Log Out
</DropdownItem>
<DropdownItem key="theme"><ThemeSwitch /> </DropdownItem>
</DropdownMenu>
</Dropdown>
</NavbarContent>
</Navbar>
{children}
</div>
)
}

9
components/navbar/PPIDAdminSidebarWrapper.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
export default function PPIDAdminSidebarWrapper() {
return (
<aside className='w-[300px] rounded-r-xl h-screen shadow-lg border bg-slate-100 dark:bg-[#0b2948]'>
Sidebar
</aside>
)
}

7
components/sidebar/PPIDAdminSidebar.tsx Normal file
View File

@ -0,0 +1,7 @@
import React from 'react'
export default function PPIDAdminSidebar() {
return (
<div>tes</div>
)
}

10
components/table/tabel-emajalah-polri.tsx
View File

@ -64,14 +64,14 @@ export default function ListEnewsPolri() {
} }
] ]
const animals = [ const category = [
{ label: "Title", value: "title" }, { label: "Title", value: "title" },
{ label: "Date", value: "date" }, { label: "Date", value: "date" },
{ label: "Created At", value: "createdAt" }, { label: "Created At", value: "createdAt" },
]; ];
return ( return (
<div className='md:flex '> <div className='md:flex '>
<div className='w-auto bg-[#E2E2E2] md:w-[70%] text-black'> <div className='w-auto bg-[#E2E2E2] md:w-2/3 lg:w-[75%] text-black'>
<div className='p-1 md:p-5 lg:p-8'> <div className='p-1 md:p-5 lg:p-8'>
<div className='font-bold text-xl'>E-Majalah Polri</div> <div className='font-bold text-xl'>E-Majalah Polri</div>
<div className="pt-2"> <div className="pt-2">
@ -109,7 +109,7 @@ export default function ListEnewsPolri() {
// onChange={onChangeFilterEnterprising} // onChange={onChangeFilterEnterprising}
> >
<SelectSection > <SelectSection >
{animals.map((list: any) => ( {category.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem> <SelectItem key={list.id}>{list.label}</SelectItem>
))} ))}
</SelectSection> </SelectSection>
@ -139,7 +139,7 @@ export default function ListEnewsPolri() {
// onChange={onChangeFilterEnterprising} // onChange={onChangeFilterEnterprising}
> >
<SelectSection > <SelectSection >
{animals.map((list: any) => ( {category.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem> <SelectItem key={list.id}>{list.label}</SelectItem>
))} ))}
</SelectSection> </SelectSection>
@ -178,7 +178,7 @@ export default function ListEnewsPolri() {
</div> </div>
</div> </div>
<div className='w-auto md:w-[30%]'> <div className='w-auto md:w-1/3 lg:w-[25%]'>
<PPIDSidebar /> <PPIDSidebar />
</div> </div>
</div> </div>

2
debug.log Normal file
View File

@ -0,0 +1,2 @@
[0303/221019.644:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
[0303/221019.882:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)

BIN
public/assets/satker/PERBAIKAN MULTIPOOL.docx Normal file
View File

Binary file not shown.

BIN
public/emagazine.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 292 KiB