Vercel/src/admin/AdminAppInsightsClient.tsx
2025-02-11 18:06:15 -06:00

105 lines
2.9 KiB
TypeScript

'use client';
import IconGrSync from '@/app-core/IconGrSync';
import Note from '@/components/Note';
import WarningNote from '@/components/WarningNote';
import { dateRangeForPhotos, PhotoDateRange } from '@/photo';
import clsx from 'clsx/lite';
import { HiSparkles } from 'react-icons/hi';
type Recommendation =
'fork' |
'forkBehind' |
'ai' |
'aiRateLimiting';
export default function AdminAppInsightsClient({
recommendations: {
fork,
forkBehind,
ai,
aiRateLimiting,
},
photoStats: {
photosCount,
tagsCount,
camerasCount,
filmSimulationsCount,
lensesCount,
dateRange,
},
debug,
}: {
recommendations: Record<Recommendation, boolean>,
photoStats: {
photosCount: number
tagsCount: number
camerasCount: number
filmSimulationsCount: number
lensesCount: number
dateRange?: PhotoDateRange
},
debug?: boolean,
}) {
const { descriptionWithSpaces } = dateRangeForPhotos(undefined, dateRange);
const renderTitle = (title: string) =>
<div className={clsx(
'text-center uppercase font-bold tracking-wide',
'text-medium',
)}>
{title}
</div>;
return (
<div className={clsx(
'flex flex-col items-center',
'mt-2 mb-6',
)}>
<div className={clsx(
'w-[clamp(400px,80%,1000px)]',
'space-y-4 md:space-y-6',
)}>
{renderTitle('Code Observability')}
{(fork || debug) &&
<Note icon={<IconGrSync />}>
Consider forking this repository in order to
receive new features and fixes
</Note>}
{(forkBehind || debug) &&
<WarningNote>
This fork is 9 commits behind
</WarningNote>}
{renderTitle('Template Recommendations')}
{(ai || debug) && <Note icon={<HiSparkles />}>
Enable AI text generation in the app configuration
</Note>}
{(aiRateLimiting || debug) && <WarningNote>
Consider enabling rate limiting to mitigate AI abuse
</WarningNote>}
{renderTitle('Library Stats')}
<div className={clsx(
'grid grid-cols-2 gap-3 w-full',
'border border-main rounded-md p-6 bg-main shadow-xs',
'uppercase',
)}>
<div className="tracking-wide">Photos</div>
<div className="text-right">{photosCount}</div>
<div className="tracking-wide">Tags</div>
<div className="text-right">{tagsCount}</div>
<div className="tracking-wide">Cameras</div>
<div className="text-right">{camerasCount}</div>
<div className="tracking-wide">Films</div>
<div className="text-right">{filmSimulationsCount}</div>
<div className="tracking-wide">Lenses</div>
<div className="text-right">{lensesCount}</div>
<span className="text-center col-span-2">
{descriptionWithSpaces}
</span>
</div>
</div>
</div>
);
}