29 lines
1.1 KiB
TypeScript
29 lines
1.1 KiB
TypeScript
import { useTranslation } from "react-i18next"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { RevealCard } from "@/components/reveal-card"
|
|
import { useCountUp } from "@/hooks/use-animate"
|
|
import type { WrapUpReport } from "@/lib/api/wrapup"
|
|
|
|
export function HeroCard({ report, watchHours }: { report: WrapUpReport; watchHours: number }) {
|
|
const { t } = useTranslation()
|
|
const movies = useCountUp(report.total_movies)
|
|
const hours = useCountUp(watchHours)
|
|
|
|
return (
|
|
<RevealCard>
|
|
<Card>
|
|
<CardContent className="py-8 text-center" ref={movies.ref}>
|
|
<p className="text-xs uppercase tracking-widest text-muted-foreground">{t("wrapup.heroSubtitle")}</p>
|
|
<p className="mt-2 text-5xl font-extrabold tracking-tight">{movies.value}</p>
|
|
<p className="text-sm text-muted-foreground">{t("wrapup.moviesWatched")}</p>
|
|
{watchHours > 0 && (
|
|
<p className="mt-1 text-xs text-muted-foreground" ref={hours.ref}>
|
|
{t("wrapup.watchHours", { hours: hours.value })}
|
|
</p>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</RevealCard>
|
|
)
|
|
}
|