Level bar

Compact level visualization used on /problems cards and session list rows. Four vertical segments fill in brand orange to encode L1–L4 difficulty without a numeric label.

Preview

Source

apps/docs/app/recipes/lvl-bar/recipe.tsx

export default function LvlBarRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-6 rounded-2xl border p-5">
      {([1, 2, 3, 4] as const).map((level) => (
        <div key={level} className="flex items-center gap-2">
          <div className="inline-flex gap-0.5">
            {[1, 2, 3, 4].map((seg) => (
              <span
                key={seg}
                className={`block h-3 w-1 rounded-[1px] ${seg <= level ? 'bg-brand' : 'bg-stroke'}`}
              />
            ))}
          </div>
          <span className="text-ink-3 tracking-label text-2xs font-mono font-bold uppercase">
            L{level}
          </span>
        </div>
      ))}
    </div>
  );
}

export default function LvlBarRecipe() {
  return (
    <div className="border-stroke bg-surface-2 flex flex-wrap items-center gap-6 rounded-2xl border p-5">
      {([1, 2, 3, 4] as const).map((level) => (
        <div key={level} className="flex items-center gap-2">
          <div className="inline-flex gap-0.5">
            {[1, 2, 3, 4].map((seg) => (
              <span
                key={seg}
                className={`block h-3 w-1 rounded-[1px] ${seg <= level ? 'bg-brand' : 'bg-stroke'}`}
              />
            ))}
          </div>
          <span className="text-ink-3 tracking-label text-2xs font-mono font-bold uppercase">
            L{level}
          </span>
        </div>
      ))}
    </div>
  );
}