60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import React, {
|
|
ComponentProps,
|
|
Dispatch,
|
|
ReactNode,
|
|
SetStateAction,
|
|
} from "react";
|
|
import { Copy, LucideProps } from "lucide-react";
|
|
import Button from "../layout/Button";
|
|
|
|
type Props = Omit<ComponentProps<typeof Button>, "title"> & {
|
|
slugText: string;
|
|
justIcon?: boolean;
|
|
noIcon?: boolean;
|
|
title?: string;
|
|
outlined?: boolean;
|
|
successMsg?: string | ReactNode;
|
|
icon?: ReactNode;
|
|
iconProps?: LucideProps;
|
|
setToastOpen?: Dispatch<SetStateAction<boolean>>;
|
|
};
|
|
|
|
export default function CopySlug({
|
|
slugText,
|
|
justIcon,
|
|
noIcon,
|
|
title,
|
|
outlined,
|
|
successMsg,
|
|
iconProps,
|
|
icon,
|
|
setToastOpen,
|
|
...props
|
|
}: Props) {
|
|
return (
|
|
<Button
|
|
title={title || slugText}
|
|
size="smaller"
|
|
variant="ghost"
|
|
color="gray"
|
|
{...props}
|
|
onClick={(e) => {
|
|
navigator.clipboard.writeText(slugText).then(() => {
|
|
setToastOpen?.(false);
|
|
|
|
setTimeout(() => {
|
|
setToastOpen?.(true);
|
|
}, 100);
|
|
});
|
|
props.onClick?.(e);
|
|
}}
|
|
style={{ ...(outlined ? {} : { padding: 0 }), ...props.style }}
|
|
>
|
|
{noIcon
|
|
? null
|
|
: icon || <Copy size={outlined ? 15 : 20} {...iconProps} />}
|
|
{!justIcon && (title ? title : "Copy Slug")}
|
|
</Button>
|
|
);
|
|
}
|