website refactor
This commit is contained in:
@@ -1,6 +1,14 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Play, Copy, Trash2, Download, Clock } from 'lucide-react';
|
||||
import { getGlobalReplaySystem } from '@/lib/infrastructure/ErrorReplay';
|
||||
import { Box } from '@/ui/Box';
|
||||
import { Text } from '@/ui/Text';
|
||||
import { Stack } from '@/ui/Stack';
|
||||
import { Icon } from '@/ui/Icon';
|
||||
import { IconButton } from '@/ui/IconButton';
|
||||
import { Button } from '@/ui/Button';
|
||||
|
||||
interface ReplayEntry {
|
||||
id: string;
|
||||
@@ -11,7 +19,6 @@ interface ReplayEntry {
|
||||
|
||||
export function ReplaySection() {
|
||||
const [replays, setReplays] = useState<ReplayEntry[]>([]);
|
||||
const [selectedReplay, setSelectedReplay] = useState<string | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -78,83 +85,89 @@ export function ReplaySection() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs font-semibold text-gray-400">Error Replay</span>
|
||||
<div className="flex gap-1">
|
||||
<button
|
||||
<Stack gap={2}>
|
||||
<Box display="flex" alignItems="center" justifyContent="between">
|
||||
<Text size="xs" weight="semibold" color="text-gray-400">Error Replay</Text>
|
||||
<Box display="flex" gap={1}>
|
||||
<IconButton
|
||||
icon={Clock}
|
||||
onClick={loadReplays}
|
||||
className="p-1 hover:bg-charcoal-outline rounded"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
title="Refresh"
|
||||
>
|
||||
<Clock className="w-3 h-3 text-gray-400" />
|
||||
</button>
|
||||
<button
|
||||
/>
|
||||
<IconButton
|
||||
icon={Trash2}
|
||||
onClick={handleClearAll}
|
||||
className="p-1 hover:bg-charcoal-outline rounded"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
title="Clear All"
|
||||
>
|
||||
<Trash2 className="w-3 h-3 text-red-400" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
color="rgb(239, 68, 68)"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{replays.length === 0 ? (
|
||||
<div className="text-xs text-gray-500 text-center py-2">
|
||||
No replays available
|
||||
</div>
|
||||
<Box textAlign="center" py={2}>
|
||||
<Text size="xs" color="text-gray-500">No replays available</Text>
|
||||
</Box>
|
||||
) : (
|
||||
<div className="space-y-1 max-h-48 overflow-auto">
|
||||
<Stack gap={1}>
|
||||
{replays.map((replay) => (
|
||||
<div
|
||||
<Box
|
||||
key={replay.id}
|
||||
className="bg-deep-graphite border border-charcoal-outline rounded p-2 text-xs"
|
||||
bg="bg-deep-graphite"
|
||||
border
|
||||
borderColor="border-charcoal-outline"
|
||||
rounded="md"
|
||||
p={2}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2 mb-1">
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="font-mono text-red-400 font-bold truncate">
|
||||
{replay.type}
|
||||
</div>
|
||||
<div className="text-gray-300 truncate">{replay.error}</div>
|
||||
<div className="text-gray-500 text-[10px]">
|
||||
{new Date(replay.timestamp).toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex gap-1 mt-1">
|
||||
<button
|
||||
<Box mb={1}>
|
||||
<Text size="xs" font="mono" weight="bold" color="text-red-400" block truncate>
|
||||
{replay.type}
|
||||
</Text>
|
||||
<Text size="xs" color="text-gray-300" block truncate>{replay.error}</Text>
|
||||
<Text size="xs" color="text-gray-500" block>
|
||||
{new Date(replay.timestamp).toLocaleTimeString()}
|
||||
</Text>
|
||||
</Box>
|
||||
<Box display="flex" gap={1} mt={1}>
|
||||
<Button
|
||||
variant="primary"
|
||||
onClick={() => handleReplay(replay.id)}
|
||||
disabled={loading}
|
||||
className="flex items-center gap-1 px-2 py-1 bg-green-600 hover:bg-green-700 text-white rounded"
|
||||
size="sm"
|
||||
icon={<Icon icon={Play} size={3} />}
|
||||
>
|
||||
<Play className="w-3 h-3" />
|
||||
Replay
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => handleExport(replay.id)}
|
||||
className="flex items-center gap-1 px-2 py-1 bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded border border-charcoal-outline"
|
||||
size="sm"
|
||||
icon={<Icon icon={Download} size={3} />}
|
||||
>
|
||||
<Download className="w-3 h-3" />
|
||||
Export
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => handleCopy(replay.id)}
|
||||
className="flex items-center gap-1 px-2 py-1 bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded border border-charcoal-outline"
|
||||
size="sm"
|
||||
icon={<Icon icon={Copy} size={3} />}
|
||||
>
|
||||
<Copy className="w-3 h-3" />
|
||||
Copy
|
||||
</button>
|
||||
<button
|
||||
</Button>
|
||||
<IconButton
|
||||
icon={Trash2}
|
||||
onClick={() => handleDelete(replay.id)}
|
||||
className="flex items-center gap-1 px-2 py-1 bg-iron-gray hover:bg-charcoal-outline text-gray-300 rounded border border-charcoal-outline"
|
||||
>
|
||||
<Trash2 className="w-3 h-3" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
variant="secondary"
|
||||
size="sm"
|
||||
/>
|
||||
</Box>
|
||||
</Box>
|
||||
))}
|
||||
</div>
|
||||
</Stack>
|
||||
)}
|
||||
</div>
|
||||
</Stack>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user