npx axionjs-ui add hook use-fullscreen

import { useRef, useState } from "react";
import { useFullscreen } from "@/hooks/use-fullscreen";
 
interface Slide {
  title: string;
  content: string;
}
 
function Presentation() {
  const slides: Slide[] = [
    { title: "Introduction", content: "Welcome to the presentation!" },
    { title: "Key Points", content: "Here are the important takeaways..." },
    { title: "Data Analysis", content: "Let's look at the data..." },
    { title: "Conclusion", content: "Thank you for attending!" },
  ];
  
  const [currentSlide, setCurrentSlide] = useState(0);
  const presentationRef = useRef<HTMLDivElement>(null);
  
  const { isFullscreen, toggle } = useFullscreen({
    element: presentationRef,
  });
  
  const nextSlide = () => {
    setCurrentSlide((prev) => Math.min(prev + 1, slides.length - 1));
  };
  
  const prevSlide = () => {
    setCurrentSlide((prev) => Math.max(prev - 1, 0));
  };
  
  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowRight") nextSlide();
    if (e.key === "ArrowLeft") prevSlide();
    if (e.key === "f") toggle();
  };
  
  return (
    <div 
      ref={presentationRef}
      className={`
        ${isFullscreen ? "fixed inset-0 z-50 bg-white" : "border rounded-lg"}
        flex flex-col
      `}
      tabIndex={0}
      onKeyDown={handleKeyDown}
    >
      <div className="p-4 flex justify-between items-center border-b">
        <h2>{slides[currentSlide].title}</h2>
        <div>
          <span>Slide {currentSlide + 1} of {slides.length}</span>
          <button 
            className="ml-4"
            onClick={toggle}
          >
            {isFullscreen ? "Exit Presentation" : "Present"}
          </button>
        </div>
      </div>
      
      <div className="flex-1 flex items-center justify-center p-8">
        <div className="text-xl max-w-2xl">
          {slides[currentSlide].content}
        </div>
      </div>
      
      <div className="p-4 flex justify-between border-t">
        <button 
          onClick={prevSlide}
          disabled={currentSlide === 0}
        >
          Previous
        </button>
        <button 
          onClick={nextSlide}
          disabled={currentSlide === slides.length - 1}
        >
          Next
        </button>
      </div>
    </div>
  );
}