aykhans/slash-e
1
0
Fork 0
mirror of https://github.com/aykhans/slash-e.git synced 2025-04-18 21:19:44 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

chore: add about dialog

Browse Source
This commit is contained in:
Steven 2023-06-25 22:39:26 +08:00
parent 5b9bef36c9
commit 9d5766b411
2 changed files with 86 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
web/src/components/AboutDialog.tsx Normal file
View File

@ -0,0 +1,37 @@
import { Button, Link, Modal, ModalDialog } from "@mui/joy";
import Icon from "./Icon";
interface Props {
onClose: () => void;
}
const AboutDialog: React.FC<Props> = (props: Props) => {
const { onClose } = props;
return (
<Modal open={true}>
<ModalDialog>
<div className="w-full flex flex-row justify-between items-center">
<span className="text-lg font-medium">About</span>
<Button variant="plain" onClick={onClose}>
<Icon.X className="w-5 h-auto text-gray-600" />
</Button>
</div>
<div className="max-w-full w-80 sm:w-96">
<p>
<span className="font-medium">Shortify</span> is a free and open source project. It is a simple bookmarking tool that allows you
to save your favorite links and access them from anywhere.
</p>
<div className="mt-1">
<span className="mr-2">See more in:</span>
<Link variant="plain" href="https://github.com/boojack/shortify">
GitHub
</Link>
</div>
</div>
</ModalDialog>
</Modal>
);
};
export default AboutDialog;

85
web/src/components/Header.tsx
View File

@ -1,56 +1,69 @@
import { Avatar } from "@mui/joy";
import { useState } from "react";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { useAppSelector } from "../stores"; import { useAppSelector } from "../stores";
import Icon from "./Icon"; import Icon from "./Icon";
import Dropdown from "./common/Dropdown"; import Dropdown from "./common/Dropdown";
import { Avatar } from "@mui/joy"; import AboutDialog from "./AboutDialog";
const Header: React.FC = () => { const Header: React.FC = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const user = useAppSelector((state) => state.user).user as User; const user = useAppSelector((state) => state.user).user as User;
const [showAboutDialog, setShowAboutDialog] = useState<boolean>(false);
const handleSignOutButtonClick = async () => { const handleSignOutButtonClick = async () => {
navigate("/auth"); navigate("/auth");
}; };
return ( return (
<div className="w-full bg-amber-50"> <>
<div className="w-full max-w-4xl mx-auto px-3 py-5 flex flex-row justify-between items-center"> <div className="w-full bg-amber-50">
<div className="flex flex-row justify-start items-center shrink mr-2"> <div className="w-full max-w-4xl mx-auto px-3 py-5 flex flex-row justify-between items-center">
<Link to="/" className="text-base font-mono font-medium cursor-pointer flex flex-row justify-start items-center"> <div className="flex flex-row justify-start items-center shrink mr-2">
<img src="/logo.png" className="w-8 h-auto mr-2" alt="" /> <Link to="/" className="text-base font-mono font-medium cursor-pointer flex flex-row justify-start items-center">
Shortify <img src="/logo.png" className="w-8 h-auto mr-2" alt="" />
</Link> Shortify
</div> </Link>
<div className="relative flex-shrink-0"> </div>
<Dropdown <div className="relative flex-shrink-0">
trigger={ <Dropdown
<button className="flex flex-row justify-end items-center cursor-pointer"> trigger={
<Avatar size="sm" variant="plain" /> <button className="flex flex-row justify-end items-center cursor-pointer">
<span>{user.nickname}</span> <Avatar size="sm" variant="plain" />
<Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" /> <span>{user.nickname}</span>
</button> <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
}
actionsClassName="!w-36"
actions={
<>
<Link
to="/setting"
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
>
<Icon.Settings className="w-4 h-auto mr-2" /> Setting
</Link>
<button
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
onClick={() => handleSignOutButtonClick()}
>
<Icon.LogOut className="w-4 h-auto mr-2" /> Sign out
</button> </button>
</> }
} actionsClassName="!w-36"
></Dropdown> actions={
<>
<Link
to="/setting"
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
>
<Icon.Settings className="w-4 h-auto mr-2" /> Setting
</Link>
<button
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
onClick={() => setShowAboutDialog(true)}
>
<Icon.Info className="w-4 h-auto mr-2" /> About
</button>
<button
className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
onClick={() => handleSignOutButtonClick()}
>
<Icon.LogOut className="w-4 h-auto mr-2" /> Sign out
</button>
</>
}
></Dropdown>
</div>
</div> </div>
</div> </div>
</div>
{showAboutDialog && <AboutDialog onClose={() => setShowAboutDialog(false)} />}
</>
); );
}; };