useFullscreen

"use client";
import { useFullscreen } from "@/hooks/use-fullscreen";
import { MinimizeIcon, MaximizeIcon } from "@/icons/*";
import { Button } from "@/ui/button";

export function UseFullscreenDemo() {
  const { fullscreen, toggle } = useFullscreen();

  function fS<T1, T2>(t1: T1, t2: T2) {
    return fullscreen ? (t1 as T1) : (t2 as T2);
  }

  return (
    <Button onClick={toggle} title={fS("Minimize", "Maximize")} variant="outline" size="icon" color={fS("red", "blue")}>
      {fS(<MinimizeIcon strokeWidth={2.25} />, <MaximizeIcon strokeWidth={2.25} />)}
    </Button>
  );
}

"use client";
import { Stack } from "@/ui/stack";
import { Button } from "@/ui/button";
import { Typography } from "@/ui/typography";
import { MinimizeIcon, MaximizeIcon } from "@/icons/*";
import { useFullscreen } from "@/hooks/use-fullscreen";

export function UseFullscreenDemo() {
  const { ref: refImage, toggle: onClickImage } = useFullscreen();

  return (
    <Stack align="center">
      {/* eslint-disable-next-line @next/next/no-img-element */}
      <img
        ref={refImage}
        src="/...asset.jpg"
        alt="oeri logo"
        width={96}
        height={96}
        onClick={onClickImage}
        className="mt-8 size-24 rounded-lg border bg-black"
      />
      <Typography prose="span">Click image to view fullscreen</Typography>
    </Stack>
  );
}