developer-roadmap/src/components/UserPublicProfile/UserPublicProgresses.tsx

import type { GetPublicProfileResponse } from '../../api/user';
import { UserPublicProgressStats } from './UserPublicProgressStats';

type UserPublicProgressesProps = {
  username: string;
  roadmaps: GetPublicProfileResponse['roadmaps'];
  publicConfig: GetPublicProfileResponse['publicConfig'];
};

export function UserPublicProgresses(props: UserPublicProgressesProps) {
  const { roadmaps: roadmapProgresses = [], username, publicConfig } = props;
  const { roadmapVisibility, customRoadmapVisibility } = publicConfig! || {};

  const roadmaps = roadmapProgresses.filter(
    (roadmap) => !roadmap.isCustomResource,
  );
  const customRoadmaps = roadmapProgresses.filter(
    (roadmap) => roadmap.isCustomResource,
  );

  return (
    <div>
      {roadmapVisibility !== 'none' && (
        <>
          <h2 className="text-xs uppercase text-gray-400">My Skills</h2>
          {roadmaps?.length === 0 ? (
            <div className="mt-4 text-sm text-gray-500">
              No skills added yet.
            </div>
          ) : (
            <ul className="mt-4 grid grid-cols-2 gap-2">
              {roadmaps.map((roadmap, counter) => (
                <li key={roadmap.id + counter}>
                  <UserPublicProgressStats
                    updatedAt={roadmap.updatedAt}
                    title={roadmap.title}
                    totalCount={roadmap.total}
                    doneCount={roadmap.done}
                    learningCount={roadmap.learning}
                    skippedCount={roadmap.skipped}
                    resourceId={roadmap.id}
                    resourceType="roadmap"
                    roadmapSlug={roadmap.roadmapSlug}
                    isCustomResource={false}
                    username={username!}
                  />
                </li>
              ))}
            </ul>
          )}
        </>
      )}

      {customRoadmapVisibility !== 'none' && (
        <>
          <h2 className="mt-6 text-xs uppercase text-gray-400">My Roadmaps</h2>
          {customRoadmaps?.length === 0 ? (
            <div className="mt-4 text-sm text-gray-500">
              No roadmaps added yet.
            </div>
          ) : (
            <ul className="mt-4 grid grid-cols-2 gap-2">
              {customRoadmaps.map((roadmap, counter) => (
                <li key={roadmap.id + counter}>
                  <UserPublicProgressStats
                    updatedAt={roadmap.updatedAt}
                    title={roadmap.title}
                    totalCount={roadmap.total}
                    doneCount={roadmap.done}
                    learningCount={roadmap.learning}
                    skippedCount={roadmap.skipped}
                    resourceId={roadmap.id}
                    resourceType="roadmap"
                    roadmapSlug={roadmap.roadmapSlug}
                    username={username!}
                    isCustomResource={true}
                  />
                </li>
              ))}
            </ul>
          )}
        </>
      )}
    </div>
  );
}