Function Timeline

web/src/components/timeline/timeline.tsx:45–215

()

);

export function Timeline() {
  const t = useTranslations("timeline");
  const tv = useTranslations("version");
  const locale = useLocale();

  return (
    <div className="flex flex-col gap-12">
      {/* Layer Legend */}
      <div>
        <h3 className="mb-3 text-sm font-medium text-[var(--color-text-secondary)]">
          {t("layer_legend")}
        </h3>
        <div className="flex flex-wrap gap-2">
          {LAYERS.map((layer) => (
            <div key={layer.id} className="flex items-center gap-1.5">
              <span
                className={cn("h-3 w-3 rounded-full", LAYER_DOT_BG[layer.id])}
              />
              <span className="text-xs font-medium">{layer.label}</span>
            </div>
          ))}
        </div>
      </div>

      {/* Vertical Timeline */}
      <div className="relative">
        {LEARNING_PATH.map((versionId, index) => {
          const meta = VERSION_META[versionId];
          const data = getVersionData(versionId);
          if (!meta || !data) return null;

          const isLast = index === LEARNING_PATH.length - 1;
          const locPercent = Math.round((data.loc / MAX_LOC) * 100);

          return (
            <div key={versionId} className="relative flex gap-4 pb-8 sm:gap-6">
              {/* Timeline line + dot */}
              <div className="flex flex-col items-center">
                <div
                  className={cn(
                    "z-10 flex h-8 w-8 shrink-0 items-center justify-center rounded-full ring-4 ring-[var(--color-bg)] sm:h-10 sm:w-10",
                    LAYER_DOT_BG[meta.layer]
                  )}
                >
                  <span className="text-[10px] font-bold text-white sm:text-xs">
                    {versionId.replace("s", "").replace("_mini", "m")}
                  </span>
                </div>
                {!isLast && (
                  <div
                    className={cn(
                      "w-0.5 flex-1",
                      LAYER_LINE_BG[
                        VERSION_META[LEARNING_PATH[index + 1]]?.layer || meta.layer
                      ]
                    )}
                  />
                )}