feat: list news
This commit is contained in:
amd123
parent
885e718c58
commit
a2cc9add14
|
|
@ -0,0 +1,13 @@
|
||||||
|
import HumasAdminLayout from "@/components/layout/HumasAdminLayout";
|
||||||
|
|
||||||
|
export default function HumasLayoutAdmin({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<HumasAdminLayout >
|
||||||
|
{children}
|
||||||
|
</HumasAdminLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,46 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export default function AdminHumasPage() {
|
||||||
|
return (
|
||||||
|
<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>1</div>
|
||||||
|
<div>1</div>
|
||||||
|
<div>1</div>
|
||||||
|
<div>1</div>
|
||||||
|
<div>1</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,13 @@
|
||||||
|
import { HumasLayout } from "@/components/layout/HumasLayout";
|
||||||
|
|
||||||
|
export default function AllNewsLayout({
|
||||||
|
children,
|
||||||
|
}: {
|
||||||
|
children: React.ReactNode;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<HumasLayout>
|
||||||
|
{children}
|
||||||
|
</HumasLayout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
import ListNews from '@/components/detail/ListNews'
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export default function ListNewsPage() {
|
||||||
|
return (
|
||||||
|
<ListNews />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,121 @@
|
||||||
|
'use client'
|
||||||
|
import { BreadcrumbItem, Breadcrumbs, Button, Input, Select, SelectItem, SelectSection, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from "@nextui-org/react";
|
||||||
|
import PPIDSidebar from '../Portal PPID/PPIDSidebar';
|
||||||
|
import { EyeFilledIcon, SearchIcon } from '../icons';
|
||||||
|
|
||||||
|
|
||||||
|
export default function ListNews() {
|
||||||
|
const searchInput = (
|
||||||
|
<Input
|
||||||
|
aria-label="Search"
|
||||||
|
className="w-full"
|
||||||
|
classNames={{
|
||||||
|
inputWrapper: "bg-white hover:!bg-gray-100",
|
||||||
|
input: "text-sm",
|
||||||
|
}}
|
||||||
|
labelPlacement="outside"
|
||||||
|
placeholder="Search..."
|
||||||
|
startContent={
|
||||||
|
<SearchIcon className="text-base text-default-400 pointer-events-none flex-shrink-0" />
|
||||||
|
}
|
||||||
|
endContent={
|
||||||
|
<Button size="sm" className="bg-[#DD8306] font-semibold">Cari</Button>
|
||||||
|
}
|
||||||
|
type="search"
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
|
||||||
|
const listNews = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
thumnbnail: '/headernews.png',
|
||||||
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
||||||
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
||||||
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
thumnbnail: '/headernews.png',
|
||||||
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
||||||
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
||||||
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
thumnbnail: '/headernews.png',
|
||||||
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
||||||
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
||||||
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
thumnbnail: '/headernews.png',
|
||||||
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
||||||
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
||||||
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
thumnbnail: '/headernews.png',
|
||||||
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
||||||
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
||||||
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
thumnbnail: '/headernews.png',
|
||||||
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
||||||
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
||||||
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 7,
|
||||||
|
thumnbnail: '/headernews.png',
|
||||||
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
||||||
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
||||||
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 8,
|
||||||
|
thumnbnail: '/headernews.png',
|
||||||
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
||||||
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
||||||
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 9,
|
||||||
|
thumnbnail: '/headernews.png',
|
||||||
|
title: 'Divisi Humas Polri Gelar Bimtek Dan Uji Konsekuensi Informasi Di Maluku Utara',
|
||||||
|
date: "06 Maret, 2024 16:14 HUMAS POLRI",
|
||||||
|
description: "Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic, rerum temporibus qui similique odio ducimus sit iure magnam consequatur dolore corrupti quisquam distinctio possimus et optio neque error earum quod!"
|
||||||
|
},
|
||||||
|
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className=' max-w-7xl self-center text-black'>
|
||||||
|
<Breadcrumbs color="primary" className="pt-5">
|
||||||
|
<BreadcrumbItem>Beranda</BreadcrumbItem>
|
||||||
|
<BreadcrumbItem>Berita</BreadcrumbItem>
|
||||||
|
</Breadcrumbs>
|
||||||
|
<div className="flex-wrap grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 pt-5 place-items-center gap-7">
|
||||||
|
{listNews.map((news) => (
|
||||||
|
<div className="h-[400px] w-[300px] bg-[#eeeeee] text-xs">
|
||||||
|
<div className="h-[50%]">
|
||||||
|
<img src={news.thumnbnail} alt="" className="w-max" />
|
||||||
|
</div>
|
||||||
|
<div className="px-3 py-5">
|
||||||
|
<div className="font-medium">{news.title}</div>
|
||||||
|
<div className="flex pb-2">
|
||||||
|
<div className="text-xs">{news.date}</div>
|
||||||
|
{/* <div>jam</div>
|
||||||
|
<div>creator</div> */}
|
||||||
|
</div>
|
||||||
|
<div className="text-clip">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis est quas soluta deserunt ullam. Sapiente facilis modi vitae. Aspernatur excepturi quo amet omnis laudantium inventore praesentium illum hic reiciendis error.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,22 @@
|
||||||
|
import React from 'react'
|
||||||
|
import HumasSidebarWrapper from '../navbar/HumasSidebarWrapper'
|
||||||
|
import HumasNavbarWrapper from '../navbar/HumasNavbarWrapper'
|
||||||
|
import { ThemeSwitch } from '../theme-switch';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: React.ReactNode;
|
||||||
|
pageTitle?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default function HumasAdminLayout({ children, pageTitle }: Props) {
|
||||||
|
return (
|
||||||
|
// <section className="flex text-black dark:text-white dark:bg-[#0b2948] border-2 border-red-500">
|
||||||
|
<section className="flex ">
|
||||||
|
<HumasSidebarWrapper />
|
||||||
|
<HumasNavbarWrapper>
|
||||||
|
{children}
|
||||||
|
</HumasNavbarWrapper>
|
||||||
|
</section>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
"use client";
|
"use client";
|
||||||
import React, { Children } from "react";
|
import React from "react";
|
||||||
import PPIDAdminSidebarWrapper from "../navbar/PPIDAdminSidebarWrapper";
|
|
||||||
import PPIDAdminNavbarWrapper from "../navbar/PPIDAdminNavbarWrapper";
|
import PPIDAdminNavbarWrapper from "../navbar/PPIDAdminNavbarWrapper";
|
||||||
|
import PPIDAdminSidebarWrapper from "../navbar/PPIDAdminSidebarWrapper";
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
'use client'
|
||||||
|
import { Navbar, NavbarContent } from '@nextui-org/navbar';
|
||||||
|
import { Avatar, Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/react';
|
||||||
|
import React from 'react'
|
||||||
|
import { ThemeSwitch } from '../theme-switch';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
children: React.ReactNode;
|
||||||
|
pageTitle?: string;
|
||||||
|
}
|
||||||
|
export default function HumasNavbarWrapper({ children }: Props) {
|
||||||
|
return (
|
||||||
|
<div className='relative flex flex-col flex-1 overflow-y-auto overflow-x-hidden max-h-screen bg-transparent'>
|
||||||
|
<Navbar className='w-full bg-slate-100 dark:bg-[#16213E]'
|
||||||
|
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>
|
||||||
|
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,9 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
export default function HumasSidebarWrapper() {
|
||||||
|
return (
|
||||||
|
<aside className='w-[250px] h-screen bg-[#070F2B]'>
|
||||||
|
Sidebar
|
||||||
|
</aside>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,2 +1,6 @@
|
||||||
[0303/221019.644:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
|
[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)
|
[0303/221019.882:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
|
||||||
|
[0305/191435.450:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
|
||||||
|
[0305/191435.917:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
|
||||||
|
[0306/181620.653:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
|
||||||
|
[0306/181620.915:ERROR:registration_protocol_win.cc(107)] CreateFile: The system cannot find the file specified. (0x2)
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue