rustlanges-components 0.1.0

RustLangES components library
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

import { Ferris } from "@/icons/ferris";
import { cn } from "@/utils/tw-merge";

type ProgressBarProps = {
  percentage: number;
};
export const ProgressBar = (props: ProgressBarProps) => {
  const percentage = Number(props.percentage ?? 0);
  const isZeroProgress = percentage === 0;
  const progressIsInLimit = isZeroProgress || percentage === 100;
  const isInMinLimit = percentage < 25;

  const position = {
    right: isInMinLimit ? "auto" : `${100 - percentage}%`,
    left: isInMinLimit ? `${percentage}%` : "auto",
  };

  return (
    <div className="rustlanges-progress-bar__container">
      <div className="rustlanges-progress-bar">
        <span
          className={cn([
            "text-overline rustlanges-progress-bar__percentage",
            isInMinLimit && "rustlanges-progress-bar__percentage--invert",
          ])}
          style={position}
        >
          {percentage}%
          <Ferris width={15} height={15} />
        </span>
        <div
          className={cn([
            "rustlanges-progress-bar__fill",
            progressIsInLimit && "rustlanges-progress-bar__fill--limit",
          ])}
          style={{ width: `${percentage}%` }}
        />
      </div>
    </div>
  );
};