1import { Dispatch, SetStateAction } from 'react'
2import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
3
4import { ResponseData } from './playground-options'
5import { Dialog, DialogContent } from 'components/ui/dialog'
6
7import { DialogTitle } from '@radix-ui/react-dialog'
8
9export const PlaygroundTable = ({
10  data,
11  isOpenTable,
12  setIsOpenTable
13}: {
14  data: ResponseData
15  isOpenTable: boolean
16  setIsOpenTable: Dispatch<SetStateAction<boolean>>
17}) => {
18  return (
19    <>
20      <div className='relative h-40 max-w-xl overflow-hidden'>
21        <TableData data={data} />
22        {data.schema.length > 3 && <Shadows />}
23      </div>
24      <Dialog open={isOpenTable} onOpenChange={setIsOpenTable} modal={false}>
25        <DialogContent
26          className='w-full max-w-5xl'
27          onOpenAutoFocus={(e) => e.preventDefault()}
28          aria-describedby={undefined}
29        >
30          <VisuallyHidden.Root>
31            <DialogTitle>Results</DialogTitle>
32          </VisuallyHidden.Root>
33          <TableData data={data} />
34        </DialogContent>
35      </Dialog>
36    </>
37  )
38}
39
40const TableData = ({ data }: { data: ResponseData }) => {
41  return (
42    <div className='w-full overflow-x-auto'>
43      <table className='w-full overflow-hidden rounded-md text-left text-sm'>
44        <thead className='bg-neutral-50 text-xs uppercase text-neutral-600'>
45          <tr>
46            {data.schema.map((column, index) => (
47              <th key={index} className='px-6 py-3 font-extrabold'>
48                {column.name}
49              </th>
50            ))}
51          </tr>
52        </thead>
53        <tbody>
54          {data.rows.map((row, rowIndex) => (
55            <tr
56              key={rowIndex}
57              className='border-b bg-neutral even:bg-neutral-50/70 hover:bg-neutral-100'
58            >
59              {data.schema.map((column, columnIndex) => (
60                <td key={columnIndex} className='px-6 py-2'>
61                  <span className='block max-w-[150px] truncate sm:max-w-[200px]'>
62                    {row[column.name]}
63                  </span>
64                </td>
65              ))}
66            </tr>
67          ))}
68        </tbody>
69      </table>
70    </div>
71  )
72}
73
74const Shadows = () => {
75  return (
76    <>
77      <div className='absolute bottom-0 left-0 h-20 w-full bg-gradient-to-t from-neutral' />
78      <div className='absolute bottom-0 left-0 h-20 w-full bg-gradient-to-t from-neutral/60' />
79
80      <div className='absolute top-0 h-full w-20 bg-gradient-to-r from-neutral' />
81      <div className='absolute top-0 h-full w-20 bg-gradient-to-r from-neutral' />
82
83      <div className='absolute right-0 top-0 h-full w-20 bg-gradient-to-l from-neutral' />
84      <div className='absolute right-0 top-0 h-full w-20 bg-gradient-to-l from-neutral' />
85    </>
86  )
87}
88

1import { Dispatch, SetStateAction } from 'react'
2import * as VisuallyHidden from '@radix-ui/react-visually-hidden'
3
4import { ResponseData } from './playground-options'
5import { Dialog, DialogContent } from 'components/ui/dialog'
6
7import { DialogTitle } from '@radix-ui/react-dialog'
8
9export const PlaygroundTable = ({
10  data,
11  isOpenTable,
12  setIsOpenTable
13}: {
14  data: ResponseData
15  isOpenTable: boolean
16  setIsOpenTable: Dispatch<SetStateAction<boolean>>
17}) => {
18  return (
19    <>
20      <div className='relative h-40 max-w-xl overflow-hidden'>
21        <TableData data={data} />
22        {data.schema.length > 3 && <Shadows />}
23      </div>
24      <Dialog open={isOpenTable} onOpenChange={setIsOpenTable} modal={false}>
25        <DialogContent
26          className='w-full max-w-5xl'
27          onOpenAutoFocus={(e) => e.preventDefault()}
28          aria-describedby={undefined}
29        >
30          <VisuallyHidden.Root>
31            <DialogTitle>Results</DialogTitle>
32          </VisuallyHidden.Root>
33          <TableData data={data} />
34        </DialogContent>
35      </Dialog>
36    </>
37  )
38}
39
40const TableData = ({ data }: { data: ResponseData }) => {
41  return (
42    <div className='w-full overflow-x-auto'>
43      <table className='w-full overflow-hidden rounded-md text-left text-sm'>
44        <thead className='bg-neutral-50 text-xs uppercase text-neutral-600'>
45          <tr>
46            {data.schema.map((column, index) => (
47              <th key={index} className='px-6 py-3 font-extrabold'>
48                {column.name}
49              </th>
50            ))}
51          </tr>
52        </thead>
53        <tbody>
54          {data.rows.map((row, rowIndex) => (
55            <tr
56              key={rowIndex}
57              className='border-b bg-neutral even:bg-neutral-50/70 hover:bg-neutral-100'
58            >
59              {data.schema.map((column, columnIndex) => (
60                <td key={columnIndex} className='px-6 py-2'>
61                  <span className='block max-w-[150px] truncate sm:max-w-[200px]'>
62                    {row[column.name]}
63                  </span>
64                </td>
65              ))}
66            </tr>
67          ))}
68        </tbody>
69      </table>
70    </div>
71  )
72}
73
74const Shadows = () => {
75  return (
76    <>
77      <div className='absolute bottom-0 left-0 h-20 w-full bg-gradient-to-t from-neutral' />
78      <div className='absolute bottom-0 left-0 h-20 w-full bg-gradient-to-t from-neutral/60' />
79
80      <div className='absolute top-0 h-full w-20 bg-gradient-to-r from-neutral' />
81      <div className='absolute top-0 h-full w-20 bg-gradient-to-r from-neutral' />
82
83      <div className='absolute right-0 top-0 h-full w-20 bg-gradient-to-l from-neutral' />
84      <div className='absolute right-0 top-0 h-full w-20 bg-gradient-to-l from-neutral' />
85    </>
86  )
87}
88