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'
export default function PPIDAdminPage() {
export default function tes() {
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 (
<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>
@ -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'>
{eNews.map((data: any) => (
<div key={data.id} className='h-auto md:h-[200px] w-[274px]'>
<Card className='text-white'
isFooterBlurred
>
<Image
alt="Woman listing to music"
className="object-cover h-full"
height={100}
src={data.img}
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>
</Card>
<Link href={`/e-majalah-polri/detail/${data.id}`}>
<Card className='text-white'
isFooterBlurred
>
<Image
alt="Woman listing to music"
className="object-cover h-full"
height={100}
src={data.img}
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>
</Card>
</Link>
</div>
))}
</div>

2
components/detail/DetailPage.tsx
View File

@ -4,7 +4,7 @@ import Comment from './Comment'
import SidebarDetail from '../page/SidebarDetail'
import RelatedNews from '../page/RelatedNews'
export default function DetailPage() {
export default function NewsDetailPage() {
return (
<>
<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";
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 NavbarSatker from "../navbar/NavbarSatker";
interface Props {
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: "Date", value: "date" },
{ label: "Created At", value: "createdAt" },
];
return (
<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='font-bold text-xl'>E-Majalah Polri</div>
<div className="pt-2">
@ -109,7 +109,7 @@ export default function ListEnewsPolri() {
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
{category.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
@ -139,7 +139,7 @@ export default function ListEnewsPolri() {
// onChange={onChangeFilterEnterprising}
>
<SelectSection >
{animals.map((list: any) => (
{category.map((list: any) => (
<SelectItem key={list.id}>{list.label}</SelectItem>
))}
</SelectSection>
@ -178,7 +178,7 @@ export default function ListEnewsPolri() {
</div>
</div>
<div className='w-auto md:w-[30%]'>
<div className='w-auto md:w-1/3 lg:w-[25%]'>
<PPIDSidebar />
</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