README.md aktualisiert

README.md

@@ -6,12 +6,6 @@ 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.
@@ -27,10 +21,25 @@ 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!
 
-## Deploy on Vercel
+# Create new branch
 
-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.
+Created a new branch called "layouts":
-
+```
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
+git checkout -b layouts
+```
+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,7 +8,6 @@ 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(() => {
@@ -16,23 +15,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
   useEffect(() => {
     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]);
@@ -41,52 +29,22 @@ export default function Home() {
   const handleDeleteTransaction = (id: string) => {
     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">
-        <div className="flex justify-between items-center mb-8">
+        <h1 className="text-3xl font-bold text-center mb-8">Ausgaben Tracker</h1>
-          <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>
         
-        {isHorizontalLayout ? (
+        <div className="flex flex-col items-center gap-6">
-          // Horizontal layout - TransactionList on the right
+          <Summary transactions={transactions} />
-          <div className="flex flex-col md:flex-row gap-6">
+          
-            <div className="w-full md:w-1/2 flex flex-col gap-6">
+          <TransactionForm onAddTransaction={handleAddTransaction} />
-              <Summary transactions={transactions} />
+          
-              <TransactionForm onAddTransaction={handleAddTransaction} />
+          <TransactionList 
-            </div>
+            transactions={transactions} 
-            <div className="w-full md:w-1/2">
+            onDeleteTransaction={handleDeleteTransaction} 
-              <TransactionList 
+          />
-                transactions={transactions} 
+        </div>
-                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>
   );