Spaces:
Running
Running
File size: 5,375 Bytes
35ef307 c10f8f8 dfcc023 c10f8f8 dfcc023 c10f8f8 718ae59 c10f8f8 dfcc023 b15b1be 35ef307 b15b1be 35ef307 b15b1be 35ef307 b15b1be 35ef307 b15b1be dfcc023 b15b1be 7734a90 dfcc023 c10f8f8 |
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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
import {
ArrowRight,
HelpCircle,
RefreshCcw,
Lock,
Eye,
Sparkles,
} from "lucide-react";
import Image from "next/image";
import Link from "next/link";
import Logo from "@/assets/logo.svg";
import { Button } from "@/components/ui/button";
import { useUser } from "@/hooks/useUser";
import { ProTag } from "@/components/pro-modal";
import { UserMenu } from "@/components/user-menu";
import { SwitchDevice } from "@/components/editor/switch-devide";
import { SwitchTab } from "./switch-tab";
import { History } from "@/components/editor/history";
import { useEditor } from "@/hooks/useEditor";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
export function Header() {
const { project } = useEditor();
const { user, openLoginWindow } = useUser();
return (
<header className="border-b bg-neutral-950 dark:border-neutral-800 grid grid-cols-3 lg:flex items-center max-lg:gap-3 justify-between z-20">
<div className="flex items-center justify-between lg:max-w-[600px] lg:w-full py-2 px-2 lg:px-3 lg:pl-6 gap-3">
<h1 className="text-neutral-900 dark:text-white text-lg lg:text-xl font-bold flex items-center justify-start">
<Image
src={Logo}
alt="DeepSite Logo"
className="size-8 invert-100 dark:invert-0"
/>
<p className="ml-2 flex items-center justify-start max-lg:hidden">
DeepSite
{user?.isPro ? (
<ProTag className="ml-2 !text-[10px]" />
) : (
<span className="font-mono bg-gradient-to-r from-sky-500/20 to-sky-500/10 text-sky-500 rounded-full text-xs ml-2 px-1.5 py-0.5 border border-sky-500/20">
{" "}
v3
</span>
)}
</p>
</h1>
<div className="flex items-center justify-end gap-2">
<History />
<SwitchTab />
</div>
</div>
<div className="lg:hidden flex items-center justify-center whitespace-nowrap">
<SwitchTab isMobile />
</div>
<div className="lg:w-full px-2 lg:px-3 py-2 flex items-center justify-end lg:justify-between lg:border-l lg:border-neutral-800">
<div className="font-mono text-muted-foreground flex items-center gap-2">
<SwitchDevice />
<Button
size="xs"
variant="bordered"
className="max-lg:hidden"
onClick={() => {
const iframe = document.getElementById(
"preview-iframe"
) as HTMLIFrameElement;
if (iframe) {
iframe.src = iframe.src;
}
}}
>
<RefreshCcw className="size-3 mr-0.5" />
Refresh Preview
</Button>
<Link
href="https://huggingface.co/spaces/enzostvs/deepsite/discussions/427"
target="_blank"
className="max-lg:hidden"
>
<Button size="xs" variant="bordered">
<HelpCircle className="size-3 mr-0.5" />
Help
</Button>
</Link>
</div>
<div className="flex items-center gap-2">
{project?.space_id && (
<Link
href={
project?.private
? `https://huggingface.co/spaces/${project.space_id}`
: `https://${project.space_id.replaceAll(
"/",
"-"
)}.static.hf.space`
}
target="_blank"
>
<Button
size="xs"
variant="bordered"
className="flex items-center gap-1.5 justify-center bg-gradient-to-r from-emerald-500/20 to-cyan-500/20 hover:from-emerald-500/30 hover:to-cyan-500/30 border-emerald-500/30 text-emerald-400 hover:text-emerald-300 backdrop-blur-sm shadow-lg hover:shadow-emerald-500/20 transition-all duration-300 max-lg:hidden font-medium"
>
<Eye className="size-3.5" />
See Live Preview
<Sparkles className="size-3" />
</Button>
</Link>
)}
{project?.private && (
<Tooltip>
<TooltipTrigger>
<div className="max-lg:hidden flex items-center gap-1.5 bg-amber-500/10 backdrop-blur-sm px-3 py-1.5 rounded-full border border-amber-500/20 shadow-lg">
<Lock className="w-3 h-3 text-amber-500" />
<span className="text-amber-500 text-xs font-medium tracking-wide">
Private Project
</span>
</div>
</TooltipTrigger>
<TooltipContent>
<p className="text-xs">
This project is private. Only you can see it.
</p>
</TooltipContent>
</Tooltip>
)}
{user ? (
<UserMenu className="!pl-1 !pr-3 !py-1 !h-auto" />
) : (
<Button size="sm" onClick={openLoginWindow}>
<span className="max-lg:hidden">Log In to DeepSite</span>
<span className="lg:hidden">Log In</span>
<ArrowRight className="size-4" />
</Button>
)}
</div>
</div>
</header>
);
}
|