import React, { useState } from "react"; // Beispiel-Daten für die Übersicht in der Seitenleiste const allItems = [ { id: 1, name: "Kamera" }, { id: 2, name: "Mikrofon" }, { id: 3, name: "Licht-Set" }, { id: 4, name: "Stativ" }, ]; // Beispiel-Ausleihen, später per API dynamisch! const loans = [ { itemId: 1, username: "max", start: "2025-01-01T08:00", end: "2025-01-01T18:00", loanCode: "123456", }, { itemId: 3, username: "sara", start: "2025-01-02T10:00", end: "2025-01-02T16:00", loanCode: "654321", }, ]; // Dummy: Für das Beispiel sind einige Items "nicht verfügbar" bei bestimmten Zeiträumen function getAvailableItems(start: string, end: string) { if (start.startsWith("2025-01-01")) { return allItems.filter( (item) => item.name === "Kamera" || item.name === "Stativ" ); } return allItems; } export default function App() { const [step, setStep] = useState<1 | 2 | 3>(1); const [startDate, setStartDate] = useState(""); const [endDate, setEndDate] = useState(""); const [availableItems, setAvailableItems] = useState([]); const [selectedItem, setSelectedItem] = useState(null); // Dummy Code für das Design const loanCode = "123456"; return (
{/* Seitenleiste */} {/* Hauptbereich */}

Gegenstand ausleihen

Schnell und unkompliziert Equipment reservieren

{step === 1 && (
{ e.preventDefault(); setAvailableItems(getAvailableItems(startDate, endDate)); setStep(2); }} >

1. Zeitraum wählen

setStartDate(e.target.value)} required />
setEndDate(e.target.value)} required min={startDate} />
)} {step === 2 && (

2. Gegenstand auswählen

{availableItems.length === 0 ? (
Keine Gegenstände verfügbar für diesen Zeitraum.
) : (
    {availableItems.map((item) => (
  • {item.name}
  • ))}
)}
)} {step === 3 && (

Ausleihe bestätigt!

Ihr Ausleih-Code lautet:{" "} {loanCode}

Bitte merken Sie sich diesen Code, um das Schließfach zu öffnen.

)}
); } // Hilfsfunktion: Datumsformatierung (z.B. 01.01.2025 08:00) function formatDateTime(dt: string) { const d = new Date(dt); return ( d.toLocaleDateString("de-DE", { day: "2-digit", month: "2-digit", year: "numeric", }) + " " + d.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit" }) ); }