Spaces:
Running
Running
File size: 3,011 Bytes
1c04688 0591976 8de92d1 7534dba 7a7f75f 8def8f4 1c04688 0591976 8def8f4 7a7f75f 8def8f4 7a7f75f 8def8f4 4a656fb 1c04688 7a7f75f 7534dba 957e7cc 7534dba 6dade58 7534dba 8de92d1 1c04688 8def8f4 1c04688 0591976 1c04688 8def8f4 1c04688 8def8f4 1c04688 0591976 1c04688 4a656fb 1c04688 4a656fb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 |
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import ViewerTab from "@/components/viewer-tab";
import PlayTab from "@/components/play-tab";
import AboutTab from "@/components/about-tab";
import { SignInWithHuggingFaceButton } from "@/components/sign-in-with-hf-button";
import { Github } from "lucide-react";
import { useState, useEffect } from "react";
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}>
<TabsList className="mb-4">
<TabsTrigger value="view">View Runs</TabsTrigger>
<TabsTrigger value="play">Play Game</TabsTrigger>
<TabsTrigger value="about">About</TabsTrigger>
</TabsList>
<TabsContent value="view">
<ViewerTab handleTryRun={handleTryRun} />
</TabsContent>
<TabsContent value="play">
<PlayTab startArticle={startArticle} destinationArticle={destinationArticle} />
</TabsContent>
<TabsContent value="about">
<AboutTab />
</TabsContent>
</Tabs>
</div>
);
}
|