developer-roadmap/src/components/RoadmapHint.astro

---
import { ClearProgress } from './Activity/ClearProgress';
import AstroIcon from './AstroIcon.astro';
import Icon from './AstroIcon.astro';

export interface Props {
  roadmapId: string;
  tnsBannerLink?: string;
}

const { roadmapId, tnsBannerLink = '' } = Astro.props;

const hasTNSBanner = !!tnsBannerLink;
const roadmapTitle =
  roadmapId === 'devops'
    ? 'DevOps'
    : `${roadmapId.charAt(0).toUpperCase()}${roadmapId.slice(1)}`;
---

<div
  class:list={[
    'mt-4 sm:mt-7 border-0 sm:border rounded-md mb-0',
    {
      'sm:-mb-[82px]': hasTNSBanner,
      'sm:-mb-[65px]': !hasTNSBanner,
    },
  ]}
>
  {
    hasTNSBanner && (
      <div class='hidden border-b bg-gray-100 px-2 py-1.5 sm:block'>
        <p class='text-sm'>
          Get the latest {roadmapTitle} news from our sister site{' '}
          <a
            href={tnsBannerLink}
            target='_blank'
            class='font-semibold underline'
          >
            TheNewStack.io
          </a>
        </p>
      </div>
    )
  }

  <!-- Desktop: Roadmap Resources - Alert -->
  <div id="progress-nums-container"
    class:list={[
      'hidden sm:flex justify-between px-2 bg-white items-center py-1.5 relative striped-loader bg-white',
      {
        'rounded-bl-md rounded-br-md': hasTNSBanner,
        'rounded-md': !hasTNSBanner,
      },
    ]}
  >
    <p class='text-sm flex opacity-0 transition-opacity duration-300' id="progress-nums">
      <span class="font-medium py-0.5 rounded-sm text-xs uppercase bg-yellow-200 px-1 text-yellow-900 mr-2.5">
        <span class="progress-percentage">0</span>% Done
      </span>

      <span><span class="progress-done">0</span> completed</span><span class="mx-1.5 text-gray-400">&middot;</span>
      <span><span class="progress-learning">0</span> learning</span><span class="mx-1.5 text-gray-400">&middot;</span>
      <span><span class="progress-skipped">0</span> skipped</span><span class="mx-1.5 text-gray-400">&middot;</span>
      <span><span class="progress-total">0</span> Total</span>
    </p>
  </div>

  <!-- Mobile - Roadmap resources alert -->
  <p
    class='relative block rounded-md border border-yellow-500 bg-white px-2 py-1.5 text-sm text-yellow-700 sm:hidden'
  >
    Track your progress and learn about the topics by clicking the roadmap items.
  </p>
</div>