File size: 2,957 Bytes
10c8635 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
import React, { useState } from 'react';
import { useLocation } from 'wouter';
import { Search } from 'lucide-react';
import { ThemeToggle } from '@/components/ThemeToggle';
import { Logo } from '@/components/Logo';
export function Home() {
const [query, setQuery] = useState('');
const [, setLocation] = useLocation();
const handleSearch = (e: React.FormEvent) => {
e.preventDefault();
if (query.trim()) {
setLocation(`/search?q=${encodeURIComponent(query.trim())}`);
}
};
return (
<div className="min-h-screen flex flex-col items-center justify-center bg-background">
<ThemeToggle />
<div className="w-full max-w-3xl px-4 animate-fade-in">
<div className="flex flex-col items-center mb-8">
<Logo className="mb-6" />
<h1 className="text-2xl lg:text-4xl font-bold text-center bg-clip-text text-transparent bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-200">
What do you want to know?
</h1>
</div>
<form onSubmit={handleSearch} className="w-full">
<div className="relative group">
<input
type="text"
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Ask anything..."
className="w-full px-6 py-4 text-lg rounded-full border border-gray-200
focus:border-google-blue focus:ring-4 focus:ring-google-blue/20 outline-none
transition-all duration-300 shadow-sm
group-hover:shadow-lg group-hover:border-gray-300
dark:bg-gray-800 dark:border-gray-700 dark:text-white
dark:focus:border-google-blue dark:group-hover:border-gray-600
pr-14 truncate"
style={{ fontFamily: 'Inter, sans-serif' }}
autoFocus
/>
<button
type="submit"
disabled={!query.trim()}
className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full
hover:bg-gray-100 dark:hover:bg-gray-700 transition-all duration-300
hover:scale-110 active:scale-95 disabled:opacity-50 disabled:hover:scale-100
disabled:hover:bg-transparent z-10 bg-background dark:bg-gray-800"
>
<Search className="w-5 h-5 text-gray-500 dark:text-gray-400" />
</button>
</div>
</form>
<div className="mt-8 text-center text-sm text-gray-500 dark:text-gray-400 animate-fade-in space-y-1">
<div>Powered by Gemini 2.0</div>
<div>
Created by <a href="http://x.com/ammaar" target="_blank" rel="noopener noreferrer" className="hover:text-gray-800 dark:hover:text-gray-300 transition-colors">@ammaar</a>
</div>
</div>
</div>
</div>
);
}
|