This commit is contained in:
McPizza
2024-12-04 23:32:55 +00:00
parent 48cb5f6e9b
commit 8b2a866994
3 changed files with 15 additions and 11 deletions
@@ -9,24 +9,30 @@ export type TNotification = {
title?: string; title?: string;
text: ReactNode; text: ReactNode;
children?: ReactNode; children?: ReactNode;
cta?: ReactNode; callToAction?: ReactNode;
copyActions?: { icon?: IconDefinition; value: string; name: string; label?: string }[]; copyActions?: { icon?: IconDefinition; value: string; name: string; label?: string }[];
}; };
export const NotificationContent = ({ title, text, children, cta, copyActions }: TNotification) => { export const NotificationContent = ({
title,
text,
children,
callToAction,
copyActions
}: TNotification) => {
return ( return (
<div className="msg-container"> <div className="msg-container">
{title && <div className="text-md mb-1 font-medium">{title}</div>} {title && <div className="text-md mb-1 font-medium">{title}</div>}
<div className={title ? "text-sm text-neutral-400" : "text-md"}>{text}</div> <div className={title ? "text-sm text-neutral-400" : "text-md"}>{text}</div>
{children && <div className="mt-2">{children}</div>} {children && <div className="mt-2">{children}</div>}
{(cta || copyActions) && ( {(callToAction || copyActions) && (
<div <div
className={twMerge( className={twMerge(
"mt-2 flex h-7 w-full flex-row items-end gap-2", "mt-2 flex h-7 w-full flex-row items-end gap-2",
cta ? "justify-between" : "justify-end" callToAction ? "justify-between" : "justify-end"
)} )}
> >
{cta} {callToAction}
{copyActions && ( {copyActions && (
<div className="flex h-7 flex-row items-center gap-2"> <div className="flex h-7 flex-row items-center gap-2">
@@ -24,10 +24,8 @@ export const CopyButton = ({
name, name,
icon = faCopy icon = faCopy
}: CopyButtonProps) => { }: CopyButtonProps) => {
const tooltipText = name ? `Copy ${name}` : "Copy to clipboard";
const [copyText, isCopying, setCopyText] = useTimedReset<string>({ const [copyText, isCopying, setCopyText] = useTimedReset<string>({
initialState: tooltipText initialState: name ? `Copy ${name}` : "Copy to clipboard"
}); });
async function handleCopyText() { async function handleCopyText() {
@@ -39,7 +37,7 @@ export const CopyButton = ({
<div> <div>
<Tooltip content={copyText} size={size === "xs" || size === "sm" ? "sm" : "md"}> <Tooltip content={copyText} size={size === "xs" || size === "sm" ? "sm" : "md"}>
<IconButton <IconButton
ariaLabel={tooltipText} ariaLabel={copyText}
variant={variant} variant={variant}
className={twMerge("group relative", color)} className={twMerge("group relative", color)}
size={size} size={size}
+2 -2
View File
@@ -33,7 +33,7 @@ export const queryClient = new QueryClient({
title: "Validation Error", title: "Validation Error",
type: "error", type: "error",
text: "Please check the input and try again.", text: "Please check the input and try again.",
cta: ( callToAction: (
<Modal> <Modal>
<ModalTrigger> <ModalTrigger>
<Button variant="outline_bg" size="xs"> <Button variant="outline_bg" size="xs">
@@ -80,7 +80,7 @@ export const queryClient = new QueryClient({
title: "Forbidden Access", title: "Forbidden Access",
type: "error", type: "error",
text: `${serverResponse.message}.`, text: `${serverResponse.message}.`,
cta: serverResponse?.details?.length ? ( callToAction: serverResponse?.details?.length ? (
<Modal> <Modal>
<ModalTrigger> <ModalTrigger>
<Button variant="outline_bg" size="xs"> <Button variant="outline_bg" size="xs">