Add overtime calculation and display to the App component

src/App.tsx

@@ -22,6 +22,7 @@ function App() {
     const [workEnd, setWorkEnd] = React.useState<string>('');
     const [breakMins, setBreakMins] = React.useState<number>(0);
     const [workedHrs, setWorkedHrs] = React.useState<number>(0);
+    const [overtimeMinutes, setOvertimeMinutes] = React.useState<number>(0);
 
     const getHourDiff = () => {
         const start = toMinutes(workStart);
@@ -36,6 +37,12 @@ function App() {
         return fromMinutes(start + 8 * 60 + breakMins);
     }
 
+    const handleSave = () => {
+        const hours = getHourDiff();
+        setWorkedHrs(hours);
+        setOvertimeMinutes(Math.round((hours - 8) * 60));
+    }
+
     return (
         <Center>
             <Stack>
@@ -68,12 +75,21 @@ function App() {
                     onChange={(val) => setBreakMins(Number(val))}
                 />
 
-                <Button onClick={() => setWorkedHrs(getHourDiff())}>
+                <Button onClick={handleSave}>
                     Speichern
                 </Button>
 
                 <Text>Gearbeitete Stunden heute: {workedHrs.toFixed(2)}</Text>
                 <Text>Wann du gehen kannst für 8 Stunden: {getWorkEndTime()}</Text>
+                {overtimeMinutes === 0 && (
+                    <Text>Du hast genau 8 Stunden gearbeitet.</Text>
+                )}
+                {overtimeMinutes > 0 && (
+                    <Text c="yellow">Überstunden: {overtimeMinutes} Minuten</Text>
+                )}
+                {overtimeMinutes < 0 && (
+                    <Text>Fehlende Minuten für 8 Stunden: {-overtimeMinutes} Minuten</Text>
+                )}
             </Stack>
         </Center>
     );