Add layout toggle feature with horizontal and vertical layouts

src/app/page.tsx

@@ -8,6 +8,7 @@ import Summary from '@/components/Summary';
 
 export default function Home() {
   const [transactions, setTransactions] = useState<Transaction[]>([]);
+  const [isHorizontalLayout, setIsHorizontalLayout] = useState(false);
 
   // Load transactions from localStorage on component mount
   useEffect(() => {
@@ -15,6 +16,12 @@ export default function Home() {
     if (savedTransactions) {
       setTransactions(JSON.parse(savedTransactions));
     }
+    
+    // Load layout preference from localStorage
+    const layoutPreference = localStorage.getItem('layoutPreference');
+    if (layoutPreference) {
+      setIsHorizontalLayout(layoutPreference === 'horizontal');
+    }
   }, []);
 
   // Save transactions to localStorage whenever they change
@@ -22,6 +29,11 @@ export default function Home() {
     localStorage.setItem('transactions', JSON.stringify(transactions));
   }, [transactions]);
   
+  // Save layout preference to localStorage whenever it changes
+  useEffect(() => {
+    localStorage.setItem('layoutPreference', isHorizontalLayout ? 'horizontal' : 'vertical');
+  }, [isHorizontalLayout]);
+
   const handleAddTransaction = (transaction: Transaction) => {
     setTransactions([...transactions, transaction]);
   };
@@ -30,21 +42,51 @@ export default function Home() {
     setTransactions(transactions.filter(transaction => transaction.id !== id));
   };
   
+  const toggleLayout = () => {
+    setIsHorizontalLayout(!isHorizontalLayout);
+  };
+
   return (
     <div className="min-h-screen bg-gray-100 py-8">
       <div className="container mx-auto px-4">
-        <h1 className="text-3xl font-bold text-center mb-8">Ausgaben Tracker</h1>
+        <div className="flex justify-between items-center mb-8">
-        
+          <h1 className="text-3xl font-bold">Ausgaben Tracker</h1>
-        <div className="flex flex-col items-center gap-6">
+          <button 
-          <Summary transactions={transactions} />
+            onClick={toggleLayout} 
-          
+            className="bg-blue-600 text-white py-2 px-4 rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 flex items-center gap-2"
-          <TransactionForm onAddTransaction={handleAddTransaction} />
+          >
-          
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <TransactionList 
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
-            transactions={transactions} 
+            </svg>
-            onDeleteTransaction={handleDeleteTransaction} 
+            Layout ändern
-          />
+          </button>
         </div>
+        
+        {isHorizontalLayout ? (
+          // Horizontal layout - TransactionList on the right
+          <div className="flex flex-col md:flex-row gap-6">
+            <div className="w-full md:w-1/2 flex flex-col gap-6">
+              <Summary transactions={transactions} />
+              <TransactionForm onAddTransaction={handleAddTransaction} />
+            </div>
+            <div className="w-full md:w-1/2">
+              <TransactionList 
+                transactions={transactions} 
+                onDeleteTransaction={handleDeleteTransaction} 
+              />
+            </div>
+          </div>
+        ) : (
+          // Vertical layout - Original stacked layout
+          <div className="flex flex-col items-center gap-6">
+            <Summary transactions={transactions} />
+            <TransactionForm onAddTransaction={handleAddTransaction} />
+            <TransactionList 
+              transactions={transactions} 
+              onDeleteTransaction={handleDeleteTransaction} 
+            />
+          </div>
+        )}
       </div>
     </div>
   );