konnosrecent.tsx68 lines · main
| 1 | import { useParams } from 'common' |
| 2 | import { Clock } from 'lucide-react' |
| 3 | import Link from 'next/link' |
| 4 | import { Button } from 'ui' |
| 5 | |
| 6 | import RecentQueriesItem from '@/components/interfaces/Settings/Logs/RecentQueriesItem' |
| 7 | import DefaultLayout from '@/components/layouts/DefaultLayout' |
| 8 | import LogsLayout from '@/components/layouts/LogsLayout/LogsLayout' |
| 9 | import Table from '@/components/to-be-cleaned/Table' |
| 10 | import LogsExplorerHeader from '@/components/ui/Logs/LogsExplorerHeader' |
| 11 | import { useLocalStorage } from '@/hooks/misc/useLocalStorage' |
| 12 | import type { LogSqlSnippets, NextPageWithLayout } from '@/types' |
| 13 | |
| 14 | export const LogsSavedPage: NextPageWithLayout = () => { |
| 15 | const { ref } = useParams() |
| 16 | |
| 17 | const [recentLogSnippets, setRecentLogSnippets] = useLocalStorage<LogSqlSnippets.Content[]>( |
| 18 | `project-content-${ref}-recent-log-sql`, |
| 19 | [] |
| 20 | ) |
| 21 | const recent = recentLogSnippets.slice().reverse() |
| 22 | |
| 23 | return ( |
| 24 | <div className="mx-auto w-full px-5 py-6 h-full"> |
| 25 | <LogsExplorerHeader subtitle="Recent Queries" /> |
| 26 | {recent.length > 0 && ( |
| 27 | <Table |
| 28 | head={ |
| 29 | <> |
| 30 | <Table.th>Snippets</Table.th> |
| 31 | <Table.th className="w-24"> |
| 32 | <Button size="tiny" type="default" onClick={() => setRecentLogSnippets([])}> |
| 33 | Clear history |
| 34 | </Button> |
| 35 | </Table.th> |
| 36 | </> |
| 37 | } |
| 38 | body={recent.map((item: LogSqlSnippets.Content) => ( |
| 39 | <RecentQueriesItem key={item.sql} item={item} /> |
| 40 | ))} |
| 41 | /> |
| 42 | )} |
| 43 | {recent.length === 0 && ( |
| 44 | <> |
| 45 | <div className="my-auto flex h-full grow flex-col items-center justify-center gap-1"> |
| 46 | <Clock className="animate-bounce" /> |
| 47 | <h3 className="text-lg text-foreground">No Recent Queries Yet</h3> |
| 48 | <p className="text-sm text-foreground-lighter"> |
| 49 | Your recent queries run from the{' '} |
| 50 | <Link href={`/project/${ref}/logs/explorer`}> |
| 51 | <span className="cursor-pointer font-bold underline">Query</span> |
| 52 | </Link>{' '} |
| 53 | tab will show here. |
| 54 | </p> |
| 55 | </div> |
| 56 | </> |
| 57 | )} |
| 58 | </div> |
| 59 | ) |
| 60 | } |
| 61 | |
| 62 | LogsSavedPage.getLayout = (page) => ( |
| 63 | <DefaultLayout> |
| 64 | <LogsLayout title="Recent">{page}</LogsLayout> |
| 65 | </DefaultLayout> |
| 66 | ) |
| 67 | |
| 68 | export default LogsSavedPage |