Function Event

frontend/src/components/SystemEvents.jsx:127–172

({ event })

};

const Event = ({ event }) => {
  const [dateFormatSetting] = useLocalStorage('date-format', 'mdy');
  const dateFormat = dateFormatSetting === 'mdy' ? 'MM/DD' : 'DD/MM';

  return (
    <Box
      p="xs"
      bdrs={4}
      style={{
        backgroundColor: '#1A1B1E',
        borderLeft: `3px solid var(--mantine-color-${getEventColor(event.event_type)}-6)`,
      }}
    >
      <Group justify="space-between" wrap="nowrap">
        <Group gap="xs" flex={1} miw={0}>
          <Box c={`${getEventColor(event.event_type)}.6`}>
            {getEventIcon(event.event_type)}
          </Box>
          <Stack gap={2} flex={1} miw={0}>
            <Group gap="xs" wrap="nowrap">
              <Text size="sm" fw={500}>
                {event.event_type_display || event.event_type}
              </Text>
              {event.channel_name && (
                <Text size="sm" c="dimmed" truncate maw={300}>
                  {event.channel_name}
                </Text>
              )}
            </Group>
            {event.details && Object.keys(event.details).length > 0 && (
              <Text size="xs" c="dimmed">
                {Object.entries(event.details)
                  .filter(([key]) => !['stream_url', 'new_url'].includes(key))
                  .map(([key, value]) => `${key}: ${value}`)
                  .join(', ')}
              </Text>
            )}
          </Stack>
        </Group>
        <Text size="xs" c="dimmed" style={{ whiteSpace: 'nowrap' }}>
          {format(event.timestamp, `${dateFormat} HH:mm:ss`)}
        </Text>
      </Group>
    </Box>
  );
};

const SystemEvents = () => {
  const [events, setEvents] = useState([]);