Simple application in Tailwind

The simpliest application using @labir/react-bridge and @labir/tailwind.

Loads a single file through useSingleFileRegistry hook
You can change the colour palette and adjust the temperature range

Code

The following code needs to be wrapped inside <ThermalProvider> and <NextUIProvider> for necessary context.

app.tsx

"use client";
 
import {
  ThermalInstance,
  ThermalRegistryRange,
  useSingleFileRegistry,
} from "@labir/react-bridge";
import {
  PaletteDropdown
} from "@labir/tailwind";
import { ButtonGroup } from "@nextui-org/react";
 
export const App: React.FC = () => {
 
  // A shorthand hook simplifies the entire loading process
  const { registry, instance } = useSingleFileRegistry("/tucnaci_04.lrc");
 
  return (
    <div className="py-3 w-full">
        <div className="flex flex-wrap p-3 bg-slate-100 rounded-xl gap-2">
          <div className="flex flex-col gap-3">
            <PaletteDropdown
              triggerButtonProps={{ color: "default", variant: "bordered" }}
            />
 
            <ButtonGroup>
              <RangeAutoButton registry={registry} />
              <RangeFullButton registry={registry} />
            </ButtonGroup>
 
          </div>
 
          <div className="grow">
              <ThermalRegistryRange registry={registry} step={0.01} />
          </div>
 
        </div>
 
        <div className="py-3">
          {instance && <ThermalInstance instance={instance} />}
        </div>
 
    </div>
  );
};

Introduction Multiple images at once