chore: add tooltip to admin sidebar help-section.

This commit is contained in:
Prateek Shourya 2024-05-06 02:19:39 +05:30
parent 95679bc27f
commit 385038fb22

View File

@ -4,7 +4,7 @@ import { FC, useState, useRef } from "react";
import { Transition } from "@headlessui/react"; import { Transition } from "@headlessui/react";
import Link from "next/link"; import Link from "next/link";
import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react"; import { ExternalLink, FileText, HelpCircle, MoveLeft } from "lucide-react";
import { DiscordIcon, GithubIcon } from "@plane/ui"; import { DiscordIcon, GithubIcon, Tooltip } from "@plane/ui";
// hooks // hooks
import { useTheme } from "@/hooks"; import { useTheme } from "@/hooks";
// assets // assets
@ -45,39 +45,37 @@ export const HelpSection: FC = () => {
}`} }`}
> >
<div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}> <div className={`flex items-center gap-1 ${isSidebarCollapsed ? "flex-col justify-center" : "w-full"}`}>
<a <Tooltip tooltipContent="Redirect to plane" position="right" className="ml-4" disabled={!isSidebarCollapsed}>
href={redirectionLink} <a
className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`} href={redirectionLink}
> className={`relative px-2 py-1.5 flex items-center gap-2 font-medium rounded border border-custom-primary-100/20 bg-custom-primary-100/10 text-xs text-custom-primary-200 whitespace-nowrap`}
<ExternalLink size={14} /> >
{!isSidebarCollapsed && "Redirect to plane"} <ExternalLink size={14} />
</a> {!isSidebarCollapsed && "Redirect to plane"}
</a>
<button </Tooltip>
type="button" <Tooltip tooltipContent="Help" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
className={`ml-auto grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${ <button
isSidebarCollapsed ? "w-full" : "" type="button"
}`} className={`ml-auto grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
onClick={() => setIsNeedHelpOpen((prev) => !prev)} isSidebarCollapsed ? "w-full" : ""
> }`}
<HelpCircle className="h-3.5 w-3.5" /> onClick={() => setIsNeedHelpOpen((prev) => !prev)}
</button> >
<button <HelpCircle className="h-3.5 w-3.5" />
type="button" </button>
className="grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:hidden" </Tooltip>
onClick={() => toggleSidebar(!isSidebarCollapsed)} <Tooltip tooltipContent="Toggle sidebar" position={isSidebarCollapsed ? "right" : "top"} className="ml-4">
> <button
<MoveLeft className="h-3.5 w-3.5" /> type="button"
</button> className={`grid place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 ${
<button isSidebarCollapsed ? "w-full" : ""
type="button" }`}
className={`hidden place-items-center rounded-md p-1.5 text-custom-text-200 outline-none hover:bg-custom-background-90 hover:text-custom-text-100 md:grid ${ onClick={() => toggleSidebar(!isSidebarCollapsed)}
isSidebarCollapsed ? "w-full" : "" >
}`} <MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
onClick={() => toggleSidebar(!isSidebarCollapsed)} </button>
> </Tooltip>
<MoveLeft className={`h-3.5 w-3.5 duration-300 ${isSidebarCollapsed ? "rotate-180" : ""}`} />
</button>
</div> </div>
<div className="relative"> <div className="relative">