export default function Home()

in src/App.tsx [9:60]
42 lines of code
3 McCabe index (conditional complexity)

export default function Home() {
  const [selectedTab, setSelectedTab] = useState<"view" | "play" | "about">("view");
  const [startArticle, setStartArticle] = useState<string>("");
  const [destinationArticle, setDestinationArticle] = useState<string>("");
  const [isSmallScreen, setIsSmallScreen] = useState<boolean>(false);
  
  useEffect(() => {
    const checkScreenSize = () => {
      setIsSmallScreen(window.innerWidth < 768);
    };
    
    // Check on initial load
    checkScreenSize();
    
    // Add resize listener
    window.addEventListener('resize', checkScreenSize);
    
    // Clean up
    return () => window.removeEventListener('resize', checkScreenSize);
  }, []);

  const handleTryRun = (startArticle: string, destinationArticle: string) => {
    console.log("Trying run from", startArticle, "to", destinationArticle);
    setSelectedTab("play");
    setStartArticle(startArticle);
    setDestinationArticle(destinationArticle);
  };

  return (
    <div className="container mx-auto p-4">
      {isSmallScreen && (
        <div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-4 rounded shadow">
          <p className="font-bold">Warning:</p>
          <p>This application doesn't work well on small screens. Please use a desktop for the best experience.</p>
        </div>
      )}
      <div className="flex flex-row justify-between items-center">
        <h1 className="text-3xl font-bold mb-6">WikiRacing Language Models</h1>
        <div className="flex items-center gap-4">
          <a 
            href="https://github.com/huggingface/wikirace-llms" 
            target="_blank" 
            rel="noopener noreferrer"
            className="text-gray-700 hover:text-gray-900"
          >
            <Github size={24} />
          </a>
          <SignInWithHuggingFaceButton />
        </div>
      </div>

      <Tabs defaultValue="view" className="w-full" onValueChange={(value) => setSelectedTab(value as "view" | "play")} value={selectedTab}>