Spaces:
Running
Running
File size: 2,109 Bytes
9a9d18a 3a909c0 9a9d18a |
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 |
import React from "react";
import { Button } from "@/components/ui/button";
import { Info, Globe, Wifi, WifiOff } from "lucide-react";
import { useApi } from "@/contexts/ApiContext";
interface LandingHeaderProps {
onShowInstructions: () => void;
onShowNgrokConfig: () => void;
}
const LandingHeader: React.FC<LandingHeaderProps> = ({
onShowInstructions,
onShowNgrokConfig,
}) => {
const { isNgrokEnabled } = useApi();
return (
<div className="relative w-full">
{/* Ngrok button in top right */}
<div className="absolute top-0 right-0 flex gap-2">
<Button
variant="ghost"
size="sm"
onClick={onShowNgrokConfig}
className={`transition-all duration-200 ${
isNgrokEnabled
? "bg-green-900/30 border border-green-700 text-green-400 hover:bg-green-900/50"
: "text-gray-400 hover:text-white hover:bg-gray-800"
}`}
title={
isNgrokEnabled
? "Ngrok enabled - Click to configure"
: "Configure Ngrok for external access"
}
>
{isNgrokEnabled ? (
<Wifi className="h-4 w-4 mr-2" />
) : (
<Globe className="h-4 w-4 mr-2" />
)}
<span className="hidden sm:inline">
{isNgrokEnabled ? "Ngrok" : "Configure Ngrok"}
</span>
</Button>
</div>
{/* Main header content */}
<div className="text-center space-y-4 w-full pt-8">
<img
src="/lovable-uploads/5e648747-34b7-4d8f-93fd-4dbd00aeeefc.png"
alt="LiveLab Logo"
className="mx-auto h-20 w-20"
/>
<h1 className="text-5xl font-bold tracking-tight">LeLab</h1>
<p className="text-xl text-gray-400">LeRobot but on HFSpace.</p>
<Button
variant="ghost"
size="icon"
onClick={onShowInstructions}
className="mx-auto"
>
<Info className="h-6 w-6 text-gray-400 hover:text-white" />
</Button>
</div>
</div>
);
};
export default LandingHeader;
|