47 lines
1.1 KiB
TypeScript
47 lines
1.1 KiB
TypeScript
import { VscAdd, VscCircuitBoard, VscCode, VscSettingsGear, VscSourceControl, VscTerminal } from "react-icons/vsc";
|
|
import { ReactElement, ReactNode } from "react";
|
|
|
|
const SideBar = () => {
|
|
return (
|
|
<div className="sidebar">
|
|
<SideBarIcon
|
|
tooltipText="Настройка Платы"
|
|
icon={<VscCircuitBoard size={40} />}
|
|
/>
|
|
<SideBarIcon
|
|
tooltipText="No Code"
|
|
icon={<VscSourceControl size={40} />}
|
|
/>
|
|
<SideBarIcon
|
|
tooltipText="Advence"
|
|
icon={<VscCode size={40} />}
|
|
/>
|
|
<SideBarIcon
|
|
tooltipText="Terminal"
|
|
icon={<VscTerminal size={40} />}
|
|
/>
|
|
<SideBarIcon
|
|
tooltipText="Setting"
|
|
icon={<VscSettingsGear size={40} />}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
type SideBarIconProps = {
|
|
className?: string;
|
|
tooltipText: string;
|
|
icon: ReactElement;
|
|
};
|
|
|
|
const SideBarIcon = ({ icon, tooltipText, className }: SideBarIconProps) => {
|
|
return (
|
|
<div className="sidebar-icon group">
|
|
{icon}
|
|
<span className="sidebar-tooltip group-hover:visible">{tooltipText}</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default SideBar;
|