use­Screen

const shy = "\u00AD";

const screen = useScreen();

const getDeviceName = () => {
  switch (true) {
    case screen.isSmallDevice:
      return "liten";
    case screen.isMediumDevice:
      return "medium";
    case screen.isLargeDevice:
      return "stor";
    case screen.isXlDevice:
      return "ekstra stor";
    default:
      return "";
  }
};

const getOrientation = () => {
  switch (true) {
    case screen.isLandscape:
      return `landskaps${shy}modus`;
    case screen.isPortrait:
      return `portrett${shy}modus`;
    default:
      return "";
  }
};

return (
  <p className="jkl-body jkl-spacing-xl--bottom">
    Din dings har en {getDeviceName()} skjerm i {getOrientation()}
  </p>
);