65 lines
2.0 KiB
TypeScript
65 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import Note from '@/components/Note';
|
|
import { dateRangeForPhotos, PhotoDateRange } from '@/photo';
|
|
import clsx from 'clsx/lite';
|
|
import { FaCodeFork } from 'react-icons/fa6';
|
|
|
|
export default function AdminAppInsightsClient({
|
|
photosCount,
|
|
tagsCount,
|
|
camerasCount,
|
|
filmSimulationsCount,
|
|
lensesCount,
|
|
dateRange,
|
|
}: {
|
|
photosCount: number
|
|
tagsCount: number
|
|
camerasCount: number
|
|
filmSimulationsCount: number
|
|
lensesCount: number
|
|
dateRange?: PhotoDateRange
|
|
}) {
|
|
const { descriptionWithSpaces } = dateRangeForPhotos(undefined, dateRange);
|
|
|
|
return (
|
|
<div className={clsx(
|
|
'flex flex-col items-center justify-center gap-4',
|
|
'mt-2 mb-6',
|
|
)}>
|
|
<div className="text-center text-main uppercase font-bold tracking-wide">
|
|
Template Recommendations
|
|
</div>
|
|
<Note
|
|
icon={<FaCodeFork />}
|
|
className="w-[clamp(300px,80%,1000px)] m-auto"
|
|
>
|
|
Consider forking this repository in order to
|
|
receive new features and fixes
|
|
</Note>
|
|
<div className="text-center text-main uppercase font-bold tracking-wide">
|
|
Library Stats
|
|
</div>
|
|
<div className={clsx(
|
|
'grid grid-cols-2 gap-3 uppercase',
|
|
'border border-main rounded-md p-6 bg-main shadow-xs',
|
|
'w-[clamp(300px,80%,1000px)]',
|
|
)}>
|
|
<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>
|
|
);
|
|
}
|