mirror/chartdb
1
0
Fork 0
mirror of https://github.com/chartdb/chartdb.git synced 2026-02-06 11:39:09 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat: add sidebar footer help buttons (#650)

Browse Source 
* feat: add sidebar footer help buttons

* fix

---------

Co-authored-by: Guy Ben-Aharon <baguy3@gmail.com>
This commit is contained in:
Jonathan Fishner
2025-04-07 12:47:56 +03:00
committed by GitHub
parent d94a71e9e1
commit fc46cbb893
1 changed files with 56 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/pages/editor-page/editor-sidebar/editor-sidebar.tsx
View File

@@ -2,6 +2,7 @@ import React, { useMemo } from 'react';
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupContent,
SidebarGroupLabel,
@@ -9,15 +10,18 @@ import {
SidebarMenuButton,
SidebarMenuItem,
} from '@/components/sidebar/sidebar';
import { Twitter, BookOpen } from 'lucide-react';
import { SquareStack, Table, Workflow } from 'lucide-react';
import { useLayout } from '@/hooks/use-layout';
import { useTranslation } from 'react-i18next';
import { DiscordLogoIcon } from '@radix-ui/react-icons';
export interface SidebarItem {
title: string;
icon: React.FC;
onClick: () => void;
active: boolean;
badge?: string;
}
export interface EditorSidebarProps {}
@@ -58,6 +62,33 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
],
[selectSidebarSection, selectedSidebarSection, t, showSidePanel]
);
const footerItems: SidebarItem[] = useMemo(
() => [
{
title: 'Discord',
icon: DiscordLogoIcon,
onClick: () =>
window.open('https://discord.gg/QeFwyWSKwC', '_blank'),
active: false,
},
{
title: 'Twitter',
icon: Twitter,
onClick: () =>
window.open('https://x.com/jonathanfishner', '_blank'),
active: false,
},
{
title: 'Documentation',
icon: BookOpen,
onClick: () => window.open('https://docs.chartdb.io', '_blank'),
active: false,
},
],
[]
);
return (
<Sidebar
side="left"
@@ -89,6 +120,31 @@ export const EditorSidebar: React.FC<EditorSidebarProps> = () => {
</SidebarGroupContent>
</SidebarGroup>
</SidebarContent>
<SidebarFooter>
<SidebarMenu>
{footerItems.map((item) => (
<SidebarMenuItem key={item.title}>
{item.badge && (
<span className="absolute -right-1 -top-1 rounded-full bg-pink-500 px-[3px] py-px text-[8px] font-semibold text-white">
{item.badge}
</span>
)}
<SidebarMenuButton
className="hover:bg-gray-200 data-[active=true]:bg-gray-100 data-[active=true]:text-pink-600 data-[active=true]:hover:bg-pink-100 dark:hover:bg-gray-800 dark:data-[active=true]:bg-gray-900 dark:data-[active=true]:text-pink-400 dark:data-[active=true]:hover:bg-pink-950"
isActive={item.active}
asChild
tooltip={item.title}
>
<button onClick={item.onClick}>
<item.icon />
<span>{item.title}</span>
</button>
</SidebarMenuButton>
</SidebarMenuItem>
))}
</SidebarMenu>
</SidebarFooter>
</Sidebar>
);
};