@heroicons/react/solid#ArrowSmUpIcon TypeScript Examples

The following examples show how to use @heroicons/react/solid#ArrowSmUpIcon. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Stats.tsx    From platform with MIT License 4 votes vote down vote up 
function RatingSummaryDesktop({ title, data }) {
  const sorted = data?.sort((a, b) => new Date(b.date) - new Date(a.date));

  const currentStandard = sorted.length > 0 ? sorted[0].standard : 0;
  const previousStandard = sorted.length > 0 ? sorted[1].standard : 0;
  const currentRapid = sorted.length > 0 ? sorted[0].rapid : 0;
  const previousRapid = sorted.length > 0 ? sorted[1].rapid : 0;

  // TEST:
  // const currentStandard = 2241;
  // const previousStandard = 2220;
  // const currentRapid = 2201;
  // const previousRapid = 2209;

  const Diff = ({ current, previous }) => {
    const change = (current - previous).toFixed(0);
    const diff = isNaN(change) ? "blank" : change;

    if (diff > 0) {
      return (
        <div className="flex flex-nowrap text-xxs text-green-600">
          <ArrowSmUpIcon
            className="self-center flex-shrink-0 h-5 w-5 text-green-500"
            aria-hidden="true"
          />
          {diff}
        </div>
      );
    }

    if (diff < 0) {
      return (
        <div className="flex text-xxs text-red-500">
          <ArrowSmDownIcon
            className="self-center flex-shrink-0 h-5 w-5 text-red-500"
            aria-hidden="true"
          />
          {diff}
        </div>
      );
    }

    if (diff === 0) {
      return (
        <div className="mt-2 xl:ml-0 flex text-xs items-baseline text-gray-400">
          -
        </div>
      );
    }

    return (
      <div className="mt-2 xl:ml-0 flex text-xs items-baseline text-gray-400">
        -
      </div>
    );
  };

  return (
    <div className="hidden lg:block relative bg-white p-6 shadow rounded-lg overflow-hidden">
      <div className="grid grid-cols-10">
        <div className="col-span-2">
          <span className="text-teal-500 text-4xl">
            <i className="fad fa-chart-line"></i>
          </span>
        </div>
        <div className="col-span-5 text-left">
          <div className="text-md font-medium text-gray-500">{title}</div>
          <div className="text-left text-2xl flex gap-2 font-semibold text-black m-auto">
            <div className="relative m-auto flex flex-none w-20 text-center items-center px-2 py-0.5 rounded text-xs font-medium bg-teal-100 text-teal-700">
              Standard
            </div>
            <div>{currentStandard}</div>
            <Diff current={currentStandard} previous={previousStandard} />
          </div>
          <div className="text-left text-2xl flex gap-2 font-semibold text-black m-auto">
            <div className="relative m-auto flex flex-none w-20 text-center items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-700">
              Rapid
            </div>
            <div>{currentRapid}</div>
            <Diff current={currentRapid} previous={previousRapid} />
          </div>
        </div>
      </div>
      <div className="absolute bottom-0 inset-x-0 bg-gray-50 dark:bg-gray-800 px-4 py-2 xl:px-6 border-t border-gray-100"></div>
    </div>
  );
}
Example #2
Source File: Stats.tsx    From platform with MIT License 4 votes vote down vote up 
function RatingSummaryMobile({ title, data }) {
  const sorted = data?.sort((a, b) => new Date(b.date) - new Date(a.date));

  const currentStandard = sorted.length > 0 ? sorted[0].standard : 0;
  const previousStandard = sorted.length > 0 ? sorted[1].standard : 0;

  const currentRapid = sorted.length > 0 ? sorted[0].rapid : 0;
  const previousRapid = sorted.length > 0 ? sorted[1].rapid : 0;

  // TEST:
  // const currentStandard = 2241;
  // const previousStandard = 2220;
  // const currentRapid = 2101;
  // const previousRapid = 2101;

  const Diff = ({ current, previous }) => {
    const change = (current - previous).toFixed(0);
    const diff = isNaN(change) ? "blank" : change;

    if (diff > 0) {
      return (
        <p className="flex text-xs items-baseline text-green-600">
          <ArrowSmUpIcon
            className="self-center flex-shrink-0 h-4 w-4 text-green-500 -mt-1"
            aria-hidden="true"
          />
          {diff}
        </p>
      );
    }

    if (diff < 0) {
      return (
        <p className="flex text-xs items-baseline text-red-500">
          <ArrowSmDownIcon
            className="self-center flex-shrink-0 h-4 w-4 text-red-500"
            aria-hidden="true"
          />
          {diff}
        </p>
      );
    }

    if (diff === 0) {
      return (
        <p className="flex text-xs items-baseline text-gray-400">
          -
        </p>
      );
    }

    return (
      <p className="flex text-xs items-baseline text-gray-400">
        -
      </p>
    );
  };

  return (
    <div className="block lg:hidden relative text-center bg-white px-4 shadow rounded-lg overflow-hidden">
      <div className="mb-2">
        <div className="p-2">
          <span className="text-teal-500 text-3xl">
            <i className="fad fa-chart-line"></i>
          </span>
        </div>
        <p className="text-md font-medium text-gray-500 dark:text-gray-300 truncate">
          {title}
        </p>
      </div>
      <div className="items-baseline pb-6">

        <div className="text-lg font-semibold text-black m-auto">
          {currentStandard}
          <div className="flex items-center justify-center">
            <Diff current={currentStandard} previous={previousStandard} />
          </div>
        </div>
        <div className="relative m-auto w-20 text-center items-center px-2 py-0.5 rounded text-xs font-medium bg-teal-100 text-teal-700">
          <span>Standard</span>
        </div>


        <div className="text-lg font-semibold text-black m-auto">
          {currentRapid}
          <div className="flex items-center justify-center">
            <Diff current={currentRapid} previous={previousRapid} />
          </div>
        </div>
        <div className="relative m-auto w-20 text-center items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-700">
          Rapid
        </div>
        <div className="absolute bottom-0 inset-x-0 bg-gray-50 dark:bg-gray-800 px-4 py-2 border-t border-gray-100"></div>
      </div>
    </div>
  );
}