66 lines
2.2 KiB
TypeScript
66 lines
2.2 KiB
TypeScript
import { useState, FormEvent } from 'react';
|
|
import { useGetLogs } from '../generated/anthoLumeAPIV1';
|
|
import { Button } from '../components/Button';
|
|
import { Search } from 'lucide-react';
|
|
|
|
export default function AdminLogsPage() {
|
|
const [filter, setFilter] = useState('');
|
|
|
|
const { data: logsData, isLoading, refetch } = useGetLogs(
|
|
filter ? { filter } : {}
|
|
);
|
|
|
|
const logs = logsData?.data?.logs || [];
|
|
|
|
const handleFilterSubmit = (e: FormEvent) => {
|
|
e.preventDefault();
|
|
refetch();
|
|
};
|
|
|
|
if (isLoading) {
|
|
return <div className="text-gray-500 dark:text-white">Loading...</div>;
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* Filter Form */}
|
|
<div
|
|
className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
|
|
>
|
|
<form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleFilterSubmit}>
|
|
<div className="flex w-full grow flex-col">
|
|
<div className="relative flex">
|
|
<span
|
|
className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
|
|
>
|
|
<Search size={15} />
|
|
</span>
|
|
<input
|
|
type="text"
|
|
value={filter}
|
|
onChange={(e) => setFilter(e.target.value)}
|
|
className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white p-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
|
|
placeholder="JQ Filter"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="lg:w-60">
|
|
<Button variant="secondary" type="submit">Filter</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* Log Display */}
|
|
<div
|
|
className="flex w-full flex-col-reverse overflow-scroll text-black dark:text-white"
|
|
style={{ fontFamily: 'monospace' }}
|
|
>
|
|
{logs.map((log: string, index: number) => (
|
|
<span key={index} className="whitespace-nowrap hover:whitespace-pre">
|
|
{log}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |