48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import type { CSSProperties } from "react";
|
|
import EyeIcon from "@/assets/icons/eye.svg?react";
|
|
import { formatCompactNumber } from "@/utils/formatNumber";
|
|
|
|
export type TopVideoCardProps = {
|
|
title: string;
|
|
views: number;
|
|
uploadedAgo: string;
|
|
type: "Short" | "Long";
|
|
duration?: string;
|
|
className?: string;
|
|
style?: CSSProperties;
|
|
};
|
|
|
|
export function TopVideoCard({
|
|
title,
|
|
views,
|
|
uploadedAgo,
|
|
type,
|
|
duration,
|
|
className = "",
|
|
style,
|
|
}: TopVideoCardProps) {
|
|
const typeClass =
|
|
type === "Short"
|
|
? "bg-lavender-100 text-violet-700"
|
|
: "bg-[var(--color-status-info-bg)] text-[var(--color-status-info-text)]";
|
|
|
|
return (
|
|
<div
|
|
className={`rounded-xl bg-white border border-neutral-20 shadow-sm p-4 min-w-[250px] shrink-0 animate-fade-in-up ${className}`.trim()}
|
|
style={style}
|
|
>
|
|
<div className="flex items-center gap-2 mb-2 flex-wrap">
|
|
<span className={`label-12 font-medium px-2 py-1 rounded-full break-keep ${typeClass}`}>{type}</span>
|
|
{duration ? <span className="label-12 text-neutral-60 break-keep">{duration}</span> : null}
|
|
<span className="label-12 text-neutral-60 break-keep">{uploadedAgo}</span>
|
|
</div>
|
|
<p className="body-14-medium text-navy-900 line-clamp-2 mb-2 break-keep">{title}</p>
|
|
<div className="flex items-center gap-1 body-14 text-neutral-70 min-w-0">
|
|
<EyeIcon width={14} height={14} className="text-neutral-60 shrink-0" aria-hidden />
|
|
<span className="title-14 break-keep">{formatCompactNumber(views)}</span>
|
|
<span className="text-neutral-60 break-keep">views</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|