From 8cff9808f022054b3893b5d7b85d9d33565fac07 Mon Sep 17 00:00:00 2001
From: songtianlun <tianlun.song@foxmail.com>
Date: Thu, 3 Jul 2025 00:38:43 +0800
Subject: [PATCH] click to enter

---
 src/app/page.tsx                  | 34 +++++++++++++++++++++++++------
 src/components/ComparisonForm.tsx | 15 ++++++++++++--
 2 files changed, 41 insertions(+), 8 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7be8b02..4363270 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -11,6 +11,19 @@ import { saveToHistory } from '@/utils/historyStorage';
 export default function Home() {
   const [comparisonResults, setComparisonResults] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
+  const [selectedExample, setSelectedExample] = useState<{ item1: string; item2: string } | null>(null);
+
+  const popularExamples = [
+    { item1: 'iPhone 15 Pro', item2: 'Samsung Galaxy S24 Ultra' },
+    { item1: 'React', item2: 'Vue.js' },
+    { item1: 'Coffee', item2: 'Tea' },
+    { item1: 'Netflix', item2: 'Disney+' },
+    { item1: 'Python', item2: 'JavaScript' }
+  ];
+
+  const handleExampleClick = (example: { item1: string; item2: string }) => {
+    setSelectedExample(example);
+  };
 
   const handleComparison = async (item1: string, item2: string, description1: string, description2: string) => {
     setIsLoading(true);
@@ -68,17 +81,26 @@ export default function Home() {
           <div className="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 mb-8">
             <h2 className="text-lg font-semibold text-gray-800 mb-4">Popular Comparisons</h2>
             <div className="flex flex-wrap justify-center gap-2 sm:gap-3">
-              <span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">iPhone vs Samsung Galaxy</span>
-              <span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">React vs Vue.js</span>
-              <span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">Coffee vs Tea</span>
-              <span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">Netflix vs Disney+</span>
-              <span className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md transition-shadow cursor-pointer">Python vs JavaScript</span>
+              {popularExamples.map((example, index) => (
+                <button
+                  key={index}
+                  onClick={() => handleExampleClick(example)}
+                  className="px-3 sm:px-4 py-2 bg-white rounded-full text-xs sm:text-sm font-medium text-gray-700 shadow-sm hover:shadow-md hover:bg-blue-50 hover:text-blue-700 transition-all cursor-pointer"
+                >
+                  {example.item1} vs {example.item2}
+                </button>
+              ))}
             </div>
           </div>
         </div>
 
         <div className={`bg-white rounded-xl shadow-lg p-6 sm:p-8 mb-8 transition-all duration-300 ${isLoading ? 'opacity-75 pointer-events-none' : ''}`}>
-          <ComparisonForm onSubmit={handleComparison} isLoading={isLoading} />
+          <ComparisonForm 
+            onSubmit={handleComparison} 
+            isLoading={isLoading} 
+            selectedExample={selectedExample}
+            onExampleUsed={() => setSelectedExample(null)}
+          />
         </div>
 
         <div className="mb-8">
diff --git a/src/components/ComparisonForm.tsx b/src/components/ComparisonForm.tsx
index bb7ff49..8c13e18 100644
--- a/src/components/ComparisonForm.tsx
+++ b/src/components/ComparisonForm.tsx
@@ -1,19 +1,30 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 
 interface ComparisonFormProps {
   onSubmit: (item1: string, item2: string, description1: string, description2: string) => void;
   isLoading: boolean;
+  selectedExample?: { item1: string; item2: string } | null;
+  onExampleUsed?: () => void;
 }
 
-export default function ComparisonForm({ onSubmit, isLoading }: ComparisonFormProps) {
+export default function ComparisonForm({ onSubmit, isLoading, selectedExample, onExampleUsed }: ComparisonFormProps) {
   const [item1, setItem1] = useState('');
   const [item2, setItem2] = useState('');
   const [description1, setDescription1] = useState('');
   const [description2, setDescription2] = useState('');
   const [showDescriptions, setShowDescriptions] = useState(false);
   
+  // Handle selected example
+  useEffect(() => {
+    if (selectedExample) {
+      setItem1(selectedExample.item1);
+      setItem2(selectedExample.item2);
+      onExampleUsed?.();
+    }
+  }, [selectedExample, onExampleUsed]);
+  
   const examples = [
     { item1: 'iPhone 15 Pro', item2: 'Samsung Galaxy S24 Ultra', category: 'Smartphones' },
     { item1: 'React', item2: 'Vue.js', category: 'Frontend Frameworks' },