akanealw/misode.github.io
1
0
Fork 0
mirror of https://github.com/misode/misode.github.io.git synced 2026-04-23 23:27:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add tooltips to all buttons and tweak hover colors

Browse Source
This commit is contained in:
Misode
2021-09-25 07:10:54 +02:00
parent 7db47938b8
commit 2cb14a2c10
13 changed files with 251 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/Btn.tsx
View File

@@ -4,11 +4,13 @@ type BtnProps = {
icon?: keyof typeof Octicon,
label?: string,
active?: boolean,
tooltip?: string,
tooltipLoc?: 'se' | 'sw' | 'nw',
class?: string,
onClick?: (event: MouseEvent) => unknown,
}
export function Btn({ icon, label, active, class: class_, onClick }: BtnProps) {
return <div class={`btn${active ? ' active' : ''}${class_ ? ` ${class_}` : ''}`} onClick={onClick}>
export function Btn({ icon, label, active, class: clazz, tooltip, tooltipLoc, onClick }: BtnProps) {
return <div class={`btn${active ? ' active' : ''}${clazz ? ` ${clazz}` : ''}${tooltip ? ` tooltipped tip-${tooltipLoc ?? 'sw'}` : ''}`} onClick={onClick} aria-label={tooltip}>
{icon && Octicon[icon]}
{label && <span>{label}</span>}
</div>