Files
kycnotme/web/src/pages/admin/index.astro
2025-05-27 18:00:08 +00:00

133 lines
3.1 KiB
Plaintext

---
import { Icon } from 'astro-icon/components'
import { DATABASE_UI_URL, LOGS_UI_URL } from 'astro:env/server'
import BaseLayout from '../../layouts/BaseLayout.astro'
import { cn } from '../../lib/cn'
import type { ComponentProps } from 'astro/types'
type AdminLink = {
icon: ComponentProps<typeof Icon>['name']
title: string
href: string
classNames: {
base?: string
}
}
const adminLinks: AdminLink[] = [
{
icon: 'ri:box-3-line',
title: 'Services',
href: '/admin/services',
classNames: {
base: 'text-green-300',
},
},
{
icon: 'ri:user-3-line',
title: 'Users',
href: '/admin/users',
classNames: {
base: 'text-red-300',
},
},
{
icon: 'ri:chat-4-line',
title: 'Comments',
href: '/admin/comments',
classNames: {
base: 'text-yellow-300',
},
},
{
icon: 'ri:lightbulb-line',
title: 'Suggestions',
href: '/admin/service-suggestions',
classNames: {
base: 'text-purple-300',
},
},
{
icon: 'ri:price-tag-3-line',
title: 'Attributes',
href: '/admin/attributes',
classNames: {
base: 'text-blue-300',
},
},
{
icon: 'ri:megaphone-line',
title: 'Announcements',
href: '/admin/announcements',
classNames: {
base: 'text-pink-300',
},
},
{
icon: 'ri:rocket-2-line',
title: 'Releases',
href: '/admin/releases',
classNames: {
base: 'text-orange-300',
},
},
{
icon: 'ri:database-2-line',
title: 'Database',
href: DATABASE_UI_URL,
classNames: {
base: 'text-gray-300',
},
},
...(LOGS_UI_URL
? [
{
icon: 'ri:menu-search-line',
title: 'Logs',
href: LOGS_UI_URL,
classNames: {
base: 'text-cyan-300',
},
},
]
: []),
]
---
<BaseLayout pageTitle="Admin Dashboard" widthClassName="max-w-screen-xl">
<h1 class="font-title text-day-100 mb-8 text-3xl font-bold">
<Icon name="ri:home-gear-line" class="me-1 inline-block size-10 align-[-0.35em]" />
Admin Dashboard
</h1>
<nav>
<ol class="grid grid-cols-[repeat(auto-fill,minmax(calc(var(--spacing)*40),1fr))] gap-4">
{
adminLinks
.filter((link) => link.href)
.map((link) => (
<li
class={cn(
'group ease-out-back transition-transform duration-250 hover:-translate-y-0.5 hover:scale-105',
link.classNames.base
)}
>
<a
href={link.href}
class="flex min-h-24 flex-col items-center justify-around rounded-lg border border-current/4 bg-current/3 py-3 text-center transition-all duration-250 group-hover:border-current/10 group-hover:bg-current/10 group-hover:shadow-xl"
>
<Icon
name={link.icon}
class="size-8 text-current opacity-50 transition-opacity duration-250 group-hover:opacity-100"
/>
<span class="font-title text-xl leading-none font-semibold text-current">{link.title}</span>
</a>
</li>
))
}
</ol>
</nav>
</BaseLayout>