ui: add clan tool bar
To use for selecting a clan from the history
This commit is contained in:
parent
ff03944ff4
commit
648c6157ad
1
.gitignore
vendored
1
.gitignore
vendored
|
@ -4,6 +4,7 @@
|
|||
**/qubeclan
|
||||
**/testdir
|
||||
democlan
|
||||
example_clan
|
||||
result*
|
||||
/pkgs/clan-cli/clan_cli/nixpkgs
|
||||
/pkgs/clan-cli/clan_cli/webui/assets
|
||||
|
|
|
@ -18,6 +18,7 @@ import "./globals.css";
|
|||
import { darkTheme, lightTheme } from "./theme/themes";
|
||||
|
||||
import { WithAppState } from "@/components/hooks/useAppContext";
|
||||
import { ClanToolbar } from "@/components/clanToolbar";
|
||||
|
||||
const roboto = localFont({
|
||||
src: [
|
||||
|
@ -69,6 +70,7 @@ export default function RootLayout({
|
|||
!showSidebar && translate
|
||||
} flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
|
||||
>
|
||||
<ClanToolbar />
|
||||
<div className="static top-0 mb-2 py-2">
|
||||
<div className="grid grid-cols-3">
|
||||
<div className="col-span-1">
|
||||
|
|
65
pkgs/ui/src/components/clanToolbar/index.tsx
Normal file
65
pkgs/ui/src/components/clanToolbar/index.tsx
Normal file
|
@ -0,0 +1,65 @@
|
|||
import { IconButton, LinearProgress } from "@mui/material";
|
||||
import * as React from "react";
|
||||
import Menu from "@mui/material/Menu";
|
||||
import MenuItem from "@mui/material/MenuItem";
|
||||
import { useFlakeHistoryList } from "@/api/flake/flake";
|
||||
import DynamicFeedIcon from "@mui/icons-material/DynamicFeed";
|
||||
|
||||
interface ToolbarButtonProps {
|
||||
icon: React.ReactNode;
|
||||
onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
}
|
||||
function ToolbarButton(props: ToolbarButtonProps) {
|
||||
const { icon, onClick } = props;
|
||||
return (
|
||||
<div className="">
|
||||
<IconButton onClick={onClick}>{icon}</IconButton>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
type ToolbarItem = {
|
||||
icon: React.ReactNode;
|
||||
};
|
||||
const toolbarItems: ToolbarItem[] = [
|
||||
{
|
||||
icon: <DynamicFeedIcon />,
|
||||
},
|
||||
];
|
||||
export function ClanToolbar() {
|
||||
const { data, isLoading } = useFlakeHistoryList();
|
||||
const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
|
||||
const open = Boolean(anchorEl);
|
||||
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
|
||||
setAnchorEl(event.currentTarget);
|
||||
};
|
||||
const handleClose = () => {
|
||||
setAnchorEl(null);
|
||||
};
|
||||
return (
|
||||
<div className="grid w-full auto-cols-min grid-rows-1 grid-flow-col justify-end place-items-end gap-2">
|
||||
{toolbarItems.map((item, index) => (
|
||||
<ToolbarButton key={index} icon={item.icon} onClick={handleClick} />
|
||||
))}
|
||||
<Menu
|
||||
id="basic-menu"
|
||||
anchorEl={anchorEl}
|
||||
open={open}
|
||||
onClose={handleClose}
|
||||
MenuListProps={{
|
||||
"aria-labelledby": "basic-button",
|
||||
}}
|
||||
>
|
||||
{isLoading ? (
|
||||
<LinearProgress />
|
||||
) : (
|
||||
data?.data.map((item, index) => (
|
||||
<MenuItem key={index}>{item}</MenuItem>
|
||||
))
|
||||
)}
|
||||
{!isLoading && data?.data.length === 0 && (
|
||||
<MenuItem>No Clan History</MenuItem>
|
||||
)}
|
||||
</Menu>
|
||||
</div>
|
||||
);
|
||||
}
|
Loading…
Reference in New Issue
Block a user