add notification component

Author: christiansamaniego-okta

src/features/common/components/context-menu/context-menu.tsx

@@ -10,10 +10,10 @@ import jwtWordmark from "@/public/img/jwt-wordmark.svg?raw";
 interface ContextMenuProps {
   dictionary: BrandDictionaryModel;
   position: { x: number; y: number } | null;
+  setIsCopied: (value: React.SetStateAction<boolean>) => void;
 }
 
-const ContextMenu: FC<ContextMenuProps> = ({ dictionary, position }) => {
-  const [isCopied, setIsCopied] = useState(false);
+const ContextMenu: FC<ContextMenuProps> = ({ dictionary, position, setIsCopied }) => {
   if (!position) return null;
 
   const handleIconCopy = async (svgString: string) => {
@@ -24,10 +24,6 @@ const ContextMenu: FC<ContextMenuProps> = ({ dictionary, position }) => {
     try {
       await navigator.clipboard.writeText(svgString);
       setIsCopied(true);
-
-      setTimeout(() => {
-        setIsCopied(false);
-      }, 2000);
     } catch (err) {
       console.error("Failed to copy SVG: ", err);
     }

src/features/common/components/notification/notification.component.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import styles from './notification.module.scss';
+
+interface NotificationProps {
+  message: string;
+  onClose: () => void;
+}
+
+const Notification = ({ message, onClose }: NotificationProps) => {
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      onClose();
+    }, 2000);
+
+    return () => clearTimeout(timer);
+  }, [onClose]);
+
+  return createPortal(
+    <div className={styles.container}>
+      {message}
+    </div>,
+    document.body
+  );
+};
+
+export default Notification;

src/features/common/components/notification/notification.module.scss

@@ -0,0 +1,46 @@
+.container {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  transform: translateY(0);
+  padding: 0.75rem 1rem;
+  background-color: var(--color_bg_layer_alternate-bold);
+  color: var(--color_fg_bold);
+  border-radius: 0.75rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  z-index: 9010;
+  animation:
+    fadeIn 0.3s,
+    fadeOut 0.3s 1.7s;
+  box-shadow:
+    0 0 0 1px rgba(0, 0, 0, 0.12),
+    0 2px 2px -1px rgba(0, 0, 0, 0.04),
+    0 4px 4px -2px rgba(0, 0, 0, 0.04),
+    0 8px 8px -4px rgba(0, 0, 0, 0.04),
+    0 16px 16px -8px rgba(0, 0, 0, 0.04),
+    0 32px 32px -16px rgba(0, 0, 0, 0.04),
+    inset 0 -1px 1px -0.5px rgba(0, 0, 0, 0.04);
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}

src/features/common/components/site-brand/site-brand.component.tsx

@@ -7,6 +7,7 @@ import clsx from "clsx";
 import { JwtLogoComponent } from "../../assets/jwt-logo.component";
 import { JwtWordmarkComponent } from "../../assets/jwt-wordmark.component";
 import ContextMenu from "../context-menu/context-menu";
+import Notification from "../notification/notification.component";
 
 interface SiteBrandComponentProps extends PropsWithChildren {
   path: string;
@@ -17,6 +18,7 @@ export const SiteBrandComponent: React.FC<SiteBrandComponentProps> = ({
   path,
   languageCode,
 }) => {
+  const [isCopied, setIsCopied] = useState(false);
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   const [menuPosition, setMenuPosition] = useState<{
     x: number;
@@ -65,7 +67,10 @@ export const SiteBrandComponent: React.FC<SiteBrandComponentProps> = ({
           <div className={styles.tooltip}>{brandDictionary.tooltip}</div>
         )}
       </Link>
-      <ContextMenu dictionary={brandDictionary} position={menuPosition} />
+      <ContextMenu dictionary={brandDictionary} position={menuPosition} setIsCopied={setIsCopied}/>
+      {isCopied && (
+        <Notification message={brandDictionary.alertMessage} onClose={() => setIsCopied(false)}/>
+      )}
     </div>
   );
 };

src/features/localization/dictionaries/images/en.tsx

@@ -1,6 +1,7 @@
 import { BrandDictionaryModel } from "../../models/brand-dictionary.model";
 
 export const enBrandDictionary: BrandDictionaryModel = {
+  alertMessage: "SVG copied to clipboard",
   tooltip: "Right-click or long-press for logo options",
   menu: {
     brand: {

src/features/localization/dictionaries/images/ja.tsx

@@ -1,6 +1,7 @@
 import { BrandDictionaryModel } from "../../models/brand-dictionary.model";
 
 export const jaBrandDictionary: BrandDictionaryModel = {
+  alertMessage: "SVG copied to clipboard",
   tooltip: "Right-click or long-press for logo options",
   menu: {
     brand: {

src/features/localization/models/brand-dictionary.model.ts

@@ -25,5 +25,6 @@ interface BrandMenu {
 
 export interface BrandDictionaryModel {
   tooltip: string;
+  alertMessage: string;
   menu: BrandMenu;
 }