47 lines
1.3 KiB
TypeScript
47 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from "react";
|
|
import Link, { type LinkProps } from "next/link";
|
|
|
|
const baseClasses = [
|
|
"relative z-10 rounded-xl border border-lightline bg-lightbg p-4 shadow-lg dark:border-darkline dark:bg-darkbg",
|
|
"text-lighttext dark:text-darktext text-lg",
|
|
"hover:border-lightline-hover hover:text-trptkblue dark:hover:border-darkline-hover dark:hover:text-white",
|
|
"transition-all duration-200 ease-in-out",
|
|
"disabled:pointer-events-none disabled:opacity-50",
|
|
];
|
|
|
|
export const iconButtonClass = baseClasses.join(" ");
|
|
|
|
type IconButtonProps = ComponentPropsWithoutRef<"button"> & {
|
|
children: ReactNode;
|
|
};
|
|
|
|
export const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(
|
|
{ children, className, ...props },
|
|
ref,
|
|
) {
|
|
return (
|
|
<button
|
|
ref={ref}
|
|
type="button"
|
|
className={[...baseClasses, className].filter(Boolean).join(" ")}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</button>
|
|
);
|
|
});
|
|
|
|
type IconButtonLinkProps = Omit<ComponentPropsWithoutRef<"a">, keyof LinkProps> &
|
|
LinkProps & {
|
|
children: ReactNode;
|
|
};
|
|
|
|
export function IconButtonLink({ children, className, ...props }: IconButtonLinkProps) {
|
|
return (
|
|
<Link className={[...baseClasses, className].filter(Boolean).join(" ")} {...props}>
|
|
{children}
|
|
</Link>
|
|
);
|
|
}
|