98 lines
6.1 KiB
TypeScript
98 lines
6.1 KiB
TypeScript
import { Button, Card, CardBody, CardFooter, ScrollShadow } from '@nextui-org/react'
|
|
import React from 'react'
|
|
import { EyeIcon } from '../icons'
|
|
import Image from 'next/image'
|
|
|
|
export default function HeaderNews() {
|
|
return (
|
|
<div className='lg:flex items-center text-center bg-black dark:bg-white rounded-md gap-3 p-2'>
|
|
<div className='w-auto lg:w-[25%] p-2 bg-[#020101] text-white rounded-md'>
|
|
<p className='text-lg font-bold h-10'>Berita Terkini</p>
|
|
<ScrollShadow hideScrollBar className=" h-[343px]">
|
|
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#1E1616] rounded-md'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
</ScrollShadow>
|
|
<div className='m-2'>
|
|
<Button
|
|
className='w-full bg-[#DD8306] font-bold rounded-bl-md rounded-br-md focus:outline-none'
|
|
radius='none'
|
|
>
|
|
Lihat Semua
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<div className='w-auto lg:w-[50%]'>
|
|
<Card
|
|
isFooterBlurred
|
|
radius="lg"
|
|
className="border-none"
|
|
>
|
|
<Image
|
|
alt="Woman listing to music"
|
|
className="object-cover"
|
|
height={660}
|
|
src="/headernews.png"
|
|
width={460}
|
|
layout="responsive"
|
|
/>
|
|
<CardFooter className="before:bg-white/10 border-white/20 border-1 overflow-hidden py-1 md:absolute before:rounded-xl rounded-large bottom-1 w-[calc(100%_-_8px)] shadow-small ml-1 z-10">
|
|
<div className='text-white'>
|
|
<p className='text-left font-semibold'>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px] text-left text-sm'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1 text-sm'><EyeIcon />82</p>
|
|
</div>
|
|
</CardFooter>
|
|
</Card>
|
|
</div>
|
|
<div className='w-auto lg:w-[25%] p-2 rounded-md text-white dark:text-black '>
|
|
<div className='text-lg font-bold border-5 border-blue-950 rounded-tr-lg rounded-tl-lg'>
|
|
<img src="/gprheader.png" alt="gpr" className='w-full' />
|
|
</div>
|
|
<div className='overflow-y-scroll h-[343px] border-5 border-blue-950 text-black'>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
<div className='text-xs text-left m-2 p-2 bg-[#FFFFFF] rounded-md border-dashed border-2 border-sky-500'>
|
|
<p>Pelihara Kondusifitas Kamtibmas, Personel Polsek Sayan Sambangi Warganya yang Masih Beraktifitas Pada Malam Hari</p>
|
|
<p className='py-[2px]'>21-07-2023 13:50</p>
|
|
<p className='flex items-center gap-1'><EyeIcon />82</p>
|
|
</div>
|
|
</div>
|
|
<div className=' border-5 border-blue-950 rounded-bl-lg rounded-br-lg'>
|
|
<img src="/gprfooter.png" alt="gpr" className='w-full' />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|