songtianlun/anything-vs-anything
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

click to enter

Browse Source
This commit is contained in:
songtianlun 2025-07-03 00:38:43 +08:00
parent e18588d5d4
commit 8cff9808f0
2 changed files with 41 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/page.tsx
View File

@ -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">

15
src/components/ComparisonForm.tsx
View File

@ -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' },