@djangocfg/layouts 2.1.110 → 2.1.111

package/src/snippets/PushNotifications/components/PushPrompt.tsx

@@ -8,9 +8,10 @@
  */
 
 import { Bell, X } from 'lucide-react';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 
 import { useAuth } from '@djangocfg/api/auth';
+import { useTypedT, type I18nTranslations } from '@djangocfg/i18n';
 import { Button } from '@djangocfg/ui-core';
 
 import { usePushNotifications } from '../hooks/usePushNotifications';
@@ -66,10 +67,19 @@ export function PushPrompt({
     vapidPublicKey,
     subscribeEndpoint,
   });
+  const t = useTypedT<I18nTranslations>();
 
   const [show, setShow] = useState(false);
   const [enabling, setEnabling] = useState(false);
 
+  const labels = useMemo(() => ({
+    enableNotifications: t('layouts.push.enableNotifications'),
+    stayUpdated: t('layouts.push.stayUpdated'),
+    enable: t('layouts.push.enable'),
+    notNow: t('layouts.push.notNow'),
+    dismiss: t('layouts.push.dismiss'),
+  }), [t]);
+
   // Check if should show
   useEffect(() => {
     // Wait for auth to complete, don't show for unauthenticated users
@@ -132,9 +142,9 @@ export function PushPrompt({
 
           {/* Content */}
           <div className="flex-1 min-w-0">
-            <p className="text-sm font-medium text-white mb-1">Enable notifications</p>
+            <p className="text-sm font-medium text-white mb-1">{labels.enableNotifications}</p>
             <p className="text-xs text-zinc-400 mb-3">
-              Stay updated with important updates and alerts
+              {labels.stayUpdated}
             </p>
 
             {/* Actions */}
@@ -145,14 +155,14 @@ export function PushPrompt({
                 size="sm"
                 variant="default"
               >
-                Enable
+                {labels.enable}
               </Button>
               <Button
                 onClick={handleDismiss}
                 size="sm"
                 variant="ghost"
               >
-                Not now
+                {labels.notNow}
               </Button>
             </div>
           </div>
@@ -163,7 +173,7 @@ export function PushPrompt({
             size="sm"
             variant="ghost"
             className="flex-shrink-0 p-1"
-            aria-label="Dismiss"
+            aria-label={labels.dismiss}
           >
             <X className="w-4 h-4" />
           </Button>