opensource/sqlchat
1
0
Fork 0
mirror of https://github.com/sqlchat/sqlchat.git synced 2025-07-29 10:13:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: add data storage banner (#4)

Browse Source 
* chore: stash

* chore: add data storage banner

* chore: update
This commit is contained in:
boojack
2023-03-29 10:02:19 +08:00
committed by GitHub
parent 017508cc50
commit 83eaa71fb6
8 changed files with 243 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
components/DataStorageBanner.tsx Normal file
View File

@ -0,0 +1,33 @@
import { useLocalStorage } from "react-use";
import Icon from "./Icon";
interface Props {
className?: string;
alwaysShow?: boolean;
}
const DataStorageBanner = (props: Props) => {
const { className, alwaysShow } = props;
const [hideBanner, setHideBanner] = useLocalStorage("hide-local-storage-banner", false);
const show = alwaysShow || !hideBanner;
return (
<div
className={`${!show && "!hidden"} ${
className || ""
} relative w-full flex flex-row justify-start sm:justify-center items-center px-4 py-1 bg-gray-100`}
>
<span className="text-sm leading-6 pr-4">
<Icon.IoInformationCircleOutline className="inline-block h-5 w-auto -mt-0.5 mr-0.5 opacity-80" />
Connection settings are stored in your local browser
</span>
{!alwaysShow && (
<button className="absolute right-2 sm:right-4 opacity-60 hover:opacity-100" onClick={() => setHideBanner(true)}>
<Icon.BiX className="w-6 h-auto" />
</button>
)}
</div>
);
};
export default DataStorageBanner;