File "appearance-button.tsx"
Full Path: /home/markqprx/iniasli.pro/client/admin/appearance/appearance-button.tsx
File size: 1.2 KB
MIME-type: text/html
Charset: utf-8
import clsx from 'clsx';
import {forwardRef, ReactNode} from 'react';
import {KeyboardArrowRightIcon} from '../../icons/material/KeyboardArrowRight';
import {ButtonBase, ButtonBaseProps} from '../../ui/buttons/button-base';
interface Props extends ButtonBaseProps {
startIcon?: ReactNode;
description?: ReactNode;
}
export const AppearanceButton = forwardRef<HTMLButtonElement, Props>(
({startIcon, children, className, description, ...other}, ref) => {
return (
<ButtonBase
ref={ref}
display="flex"
className={clsx(
'relative mb-10 h-54 w-full items-center gap-10 rounded-input border bg px-14 text-sm hover:bg-hover',
className,
)}
variant={null}
{...other}
>
{startIcon}
<span className="block min-w-0">
<span className="block">{children}</span>
{description && (
<span className="block overflow-hidden overflow-ellipsis whitespace-nowrap text-xs text-muted">
{description}
</span>
)}
</span>
<KeyboardArrowRightIcon
aria-hidden
className="ml-auto text-muted icon-sm"
/>
</ButtonBase>
);
},
);