File size: 1,992 Bytes
d092f57 | 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 | import Link from "next/link"
import Image from "next/image"
import { getSiteDomain, getSiteName } from "../lib/env"
import Button from "./action/Button"
import IconShare from "./icon/IconShare"
import React, { useState } from "react"
import Modal from "./modal/Modal"
import InputClipboardCopy from "./input/InputClipboardCopy"
import { Tooltip } from "react-tooltip"
const Navbar = ({ roomId }: { roomId?: string }) => {
const [showShare, setShowShare] = useState(false)
return (
<div className={"py-1 px-2 flex flex-row gap-1 items-stretch bg-dark-900"}>
<Link
href={"/"}
className={
"flex p-1 shrink-0 flex-row gap-1 items-center rounded action"
}
>
<Image
src={"/logo_white.png"}
alt={"Web-SyncPlay logo"}
width={36}
height={36}
/>
<span className={"hide-below-sm"}>{getSiteName()}</span>
</Link>
{roomId && (
<>
<Modal
title={"Invite your friends"}
show={showShare}
close={() => setShowShare(false)}
>
<div>Share this link to let more people join in on the fun</div>
<InputClipboardCopy
className={"bg-dark-1000"}
value={getSiteDomain() + "/room/" + roomId}
/>
</Modal>
<Button
tooltip={"Share the room link"}
id={"navbar"}
actionClasses={"hover:bg-primary-800 active:bg-primary-700"}
className={"ml-auto p-2 bg-primary-900"}
onClick={() => setShowShare(true)}
>
<div className={"flex items-center mx-1"}>
<IconShare className={"mr-1"} />
Share
</div>
</Button>
</>
)}
<Tooltip
anchorId={"navbar"}
place={"bottom"}
style={{
backgroundColor: "var(--dark-700)",
}}
/>
</div>
)
}
export default Navbar
|