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
|
**/qubeclan
|
||||||
**/testdir
|
**/testdir
|
||||||
democlan
|
democlan
|
||||||
|
example_clan
|
||||||
result*
|
result*
|
||||||
/pkgs/clan-cli/clan_cli/nixpkgs
|
/pkgs/clan-cli/clan_cli/nixpkgs
|
||||||
/pkgs/clan-cli/clan_cli/webui/assets
|
/pkgs/clan-cli/clan_cli/webui/assets
|
||||||
|
|
|
@ -18,6 +18,7 @@ import "./globals.css";
|
||||||
import { darkTheme, lightTheme } from "./theme/themes";
|
import { darkTheme, lightTheme } from "./theme/themes";
|
||||||
|
|
||||||
import { WithAppState } from "@/components/hooks/useAppContext";
|
import { WithAppState } from "@/components/hooks/useAppContext";
|
||||||
|
import { ClanToolbar } from "@/components/clanToolbar";
|
||||||
|
|
||||||
const roboto = localFont({
|
const roboto = localFont({
|
||||||
src: [
|
src: [
|
||||||
|
@ -69,6 +70,7 @@ export default function RootLayout({
|
||||||
!showSidebar && translate
|
!showSidebar && translate
|
||||||
} flex h-full w-full flex-col overflow-y-scroll transition-[margin] duration-150 ease-in-out`}
|
} 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="static top-0 mb-2 py-2">
|
||||||
<div className="grid grid-cols-3">
|
<div className="grid grid-cols-3">
|
||||||
<div className="col-span-1">
|
<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