ផ្នែកខាងក្រោមនៃទំព័រគ្រប់គ្រង ជាផ្នែកដែលបង្ហាញទិន្នន័យនៃការផ្សាយ (post) ឬទិន្នន័យផ្សេងៗទៀតទាក់ទងនឹងទំព័រណាមួយ។ ដោយហេតុថា ទំព័រគ្រប់គ្រងនឹងត្រូវយកទៅប្រើជាគំរូទំព័រគ្រឹះសំរាប់ទំព័រដទៃទៀត ដូចនេះទិន្នន័យត្រូវបង្ហាញនៅផ្នែកខាងក្រោមនៃទំព័រគ្រប់គ្រង នឹងត្រូវប្រែប្រួលទៅតាមប្រភេទនៃទំព័រនិមួយៗ។
<!--src/layouts/admin/Bottom.astro-->
---
const total = 0
const videos = true
---
<section class="max-w-5xl mx-auto md:px-0 px-2">
<div class="text-center bg-teal-100 mt-2 py-2">
ទាំងអស់មានចំនួនៈ {total}
</div>
<ul id="item-listing" class="grid md:grid-cols-2 grid-cols-1 gap-2 py-2 text-gray-600">
{[...Array(4).keys()].map((item, i)=>(
<li class="bg-teal-100 grid grid-cols-[20%_60%_15%] gap-x-2 items-center group">
<a class="relative pt-[56.25%] overflow-hidden" href="/post/:id">
<img class="absolute top-0 left-0 w-full min-h-full"
src="https://i.imgur.com/0uhZ49R.png"
/>
{videos &&
<img class="absolute top-1/2 left-1/2 min-h-auto w-1/4 -translate-x-1/2 -translate-y-1/2"
src="/images/play.png"
/>
}
</a>
<div class="truncate">
<a href="/post/:id">
ចំណងជើង
</a>
<div>02/10/2023</div>
</div>
<div class="flex flex-row">
<a class="block w-1/2" href="/admin/edit/:id">
<img class="invisible group-hover:visible" src="/images/edit.png" />
</a>
<a id="" class="delete block w-1/2" href=`/admin/delete/${i}`>
<img class="invisible group-hover:visible" src="/images/delete.png" />
</a>
</div>
</li>
))}
<script>
$('#item-listing .delete').on('click', function () {
return confirm('តើពិតជាចង់លុប?');
});
</script>
</ul>
<div class="bg-teal-100 py-2 mb-5">
<img class="mx-auto hover:opacity-75 cursor-pointer" src="/images/load-more.png" />
</div>
</section>
<!--src/layouts/admin/Base.astro-->
---
import "../../styles/global.css"
const { pageTitle="ទំព័រគ្រឹះ" } = Astro.props
import Footer from "../Footer.astro"
import Header from "./Header.astro"
import Menu from "./Menu.astro"
import Bottom from "./Bottom.astro"
---
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
<link rel="icon" href="/images/siteLogo.png" />
<link href="/fonts/setup.css" rel="stylesheet" />
<script is:inline src="/scripts/jquery.js"></script>
</head>
<body class="text-sm leading-normal">
<Header pageTitle={pageTitle}/>
<div class="max-w-5xl mx-auto flex md:flex-row flex-col mt-5 md:px-0 px-2">
<Menu/>
<slot/>
</div>
<Bottom/>
<Footer/>
</body>
</html>
