45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { DiscordIcon } from "../Icons/DiscordIcon";
|
|
import { GithubIcon } from "../Icons/GithubIcon";
|
|
import { Logo } from "../Icons/Logo";
|
|
import { NewDocument } from "../NewDocument";
|
|
import {
|
|
Popover,
|
|
PopoverArrow,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "../UI/Popover";
|
|
|
|
export function HomeHeader() {
|
|
return (
|
|
<header className="fixed z-20 flex items-center justify-between w-screen h-[82px] px-4 bg-indigo-700">
|
|
<div className="flex flex-grow items-start ">
|
|
<Logo />
|
|
</div>
|
|
<Popover>
|
|
<PopoverTrigger>
|
|
<button className="mr-2 bg-lime-500 text-white text-lg font-bold px-2 rounded-sm uppercase cursor-pointer">
|
|
Try now
|
|
</button>
|
|
</PopoverTrigger>
|
|
<PopoverContent side="bottom" sideOffset={30}>
|
|
<NewDocument />
|
|
<PopoverArrow className="fill-current text-indigo-700" offset={20} />
|
|
</PopoverContent>
|
|
</Popover>
|
|
|
|
<ol className="flex ml-2">
|
|
<li className="ml-0 hover:cursor-pointer">
|
|
<a href="https://discord.gg/ZQq6Had5nP" target="_blank">
|
|
<DiscordIcon />
|
|
</a>
|
|
</li>
|
|
<li className="ml-2 hover:cursor-pointer">
|
|
<a href="https://github.com/jsonhero-io" target="_blank">
|
|
<GithubIcon />
|
|
</a>
|
|
</li>
|
|
</ol>
|
|
</header>
|
|
);
|
|
}
|