Gabriel Brown
50 lines
1.5 KiB
TypeScript
50 lines
1.5 KiB
TypeScript
import { useState } from 'react';
|
|
import { Text, View } from 'react-native';
|
|
|
|
import { Card } from '~/components/ui/card';
|
|
import { ChipRow } from '~/components/ui/chip-row';
|
|
import { formatDateTime, titleize } from '~/utils/format';
|
|
|
|
type Event = {
|
|
_id: string;
|
|
createdAt: number;
|
|
level: string;
|
|
message: string;
|
|
phase: string;
|
|
};
|
|
|
|
export const WorkspaceEvents = ({ events }: { events: Event[] }) => {
|
|
const [level, setLevel] = useState<'all' | 'info' | 'warn' | 'error'>('all');
|
|
const filtered =
|
|
level === 'all' ? events : events.filter((event) => event.level === level);
|
|
|
|
return (
|
|
<Card className='gap-3'>
|
|
<Text className='text-foreground font-semibold'>Events</Text>
|
|
<ChipRow
|
|
options={[
|
|
{ label: 'All', value: 'all' },
|
|
{ label: 'Info', value: 'info' },
|
|
{ label: 'Warn', value: 'warn' },
|
|
{ label: 'Error', value: 'error' },
|
|
]}
|
|
value={level}
|
|
onChange={setLevel}
|
|
/>
|
|
{filtered.length ? (
|
|
filtered.map((event) => (
|
|
<View key={event._id} className='border-border border-b pb-2'>
|
|
<Text className='text-muted-foreground text-xs'>
|
|
{formatDateTime(event.createdAt)} · {titleize(event.phase)} ·{' '}
|
|
{titleize(event.level)}
|
|
</Text>
|
|
<Text className='text-foreground mt-1'>{event.message}</Text>
|
|
</View>
|
|
))
|
|
) : (
|
|
<Text className='text-muted-foreground text-sm'>No events.</Text>
|
|
)}
|
|
</Card>
|
|
);
|
|
};
|