44 lines
1000 B
TypeScript
44 lines
1000 B
TypeScript
|
import StyledSidebarButton from "components/system/StartMenu/Sidebar/StyledSidebarButton";
|
||
|
|
import { useRef } from "react";
|
||
|
|
import { spotlightEffect } from "utils/spotlightEffect";
|
||
|
|
|
||
|
|
type SidebarButton = {
|
||
|
|
action?: () => void;
|
||
|
|
active?: boolean;
|
||
|
|
heading?: boolean;
|
||
|
|
icon: JSX.Element;
|
||
|
|
name: string;
|
||
|
|
tooltip?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
export type SidebarButtons = SidebarButton[];
|
||
|
|
|
||
|
|
const SidebarButtonComponent: FC<SidebarButton> = ({
|
||
|
|
action,
|
||
|
|
active,
|
||
|
|
heading,
|
||
|
|
icon,
|
||
|
|
name,
|
||
|
|
tooltip,
|
||
|
|
}) => {
|
||
|
|
const buttonRef = useRef<HTMLLIElement | null>(null);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<StyledSidebarButton
|
||
|
|
ref={buttonRef}
|
||
|
|
$active={active}
|
||
|
|
aria-label={name}
|
||
|
|
onClick={action}
|
||
|
|
title={tooltip}
|
||
|
|
{...spotlightEffect(buttonRef.current, true)}
|
||
|
|
>
|
||
|
|
<figure>
|
||
|
|
{icon}
|
||
|
|
<figcaption>{heading ? <strong>{name}</strong> : name}</figcaption>
|
||
|
|
</figure>
|
||
|
|
</StyledSidebarButton>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SidebarButtonComponent;
|