Add layout toggle feature with horizontal and vertical layouts

README.md

@@ -6,6 +6,12 @@ First, run the development server:
 
 ```bash
 npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
@@ -21,25 +27,10 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
-# Create new branch
+## Deploy on Vercel
 
-Created a new branch called "layouts":
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-```
+
-git checkout -b layouts
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
-```
-Committed your layout toggle feature changes to this branch:
-```
-git add .
-```
-```
-git commit -m "Add layout toggle feature with horizontal and vertical layouts"
-```
-Pushed the layouts branch to your remote repository:
-```
-git push -u origin layouts
-```
-Switched back to the main branch:
-```
-git checkout main
-```

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,22 +42,52 @@ 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>
+          <button 
+            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"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16m-7 6h7" />
+            </svg>
+            Layout ändern
+          </button>
+        </div>
         
-        <div className="flex flex-col items-center gap-6">
+        {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>
   );
 }