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

feat: list news

This commit is contained in:
amd123 2024-03-07 10:33:43 +07:00
parent 885e718c58
commit a2cc9add14
10 changed files with 288 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/admin/layout.tsx Normal file
View File

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

46
app/admin/page.tsx Normal file
View File

@ -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>
)
}

13
app/news/all/layout.tsx Normal file
View File

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

8
app/news/all/page.tsx Normal file
View File

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

121
components/detail/ListNews.tsx Normal file
View File

@ -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>
)
}

22
components/layout/HumasAdminLayout.tsx Normal file
View File

@ -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>
)
}

4
components/layout/PPIDAdminLayout.tsx
View File

@ -1,7 +1,7 @@
"use client";
import React, { Children } from "react";
import PPIDAdminSidebarWrapper from "../navbar/PPIDAdminSidebarWrapper";
import React from "react";
import PPIDAdminNavbarWrapper from "../navbar/PPIDAdminNavbarWrapper";
import PPIDAdminSidebarWrapper from "../navbar/PPIDAdminSidebarWrapper";
interface Props {
children: React.ReactNode;

50
components/navbar/HumasNavbarWrapper.tsx Normal file
View File

@ -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>
)
}

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

@ -0,0 +1,9 @@
import React from 'react'
export default function HumasSidebarWrapper() {
return (
<aside className='w-[250px] h-screen bg-[#070F2B]'>
Sidebar
</aside>
)
}

4
debug.log
View File

@ -1,2 +1,6 @@
[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)
[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)