+ {toasts.map((toast) => (
+
+
+ {toast.type === 'success' && '✓'}
+ {toast.type === 'error' && '✕'}
+ {toast.type === 'info' && 'ℹ'}
+
+ {toast.message}
+
+
+ ))}
+
+ >
+ );
+}
diff --git a/frontend/src/pages/ProductDetail.tsx b/frontend/src/pages/ProductDetail.tsx
index 64dc9e7..9c46bdf 100644
--- a/frontend/src/pages/ProductDetail.tsx
+++ b/frontend/src/pages/ProductDetail.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import Layout from '../components/Layout';
import PriceChart from '../components/PriceChart';
+import { useToast } from '../context/ToastContext';
import {
productsApi,
pricesApi,
@@ -14,6 +15,7 @@ import {
export default function ProductDetail() {
const { id } = useParams<{ id: string }>();
const navigate = useNavigate();
+ const { showToast } = useToast();
const [product, setProduct] = useState