61 lines
3.4 KiB
TypeScript
61 lines
3.4 KiB
TypeScript
'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>
|
|
)
|
|
}
|