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

1
package.json
View File

@ -14,6 +14,7 @@
"@mui/material": "^5.11.14",
"@mui/styled-engine-sc": "^5.11.11",
"@radix-ui/react-select": "^1.2.1",
"@radix-ui/react-tooltip": "^1.0.5",
"@vercel/analytics": "^0.1.11",
"axios": "^1.3.4",
"csstype": "^3.1.1",

41
pnpm-lock.yaml generated
View File

@ -16,6 +16,9 @@ dependencies:
'@radix-ui/react-select':
specifier: ^1.2.1
version: 1.2.1(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-tooltip':
specifier: ^1.0.5
version: 1.0.5(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)
'@vercel/analytics':
specifier: ^0.1.11
version: 0.1.11(react@18.2.0)
@ -966,6 +969,19 @@ packages:
react-dom: 18.2.0(react@18.2.0)
dev: false
/@radix-ui/react-presence@1.0.0(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==}
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.21.0
'@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
'@radix-ui/react-use-layout-effect': 1.0.0(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
dev: false
/@radix-ui/react-primitive@1.0.2(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-zY6G5Qq4R8diFPNwtyoLRZBxzu1Z+SXMlfYpChN7Dv8gvmx9X3qhDqiLWvKseKVJMuedFeU/Sa0Sy/Ia+t06Dw==}
peerDependencies:
@ -1022,6 +1038,31 @@ packages:
react: 18.2.0
dev: false
/@radix-ui/react-tooltip@1.0.5(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0):
resolution: {integrity: sha512-cDKVcfzyO6PpckZekODJZDe5ZxZ2fCZlzKzTmPhe4mX9qTHRfLcKgqb0OKf22xLwDequ2tVleim+ZYx3rabD5w==}
peerDependencies:
react: ^16.8 || ^17.0 || ^18.0
react-dom: ^16.8 || ^17.0 || ^18.0
dependencies:
'@babel/runtime': 7.21.0
'@radix-ui/primitive': 1.0.0
'@radix-ui/react-compose-refs': 1.0.0(react@18.2.0)
'@radix-ui/react-context': 1.0.0(react@18.2.0)
'@radix-ui/react-dismissable-layer': 1.0.3(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-id': 1.0.0(react@18.2.0)
'@radix-ui/react-popper': 1.1.1(@types/react@18.0.28)(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-portal': 1.0.2(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-presence': 1.0.0(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-primitive': 1.0.2(react-dom@18.2.0)(react@18.2.0)
'@radix-ui/react-slot': 1.0.1(react@18.2.0)
'@radix-ui/react-use-controllable-state': 1.0.0(react@18.2.0)
'@radix-ui/react-visually-hidden': 1.0.2(react-dom@18.2.0)(react@18.2.0)
react: 18.2.0
react-dom: 18.2.0(react@18.2.0)
transitivePeerDependencies:
- '@types/react'
dev: false
/@radix-ui/react-use-callback-ref@1.0.0(react@18.2.0):
resolution: {integrity: sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==}
peerDependencies:

10
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>
))}
<Tooltip title={t("connection.new")} side="right">
<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")}
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 />
<Tooltip title={t("common.setting")} side="right">
<button
className="tooltip tooltip-right w-10 h-10 p-1 rounded-full flex flex-row justify-center items-center hover:bg-gray-100"
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;