Release 2025-05-19
This commit is contained in:
pluja
@@ -1,616 +0,0 @@
|
||||
---
|
||||
import { ServiceVisibility, VerificationStatus, type Prisma } from '@prisma/client'
|
||||
import { z } from 'astro/zod'
|
||||
import { Icon } from 'astro-icon/components'
|
||||
import { Image } from 'astro:assets'
|
||||
|
||||
import defaultImage from '../../../assets/fallback-service-image.jpg'
|
||||
import SortArrowIcon from '../../../components/SortArrowIcon.astro'
|
||||
import { getKycLevelInfo } from '../../../constants/kycLevels'
|
||||
import { getVerificationStatusInfo } from '../../../constants/verificationStatus'
|
||||
import BaseLayout from '../../../layouts/BaseLayout.astro'
|
||||
import { cn } from '../../../lib/cn'
|
||||
import { zodParseQueryParamsStoringErrors } from '../../../lib/parseUrlFilters'
|
||||
import { prisma } from '../../../lib/prisma'
|
||||
|
||||
const { data: filters } = zodParseQueryParamsStoringErrors(
|
||||
{
|
||||
search: z.string().optional(),
|
||||
verificationStatus: z.nativeEnum(VerificationStatus).optional(),
|
||||
visibility: z.nativeEnum(ServiceVisibility).optional(),
|
||||
sort: z.enum(['name', 'createdAt', 'overallScore', 'verificationRequests']).default('name'),
|
||||
order: z.enum(['asc', 'desc']).default('asc'),
|
||||
page: z.coerce.number().int().positive().optional().default(1),
|
||||
},
|
||||
Astro
|
||||
)
|
||||
|
||||
const itemsPerPage = 20
|
||||
|
||||
const sortProperty = filters.sort
|
||||
const sortDirection = filters.order
|
||||
|
||||
let orderBy: Prisma.ServiceOrderByWithRelationInput
|
||||
|
||||
switch (sortProperty) {
|
||||
case 'verificationRequests':
|
||||
orderBy = { verificationRequests: { _count: sortDirection } }
|
||||
break
|
||||
case 'createdAt': // createdAt can be ambiguous without a specific direction
|
||||
case 'name':
|
||||
case 'overallScore':
|
||||
orderBy = { [sortProperty]: sortDirection }
|
||||
break
|
||||
default:
|
||||
orderBy = { name: 'asc' } // Default sort
|
||||
}
|
||||
|
||||
const whereClause: Prisma.ServiceWhereInput = {
|
||||
...(filters.search
|
||||
? {
|
||||
OR: [
|
||||
{ name: { contains: filters.search, mode: 'insensitive' } },
|
||||
{ description: { contains: filters.search, mode: 'insensitive' } },
|
||||
{ serviceUrls: { has: filters.search } },
|
||||
{ tosUrls: { has: filters.search } },
|
||||
{ onionUrls: { has: filters.search } },
|
||||
{ i2pUrls: { has: filters.search } },
|
||||
],
|
||||
}
|
||||
: {}),
|
||||
verificationStatus: filters.verificationStatus ?? undefined,
|
||||
serviceVisibility: filters.visibility ?? undefined,
|
||||
}
|
||||
|
||||
const totalServicesCount = await Astro.locals.banners.try(
|
||||
'Error counting services',
|
||||
async () => prisma.service.count({ where: whereClause }),
|
||||
0
|
||||
)
|
||||
|
||||
const totalPages = Math.ceil(totalServicesCount / itemsPerPage)
|
||||
const validPage = Math.max(1, Math.min(filters.page, totalPages || 1))
|
||||
const skip = (validPage - 1) * itemsPerPage
|
||||
|
||||
const services = await Astro.locals.banners.try(
|
||||
'Error fetching services',
|
||||
async () =>
|
||||
prisma.service.findMany({
|
||||
where: whereClause,
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
slug: true,
|
||||
description: true,
|
||||
kycLevel: true,
|
||||
overallScore: true,
|
||||
privacyScore: true,
|
||||
trustScore: true,
|
||||
verificationStatus: true,
|
||||
imageUrl: true,
|
||||
serviceUrls: true,
|
||||
tosUrls: true,
|
||||
onionUrls: true,
|
||||
i2pUrls: true,
|
||||
serviceVisibility: true,
|
||||
createdAt: true,
|
||||
categories: {
|
||||
select: {
|
||||
id: true,
|
||||
name: true,
|
||||
icon: true,
|
||||
},
|
||||
},
|
||||
attributes: {
|
||||
include: {
|
||||
attribute: true,
|
||||
},
|
||||
},
|
||||
_count: {
|
||||
select: {
|
||||
verificationRequests: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
orderBy,
|
||||
take: itemsPerPage,
|
||||
skip,
|
||||
}),
|
||||
[]
|
||||
)
|
||||
|
||||
const servicesWithInfo = services.map((service) => {
|
||||
const verificationStatusInfo = getVerificationStatusInfo(service.verificationStatus)
|
||||
const kycLevelInfo = getKycLevelInfo(String(service.kycLevel))
|
||||
|
||||
return {
|
||||
...service,
|
||||
verificationStatusInfo,
|
||||
kycLevelInfo,
|
||||
kycColor:
|
||||
service.kycLevel === 0
|
||||
? '22, 163, 74' // green-600
|
||||
: service.kycLevel === 1
|
||||
? '180, 83, 9' // amber-700
|
||||
: service.kycLevel === 2
|
||||
? '220, 38, 38' // red-600
|
||||
: service.kycLevel === 3
|
||||
? '185, 28, 28' // red-700
|
||||
: service.kycLevel === 4
|
||||
? '153, 27, 27' // red-800
|
||||
: '107, 114, 128', // gray-500 fallback
|
||||
formattedDate: new Date(service.createdAt).toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
}),
|
||||
}
|
||||
})
|
||||
|
||||
const makeSortUrl = (slug: NonNullable<(typeof filters)['sort']>) => {
|
||||
const newOrder = filters.sort === slug && filters.order === 'asc' ? 'desc' : 'asc'
|
||||
const searchParams = new URLSearchParams(Astro.url.search)
|
||||
searchParams.set('sort', slug)
|
||||
searchParams.set('order', newOrder)
|
||||
return `/admin/services?${searchParams.toString()}`
|
||||
}
|
||||
|
||||
const getPaginationUrl = (pageNum: number) => {
|
||||
const url = new URL(Astro.url)
|
||||
url.searchParams.set('page', pageNum.toString())
|
||||
return url.toString()
|
||||
}
|
||||
|
||||
const truncate = (text: string, length: number) => {
|
||||
if (text.length <= length) return text
|
||||
return text.substring(0, length) + '...'
|
||||
}
|
||||
---
|
||||
|
||||
<BaseLayout pageTitle="Services Admin" widthClassName="max-w-screen-xl">
|
||||
<div class="mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between">
|
||||
<h1 class="font-title text-2xl font-bold text-white">Service Management</h1>
|
||||
<div class="mt-2 flex items-center gap-4 sm:mt-0">
|
||||
<span class="text-sm text-zinc-400">{totalServicesCount} services</span>
|
||||
<a
|
||||
href="/admin/services/new"
|
||||
class="inline-flex items-center gap-2 rounded-md bg-green-600 px-4 py-2 text-sm font-medium text-white hover:bg-green-700 focus:ring-2 focus:ring-green-500 focus:ring-offset-2 focus:outline-none"
|
||||
>
|
||||
<Icon name="ri:add-line" class="size-4" />
|
||||
<span>New Service</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search and Filters -->
|
||||
<div class="mb-6 rounded-lg border border-zinc-700 bg-zinc-800/50 p-4 shadow-lg">
|
||||
<form method="GET" class="grid gap-3 md:grid-cols-2 lg:grid-cols-5" autocomplete="off">
|
||||
<div class="lg:col-span-2">
|
||||
<label for="search" class="block text-xs font-medium text-zinc-400">Search</label>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<input
|
||||
type="text"
|
||||
name="search"
|
||||
id="search"
|
||||
value={filters.search}
|
||||
placeholder="Search by name, description, URL..."
|
||||
class="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 placeholder-zinc-500 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="visibility" class="block text-xs font-medium text-zinc-400">Visibility</label>
|
||||
<select
|
||||
name="visibility"
|
||||
id="visibility"
|
||||
class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
||||
>
|
||||
<option value="">All Visibilities</option>
|
||||
{
|
||||
Object.values(ServiceVisibility).map((status) => (
|
||||
<option value={status} selected={filters.visibility === status}>
|
||||
{status}
|
||||
</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="verificationStatus" class="block text-xs font-medium text-zinc-400">Status</label>
|
||||
<select
|
||||
name="verificationStatus"
|
||||
id="verificationStatus"
|
||||
class="mt-1 w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
||||
>
|
||||
<option value="">All Statuses</option>
|
||||
{
|
||||
Object.values(VerificationStatus).map((status) => (
|
||||
<option value={status} selected={filters.verificationStatus === status}>
|
||||
{status}
|
||||
</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="sort" class="block text-xs font-medium text-zinc-400">Sort By</label>
|
||||
<div class="mt-1 flex rounded-md shadow-sm">
|
||||
<select
|
||||
name="sort"
|
||||
id="sort"
|
||||
class="w-full rounded-md border border-zinc-700 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 focus:border-blue-500 focus:ring-blue-500 focus:outline-none"
|
||||
>
|
||||
{
|
||||
['name', 'createdAt', 'overallScore', 'verificationRequests'].map((option) => (
|
||||
<option value={option} selected={filters.sort === option}>
|
||||
{option}
|
||||
</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
<button
|
||||
type="submit"
|
||||
class="ml-2 inline-flex items-center rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-zinc-900 focus:outline-none"
|
||||
>
|
||||
<Icon name="ri:search-2-line" class="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Services Table -->
|
||||
<div class="rounded-lg border border-zinc-700 bg-zinc-800/50 shadow-lg">
|
||||
<div class="sticky top-0 z-10 border-b border-zinc-700 bg-zinc-800/90 px-4 py-3 backdrop-blur-sm">
|
||||
<h2 class="font-title font-semibold text-blue-400">Services List</h2>
|
||||
<div class="mt-1 text-xs text-zinc-400 md:hidden">
|
||||
<span>Scroll horizontally to see more →</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="scrollbar-thin max-w-full overflow-x-auto">
|
||||
<div class="min-w-[750px]">
|
||||
<table class="w-full divide-y divide-zinc-700">
|
||||
<thead class="bg-zinc-900/30">
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="w-[30%] px-4 py-3 text-left text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
||||
>
|
||||
<a href={makeSortUrl('name')} class="flex items-center hover:text-zinc-200">
|
||||
Service <SortArrowIcon active={filters.sort === 'name'} sortOrder={filters.order} />
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="w-[8%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
||||
>KYC</th
|
||||
>
|
||||
<th
|
||||
scope="col"
|
||||
class="w-[8%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
||||
>
|
||||
<a
|
||||
href={makeSortUrl('overallScore')}
|
||||
class="flex items-center justify-center hover:text-zinc-200"
|
||||
>
|
||||
Score <SortArrowIcon active={filters.sort === 'overallScore'} sortOrder={filters.order} />
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="w-[14%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
||||
>Status</th
|
||||
>
|
||||
<th
|
||||
scope="col"
|
||||
class="w-[10%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
||||
>
|
||||
<a
|
||||
href={makeSortUrl('verificationRequests')}
|
||||
class="flex items-center justify-center hover:text-zinc-200"
|
||||
>
|
||||
<span class="hidden sm:inline">Requests</span>
|
||||
<span class="sm:hidden">Reqs</span>
|
||||
<SortArrowIcon active={filters.sort === 'verificationRequests'} sortOrder={filters.order} />
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="w-[14%] px-4 py-3 text-center text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
||||
>
|
||||
<a
|
||||
href={makeSortUrl('createdAt')}
|
||||
class="flex items-center justify-center hover:text-zinc-200"
|
||||
>
|
||||
Date <SortArrowIcon active={filters.sort === 'createdAt'} sortOrder={filters.order} />
|
||||
</a>
|
||||
</th>
|
||||
<th
|
||||
scope="col"
|
||||
class="w-[12%] px-4 py-3 text-right text-xs font-medium tracking-wider text-zinc-400 uppercase"
|
||||
>Actions</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="divide-y divide-zinc-700 bg-zinc-800/10">
|
||||
{
|
||||
servicesWithInfo.map((service) => (
|
||||
<tr id={`service-${service.id}`} class="group hover:bg-zinc-700/30">
|
||||
<td class="px-4 py-3">
|
||||
<div class="flex items-center space-x-3">
|
||||
<div class="h-10 w-10 flex-shrink-0">
|
||||
{service.imageUrl ? (
|
||||
<Image
|
||||
src={service.imageUrl}
|
||||
alt={service.name}
|
||||
width={40}
|
||||
height={40}
|
||||
class="h-10 w-10 rounded-md object-cover"
|
||||
/>
|
||||
) : (
|
||||
<Image
|
||||
src={defaultImage}
|
||||
alt={service.name}
|
||||
width={40}
|
||||
height={40}
|
||||
class="h-10 w-10 rounded-md object-cover"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="text-sm font-medium text-zinc-200">{service.name}</div>
|
||||
<div class="truncate text-xs text-zinc-400" title={service.description}>
|
||||
{truncate(service.description, 45)}
|
||||
</div>
|
||||
<div class="mt-1 flex flex-wrap gap-1">
|
||||
{service.categories.slice(0, 2).map((category) => (
|
||||
<span class="text-2xs inline-flex items-center rounded-sm bg-zinc-700/60 px-1.5 py-0.5 text-zinc-300">
|
||||
<Icon name={category.icon} class="mr-0.5 size-2.5" />
|
||||
{category.name}
|
||||
</span>
|
||||
))}
|
||||
{service.categories.length > 2 && (
|
||||
<span class="text-2xs inline-flex items-center rounded-sm bg-zinc-700/60 px-1.5 py-0.5 text-zinc-300">
|
||||
+{service.categories.length - 2}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span
|
||||
class="inline-flex h-6 w-6 items-center justify-center rounded-md text-xs font-bold"
|
||||
style={`background-color: rgba(${service.kycColor}, 0.3); color: rgb(${service.kycColor})`}
|
||||
title={service.kycLevelInfo.name}
|
||||
>
|
||||
{service.kycLevel}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<span
|
||||
class={cn('text-sm font-medium', {
|
||||
'text-green-400': service.overallScore >= 7,
|
||||
'text-yellow-400': service.overallScore >= 4 && service.overallScore < 7,
|
||||
'text-red-400': service.overallScore < 4,
|
||||
})}
|
||||
>
|
||||
{service.overallScore}
|
||||
</span>
|
||||
<div class="mt-0.5 grid grid-cols-2 gap-0.5">
|
||||
<span title="Privacy Score" class="text-2xs font-medium text-blue-400">
|
||||
{service.privacyScore}
|
||||
</span>
|
||||
<span title="Trust Score" class="text-2xs font-medium text-yellow-400">
|
||||
{service.trustScore}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span
|
||||
class={cn('inline-flex items-center rounded-md px-2 py-1 text-xs font-medium', {
|
||||
'bg-green-500/20 text-green-400':
|
||||
service.verificationStatus === 'VERIFICATION_SUCCESS',
|
||||
'bg-red-500/20 text-red-400': service.verificationStatus === 'VERIFICATION_FAILED',
|
||||
'bg-blue-500/20 text-blue-400': service.verificationStatus === 'APPROVED',
|
||||
'bg-gray-500/20 text-gray-400':
|
||||
service.verificationStatus === 'COMMUNITY_CONTRIBUTED',
|
||||
})}
|
||||
>
|
||||
<Icon name={service.verificationStatusInfo.icon} class="mr-1 size-3" />
|
||||
<span class="hidden sm:inline">{service.verificationStatus}</span>
|
||||
<span class="sm:hidden">{service.verificationStatus.substring(0, 4)}</span>
|
||||
</span>
|
||||
<div class="text-2xs mt-1 font-medium text-zinc-500">
|
||||
<span
|
||||
class={cn('text-2xs inline-flex items-center rounded-sm px-1.5 py-0.5', {
|
||||
'bg-green-900/30 text-green-300': service.serviceVisibility === 'PUBLIC',
|
||||
'bg-yellow-900/30 text-yellow-300': service.serviceVisibility === 'UNLISTED',
|
||||
'bg-red-900/30 text-red-300': service.serviceVisibility === 'HIDDEN',
|
||||
})}
|
||||
>
|
||||
{service.serviceVisibility}
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center">
|
||||
<span class="inline-flex items-center rounded-full bg-orange-900/30 px-2.5 py-0.5 text-xs text-orange-400">
|
||||
{service._count.verificationRequests}
|
||||
</span>
|
||||
</td>
|
||||
<td class="px-4 py-3 text-center text-xs text-zinc-400">{service.formattedDate}</td>
|
||||
<td class="px-4 py-3 text-right">
|
||||
<div class="flex justify-end space-x-2">
|
||||
<a
|
||||
href={`/service/${service.slug}`}
|
||||
target="_blank"
|
||||
class="inline-flex items-center rounded-md border border-zinc-600 bg-zinc-800 px-2 py-1 text-xs text-zinc-300 transition-colors hover:bg-zinc-700"
|
||||
title="View on site"
|
||||
>
|
||||
<Icon name="ri:external-link-line" class="size-3.5" />
|
||||
</a>
|
||||
<a
|
||||
href={`/admin/services/${service.slug}/edit`}
|
||||
class="inline-flex items-center rounded-md border border-blue-500/50 bg-blue-500/20 px-2 py-1 text-xs text-blue-400 transition-colors hover:bg-blue-500/30"
|
||||
>
|
||||
Edit
|
||||
</a>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pagination controls */}
|
||||
{
|
||||
totalPages > 1 && (
|
||||
<div class="mt-6 flex flex-wrap items-center justify-between gap-4">
|
||||
<div class="text-sm text-zinc-500">
|
||||
Showing {services.length > 0 ? skip + 1 : 0} to {Math.min(skip + itemsPerPage, totalServicesCount)}{' '}
|
||||
of {totalServicesCount} services
|
||||
</div>
|
||||
|
||||
<nav class="inline-flex rounded-md shadow-sm" aria-label="Pagination">
|
||||
{validPage > 1 && (
|
||||
<a
|
||||
href={getPaginationUrl(validPage - 1)}
|
||||
class="inline-flex items-center rounded-l-md border border-zinc-700 bg-zinc-800 px-2 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
|
||||
>
|
||||
<Icon name="ri:arrow-left-s-line" class="size-5" />
|
||||
<span class="sr-only">Previous</span>
|
||||
</a>
|
||||
)}
|
||||
|
||||
{validPage > 3 && (
|
||||
<a
|
||||
href={getPaginationUrl(1)}
|
||||
class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
|
||||
>
|
||||
1
|
||||
</a>
|
||||
)}
|
||||
|
||||
{validPage > 4 && (
|
||||
<span class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-500">
|
||||
...
|
||||
</span>
|
||||
)}
|
||||
|
||||
{validPage > 2 && (
|
||||
<a
|
||||
href={getPaginationUrl(validPage - 2)}
|
||||
class="hidden items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700 md:inline-flex"
|
||||
>
|
||||
{validPage - 2}
|
||||
</a>
|
||||
)}
|
||||
|
||||
{validPage > 1 && (
|
||||
<a
|
||||
href={getPaginationUrl(validPage - 1)}
|
||||
class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
|
||||
>
|
||||
{validPage - 1}
|
||||
</a>
|
||||
)}
|
||||
|
||||
<a
|
||||
href={getPaginationUrl(validPage)}
|
||||
class="inline-flex items-center border border-blue-500 bg-blue-500/20 px-3 py-1 text-sm font-medium text-blue-400"
|
||||
aria-current="page"
|
||||
>
|
||||
{validPage}
|
||||
</a>
|
||||
|
||||
{validPage < totalPages && (
|
||||
<a
|
||||
href={getPaginationUrl(validPage + 1)}
|
||||
class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
|
||||
>
|
||||
{validPage + 1}
|
||||
</a>
|
||||
)}
|
||||
|
||||
{validPage < totalPages - 1 && (
|
||||
<a
|
||||
href={getPaginationUrl(validPage + 2)}
|
||||
class="hidden items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700 md:inline-flex"
|
||||
>
|
||||
{validPage + 2}
|
||||
</a>
|
||||
)}
|
||||
|
||||
{validPage < totalPages - 3 && (
|
||||
<span class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-500">
|
||||
...
|
||||
</span>
|
||||
)}
|
||||
|
||||
{validPage < totalPages - 2 && (
|
||||
<a
|
||||
href={getPaginationUrl(totalPages)}
|
||||
class="inline-flex items-center border border-zinc-700 bg-zinc-800 px-3 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
|
||||
>
|
||||
{totalPages}
|
||||
</a>
|
||||
)}
|
||||
|
||||
{validPage < totalPages && (
|
||||
<a
|
||||
href={getPaginationUrl(validPage + 1)}
|
||||
class="inline-flex items-center rounded-r-md border border-zinc-700 bg-zinc-800 px-2 py-1 text-sm font-medium text-zinc-300 hover:bg-zinc-700"
|
||||
>
|
||||
<Icon name="ri:arrow-right-s-line" class="size-5" />
|
||||
<span class="sr-only">Next</span>
|
||||
</a>
|
||||
)}
|
||||
</nav>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</BaseLayout>
|
||||
|
||||
<style>
|
||||
/* Base CSS text size utility for super small text */
|
||||
.text-2xs {
|
||||
font-size: 0.6875rem;
|
||||
line-height: 1rem;
|
||||
}
|
||||
|
||||
/* Scrollbar styling for better mobile experience */
|
||||
.scrollbar-thin::-webkit-scrollbar {
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-track {
|
||||
background: rgba(30, 41, 59, 0.2);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb {
|
||||
background: rgba(75, 85, 99, 0.5);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.scrollbar-thin::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(100, 116, 139, 0.6);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.scrollbar-thin {
|
||||
scrollbar-width: thin;
|
||||
-webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user