76 lines
2.4 KiB
TypeScript
76 lines
2.4 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { appConfig } from "@/shared/config/app-config";
|
||
|
|
import { TrendingUp, Download } from "lucide-react";
|
||
|
|
import Image from "next/image";
|
||
|
|
import Link from "next/link";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
url: string;
|
||
|
|
icon: string;
|
||
|
|
title: string;
|
||
|
|
value: number | string;
|
||
|
|
loading?: boolean;
|
||
|
|
};
|
||
|
|
|
||
|
|
export function StatisticCardItem({ url, icon, title, value, loading }: Props) {
|
||
|
|
const isDisabled = title === "Total Pengunjung";
|
||
|
|
if (loading) {
|
||
|
|
return (
|
||
|
|
<div className="bg-biru-300/50 h-[150px] animate-pulse rounded-3xl px-7 py-4">
|
||
|
|
<div className="mb-2 flex items-center justify-between">
|
||
|
|
<div className="h-8 w-24 rounded bg-white/40" />
|
||
|
|
<div className="h-8 w-8 rounded bg-white/40" />
|
||
|
|
</div>
|
||
|
|
<div className="mt-3 h-4 w-32 rounded bg-white/40" />
|
||
|
|
<div className="mt-8 h-4 w-24 rounded bg-white/40" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Link
|
||
|
|
href={url}
|
||
|
|
onClick={isDisabled ? (e) => e.preventDefault() : undefined}
|
||
|
|
aria-disabled={isDisabled}
|
||
|
|
className={`group border-primary bg-biru-300 font-onest relative h-[150px] h-full overflow-hidden rounded-3xl border border-3 px-7 py-5 transition-all duration-300 ease-in-out ${isDisabled ? "hover:cursor-default" : "hover:cursor-pointer"}`}
|
||
|
|
>
|
||
|
|
<div className="mb-2 flex items-center justify-between">
|
||
|
|
<h5 className="text-[32px] font-bold text-white">{value}</h5>
|
||
|
|
<Image
|
||
|
|
src={icon}
|
||
|
|
alt="icon"
|
||
|
|
width={32}
|
||
|
|
height={32}
|
||
|
|
className="transition-transform duration-300 ease-in-out group-hover:top-0 group-hover:right-0"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="flex flex-col text-white">
|
||
|
|
<p className="text-sm font-normal">{title}</p>
|
||
|
|
<div className="mt-2 flex items-center gap-2 text-sm">
|
||
|
|
{title === "Total Pengunjung" ? (
|
||
|
|
<>
|
||
|
|
<TrendingUp /> Pengunjung dalam 1 Tahun
|
||
|
|
</>
|
||
|
|
) : title === "Total Unduhan" ? (
|
||
|
|
<>
|
||
|
|
<Download /> Unduhan dalam 1 Tahun
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<p className="underline">Lihat Semua</p>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Image
|
||
|
|
src={appConfig.heroCardOrnament}
|
||
|
|
width={120}
|
||
|
|
height={120}
|
||
|
|
alt="ornament"
|
||
|
|
className="absolute top-0 right-0 mix-blend-overlay transition-transform duration-500 ease-out group-hover:scale-125"
|
||
|
|
/>
|
||
|
|
</Link>
|
||
|
|
);
|
||
|
|
}
|