Modal ile ekleme

import { useState, useRef } from "react";
import { BrowserRouter, Routes, Route, NavLink, Outlet } from "react-router-dom";

function StatCard({ label, value }) {
  return (
    <article>
      <h3>{label}</h3>
      <p>{value}</p>
    </article>
  );
}

function AddStatModal({ isOpen, onAdd, onClose }) {
  const inputRef = useRef(null);
  if (!isOpen) return null;
  function handleSubmit(e) {
    e.preventDefault();
    onAdd(inputRef.current.value);
    onClose();
  }
  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input ref={inputRef} />
        <button type="submit">Ekle</button>
      </form>
    </div>
  );
}

function StatsPage() {
  const [stats, setStats] = useState([{ label: "Kullanıcı", value: 120 }]);
  const [isOpen, setIsOpen] = useState(false);
  return (
    <section>
      {stats.map((s, i) => (
        <StatCard key={i} label={s.label} value={s.value} />
      ))}
      <button onClick={() => setIsOpen(true)}>Ekle</button>
      <AddStatModal
        isOpen={isOpen}
        onAdd={(v) => setStats([...stats, { label: v, value: 0 }])}
        onClose={() => setIsOpen(false)}
      />
    </section>
  );
}

function DashboardLayout() {
  return (
    <>
      <nav><NavLink to="/stats">İstatistik</NavLink></nav>
      <main><Outlet /></main>
    </>
  );
}

function DashboardApp() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<DashboardLayout />}>
          <Route path="stats" element={<StatsPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default DashboardApp;