61e5cbd4e5
- Add HelpButton component with question mark icon - Integrate help button into sidebar next to settings button - Link opens documentation in new tab when clicked - Maintain consistent styling with existing sidebar buttons - Improve user accessibility to documentation resources
36 lines
950 B
TypeScript
36 lines
950 B
TypeScript
import { memo } from 'react';
|
|
import { IconButton } from '~/components/ui/IconButton';
|
|
interface SettingsButtonProps {
|
|
onClick: () => void;
|
|
}
|
|
|
|
export const SettingsButton = memo(({ onClick }: SettingsButtonProps) => {
|
|
return (
|
|
<IconButton
|
|
onClick={onClick}
|
|
icon="i-ph:gear"
|
|
size="xl"
|
|
title="Settings"
|
|
data-testid="settings-button"
|
|
className="text-[#666] hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10 transition-colors"
|
|
/>
|
|
);
|
|
});
|
|
|
|
interface HelpButtonProps {
|
|
onClick: () => void;
|
|
}
|
|
|
|
export const HelpButton = memo(({ onClick }: HelpButtonProps) => {
|
|
return (
|
|
<IconButton
|
|
onClick={onClick}
|
|
icon="i-ph:question"
|
|
size="xl"
|
|
title="Help & Documentation"
|
|
data-testid="help-button"
|
|
className="text-[#666] hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-item-backgroundActive/10 transition-colors"
|
|
/>
|
|
);
|
|
});
|