rsp2k/headplane
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

feat: add new menu

Browse source
This commit is contained in:
Aarnav Tale 2025-01-28 16:04:42 -05:00
parent 28e40eecbf
commit a19eb6bcda
No known key found for this signature in database
13 changed files with 428 additions and 399 deletions
Download patch file Download diff file Expand all files Collapse all files

37
app/components/IconButton.tsx
View file

@ -1,17 +1,21 @@
import type { Dispatch, SetStateAction } from 'react';
import React, { useRef } from 'react';
import { useButton, type AriaButtonOptions } from 'react-aria';
import { type AriaButtonOptions, useButton } from 'react-aria';
import { cn } from '~/utils/cn';
export interface IconButtonProps extends AriaButtonOptions<'button'> {
variant?: 'heavy' | 'light'
className?: string
children: React.ReactNode
label: string
variant?: 'heavy' | 'light';
className?: string;
children: React.ReactNode;
label: string;
ref?: React.RefObject<HTMLButtonElement | null>;
}
export default function IconButton({ variant = 'light', ...props }: IconButtonProps) {
const ref = useRef<HTMLButtonElement | null>(null);
export default function IconButton({
variant = 'light',
...props
}: IconButtonProps) {
// In case the button is used as a trigger ref
const ref = props.ref ?? useRef<HTMLButtonElement | null>(null);
const { buttonProps } = useButton(props, ref);
return (
@ -25,17 +29,18 @@ export default function IconButton({ variant = 'light', ...props }: IconButtonPr
props.isDisabled && 'opacity-60 cursor-not-allowed',
...(variant === 'heavy'
? [
'bg-headplane-900 dark:bg-headplane-50 font-semibold',
'hover:bg-headplane-900/90 dark:hover:bg-headplane-50/90',
'text-headplane-200 dark:text-headplane-800'
] : [
'bg-headplane-100 dark:bg-headplane-700/30 font-medium',
'hover:bg-headplane-200/90 dark:hover:bg-headplane-800/30',
]),
'bg-headplane-900 dark:bg-headplane-50 font-semibold',
'hover:bg-headplane-900/90 dark:hover:bg-headplane-50/90',
'text-headplane-200 dark:text-headplane-800',
]
: [
'bg-headplane-100 dark:bg-headplane-700/30 font-medium',
'hover:bg-headplane-200/90 dark:hover:bg-headplane-800/30',
]),
props.className,
)}
>
{props.children}
</button>
)
);
}