web sayfa oluşturma

import { useState, useEffect } from 'react';
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Dialog, DialogContent, DialogTrigger, DialogTitle } from "@/components/ui/dialog";

export default function Home() {
  const [searchQuery, setSearchQuery] = useState('');
  const [results, setResults] = useState([]);
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [rememberMe, setRememberMe] = useState(false);

  useEffect(() => {
    const savedLogin = localStorage.getItem('loggedIn');
    if (savedLogin === 'true') {
      setIsLoggedIn(true);
    }
  }, []);

  const handleLogin = () => {
    if (username === 'admin' && password === '1234') {
      if (rememberMe) localStorage.setItem('loggedIn', 'true');
      setIsLoggedIn(true);
    } else {
      alert("Giriş başarısız");
    }
  };

  const handleSearch = () => {
    const dummy = [
      { name: 'Ömer Asam', firm: 'Çağ Plus' },
      { name: 'Hasan Kaya', firm: 'Çağ Plus' },
      { name: 'Mehmet Yılmaz', firm: 'İz Yapı' },
    ];
    const filtered = dummy.filter(item =>
      item.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
      item.firm.toLowerCase().includes(searchQuery.toLowerCase())
    );
    setResults(filtered);
  };

  return (
    <div className="min-h-screen bg-gray-100 flex flex-col items-center justify-start p-6">
      <h1 className="text-3xl font-bold mt-8 mb-4 text-center">Artı 2000</h1>
      <h2 className="text-xl font-medium mb-6 text-center">Taşeron Çalışan Arama</h2>

      <div className="flex gap-2 mb-6">
        <Input
          placeholder="İsim ya da firma ismi yaz..."
          value={searchQuery}
          onChange={(e) => setSearchQuery(e.target.value)}
        />
        <Button onClick={handleSearch}>Ara</Button>
      </div>

      <div className="mb-6">
        <Button variant="outline">Tüm Liste</Button>
      </div>

      <div className="mb-10">
        <Dialog>
          <DialogTrigger asChild>
            <Button>Giriş Yap</Button>
          </DialogTrigger>
          <DialogContent>
            <DialogTitle>Giriş Paneli</DialogTitle>
            <div className="flex flex-col gap-3 mt-2">
              <Input
                placeholder="Kullanıcı Adı"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
              />
              <Input
                placeholder="Şifre"
                type="password"
                value={password}
                onChange={(e) => setPassword(e.target.value)}
              />
              <label className="flex items-center gap-2">
                <input
                  type="checkbox"
                  checked={rememberMe}
                  onChange={() => setRememberMe(!rememberMe)}
                />
                Bu cihazda girişi kaydet
              </label>
              <Button onClick={handleLogin}>Giriş Yap</Button>
            </div>
          </DialogContent>
        </Dialog>
      </div>

      {results.length > 0 && (
        <Card className="w-full max-w-md">
          <CardContent className="p-4">
            <h3 className="font-semibold mb-2">Arama Sonuçları:</h3>
            <ul className="list-disc list-inside">
              {results.map((item, idx) => (
                <li key={idx}>{item.name} – {item.firm}</li>
              ))}
            </ul>
          </CardContent>
        </Card>
      )}

      {isLoggedIn && (
        <div className="mt-10 text-green-700 font-semibold">
          🎉 Giriş başarılı! Kontrol paneline erişim sağlandı.
        </div>
      )}
    </div>
  );
}