Schedule display

src/components/Schedule.tsx

@@ -0,0 +1,36 @@
+import React, {useState } from 'react';
+import { Box, Button, Checkbox, Dialog, DialogActions, DialogContent, DialogTitle, Divider, List, ListItem, Switch, TextField, Tooltip, Typography } from '@mui/material';
+import { useLocalStorage } from '../hooks/useLocalStorage';
+import { Timeline, TimelineConnector, TimelineContent, TimelineDot, TimelineItem, TimelineSeparator, TimelineOppositeContent } from '@mui/lab';
+
+/* 
+    definition of events
+    events have IDs, names, a time (usually start-time) and can be variable in timing
+*/
+type Eve = {
+    id: string,
+    name: string,
+    time: string,
+    var: boolean
+}
+
+export function Schedule(){
+    const [eve, setEve] = useState<Eve[]>([{id: "2", name: "Testtermin 1425", time: "12:00", var: true},{id: "1", name: "Testtermin", time: "12:00", var: false},{id: "3", name: "Testtermin früh", time: "8:00", var:false}])
+    return(
+    <div>
+        <Typography variant="h3">Schedule</Typography>
+        <Timeline position="alternate">
+            {eve.map((e ,i) =>
+            <TimelineItem>
+            {!e.var && <TimelineOppositeContent  color="primary">{e.time}</TimelineOppositeContent>}
+            <TimelineSeparator>
+                <TimelineDot color="primary" />
+                {((i+1) < eve.length) && <TimelineConnector />}
+            </TimelineSeparator>
+            <TimelineContent>{e.name}</TimelineContent>
+            </TimelineItem>
+            )}
+    </Timeline>
+    </div>
+)
+}