opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-09-29 02:54:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add Tooltip kit component

Browse Source
This commit is contained in:
steven
2023-04-11 11:31:01 +08:00
parent 87dfddcfe6
commit 8e43e7b0ac
4 changed files with 93 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/ConnectionSidebar.tsx
View File

@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
import { useConversationStore, useConnectionStore, useLayoutStore, ResponsiveWidth } from "@/store";
import { Conversation, Connection } from "@/types";
import Select from "./kit/Select";
import Tooltip from "./kit/Tooltip";
import Icon from "./Icon";
import EngineIcon from "./EngineIcon";
import LocaleSwitch from "./LocaleSwitch";
@ -189,23 +190,26 @@ const ConnectionSidebar = () => {
<EngineIcon engine={connection.engineType} className="w-auto h-full mx-auto" />
</button>
))}
<button
className="tooltip tooltip-right w-10 h-10 mt-4 ml-2 p-2 bg-gray-100 rounded-full text-gray-500 cursor-pointer"
data-tip={t("connection.new")}
onClick={() => toggleCreateConnectionModal(true)}
>
<Icon.AiOutlinePlus className="w-auto h-full mx-auto" />
</button>
<Tooltip title={t("connection.new")} side="right">
<button
className="w-10 h-10 mt-4 ml-2 p-2 bg-gray-100 rounded-full text-gray-500 cursor-pointer"
onClick={() => toggleCreateConnectionModal(true)}
>
<Icon.AiOutlinePlus className="w-auto h-full mx-auto" />
</button>
</Tooltip>
</div>
<div className="w-full flex flex-col justify-end items-center">
<LocaleSwitch />
<button
className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
data-tip={t("common.setting")}
onClick={() => toggleSettingModal(true)}
>
<Icon.IoMdSettings className="text-gray-600 w-6 h-auto" />
</button>
<Tooltip title={t("common.setting")} side="right">
<button
className=" w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
data-tip={t("common.setting")}
onClick={() => toggleSettingModal(true)}
>
<Icon.IoMdSettings className="text-gray-600 w-6 h-auto" />
</button>
</Tooltip>
</div>
</div>
<div className="relative p-4 pb-0 w-64 h-full overflow-y-auto flex flex-col justify-start items-start bg-gray-100">

33
src/components/kit/Tooltip.tsx Normal file
View File

@ -0,0 +1,33 @@
import * as TooltipUI from "@radix-ui/react-tooltip";
type Side = "top" | "right" | "bottom" | "left";
interface Props {
title: string;
side: Side;
children: React.ReactNode;
}
const Tooltip = (props: Props) => {
const { title, side, children } = props;
return (
<TooltipUI.Provider delayDuration={0} skipDelayDuration={0}>
<TooltipUI.Root>
<TooltipUI.Trigger asChild>{children}</TooltipUI.Trigger>
<TooltipUI.Portal>
<TooltipUI.Content
className="bg-zinc-800 text-gray-200 dark:bg-black text-sm p-1 px-2 rounded-md z-[99999]"
side={side}
sideOffset={6}
>
{title}
<TooltipUI.Arrow />
</TooltipUI.Content>
</TooltipUI.Portal>
</TooltipUI.Root>
</TooltipUI.Provider>
);
};
export default Tooltip;