fix some bug

src/app/page.tsx

@@ -3,6 +3,8 @@
 import { useState } from 'react';
 import ComparisonForm from '@/components/ComparisonForm';
 import ComparisonResults from '@/components/ComparisonResults';
+import ComparisonHistory, { HistoryItem } from '@/components/ComparisonHistory';
+import { saveToHistory } from '@/utils/historyStorage';
 
 export default function Home() {
   const [comparisonResults, setComparisonResults] = useState<string | null>(null);
@@ -10,6 +12,7 @@ export default function Home() {
 
   const handleComparison = async (item1: string, item2: string, description1: string, description2: string) => {
     setIsLoading(true);
+    
     try {
       const response = await fetch('/api/compare', {
         method: 'POST',
@@ -30,6 +33,9 @@ export default function Home() {
 
       const data = await response.json();
       setComparisonResults(data.comparison);
+      
+      // Save to history
+      saveToHistory(item1, item2, description1, description2, data.comparison);
     } catch (error) {
       console.error('Error:', error);
       setComparisonResults('Error occurred while comparing items.');
@@ -37,6 +43,10 @@ export default function Home() {
       setIsLoading(false);
     }
   };
+  
+  const handleSelectHistory = (historyItem: HistoryItem) => {
+    setComparisonResults(historyItem.result);
+  };
 
   return (
     <main className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-6 md:py-12">
@@ -69,8 +79,12 @@ export default function Home() {
           <ComparisonForm onSubmit={handleComparison} isLoading={isLoading} />
         </div>
 
+        <div className="mb-8">
+          <ComparisonHistory onSelectHistory={handleSelectHistory} />
+        </div>
+        
         {comparisonResults && (
-          <div className="bg-white rounded-xl shadow-lg p-8">
+          <div className="bg-white rounded-xl shadow-lg p-8 mt-8">
             <ComparisonResults results={comparisonResults} />
           </div>
         )}