developer-roadmap/src/components/Dashboard/DashboardCustomProgressCard.tsx

import { getRelativeTimeString } from '../../lib/date';
import { getPercentage } from '../../lib/number';
import type { UserProgress } from '../TeamProgress/TeamProgressPage';

type DashboardCustomProgressCardProps = {
  progress: UserProgress;
};

export function DashboardCustomProgressCard(props: DashboardCustomProgressCardProps) {
  const { progress } = props;

  const {
    resourceType,
    resourceId,
    resourceTitle,
    total: totalCount,
    done: doneCount,
    skipped: skippedCount,
    roadmapSlug,
    isCustomResource,
    updatedAt,
  } = progress;

  let url =
    resourceType === 'roadmap'
      ? `/${resourceId}`
      : `/best-practices/${resourceId}`;

  if (isCustomResource) {
    url = `/r/${roadmapSlug}`;
  }

  const totalMarked = doneCount + skippedCount;
  const progressPercentage = getPercentage(totalMarked, totalCount);

  return (
    <a
      href={url}
      className="group relative flex min-h-[80px] w-full flex-col justify-between overflow-hidden rounded-md border bg-white p-3 text-left text-sm shadow-xs transition-all hover:border-gray-400 hover:bg-gray-50"
    >
      <h4 className="truncate font-medium text-gray-900">{resourceTitle}</h4>

      <div className="mt-6 flex items-center gap-2">
        <div className="h-2 w-full overflow-hidden rounded-md bg-black/10">
          <div
            className="h-full bg-black/20"
            style={{ width: `${progressPercentage}%` }}
          ></div>
        </div>
        <span className="text-xs text-gray-500">
          {Math.floor(+progressPercentage)}%
        </span>
      </div>

      <p className="mt-1 text-xs text-gray-400">
        {isCustomResource ? (
          <>Last updated {getRelativeTimeString(updatedAt)}</>
        ) : (
          <>Last practiced {getRelativeTimeString(updatedAt)}</>
        )}
      </p>
    </a>
  );
}