feature: Account page redesign

apps/web/components/api-access/DatabaseAccessCard.tsx

@@ -1,4 +1,4 @@
-import {InstructionCard} from '@usevenice/ui'
+import {Input, InstructionCard} from '@usevenice/ui'
 import {DatabaseIcon} from '@usevenice/ui/icons'
 import {CopyTextButton} from '../CopyTextButton'
 
@@ -19,12 +19,8 @@ export function DatabaseAccessCard(props: DatabaseAccessCardProps) {
  <li>Use your favorite SQL editor</li>
  <li>Write custom data analysis scripts</li>
  </ul>
- <div className="flex gap-2 py-2">
- <input
- className="h-8 grow truncate rounded-lg bg-venice-black-400 px-2 font-mono text-xs text-venice-gray/75 ring-1 ring-inset ring-venice-black-300 focus:outline-none"
- value={databaseUrl}
- readOnly
- />
+ <div className="flex gap-2 py-2 pr-7">
+ <Input className="grow truncate" value={databaseUrl} readOnly />
  <CopyTextButton content={databaseUrl} />
  </div>
  </InstructionCard>

apps/web/components/api-access/VeniceDatabaseExplorer/QueryOutput/ActionsBar.tsx

@@ -1,7 +1,7 @@
-import {CircularProgress, TabsPrimitive as Tabs} from '@usevenice/ui'
-import {Button} from '@usevenice/ui'
+import {Button, CircularProgress} from '@usevenice/ui'
 import {DownloadIcon, PlayIcon} from '@usevenice/ui/icons'
 import {useEffect} from 'react'
+import {OutputFormatTabs} from './OutputFormatTabs'
 import {OutputTabsKey} from './OutputTabsKey'
 import type {DatabaseQuery} from './useDatabaseQuery'
 
@@ -81,22 +81,3 @@ function ExecuteQueryActionGroup(props: ExecuteQueryActionGroupProps) {
  </div>
  )
 }
-
-interface OutputFormatTabsProps {
- options: Array<{key: OutputTabsKey; label: string}>
-}
-
-function OutputFormatTabs(props: OutputFormatTabsProps) {
- return (
- <Tabs.List className="flex rounded-lg bg-venice-black-500 text-sm ring-1 ring-inset ring-venice-black-300">
- {props.options.map(({key, label}) => (
- <Tabs.Trigger
- key={key}
- value={key}
- className="h-8 whitespace-nowrap rounded-lg px-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-offwhite/70 data-[state=active]:bg-venice-green-btn">
- {label}
- </Tabs.Trigger>
- ))}
- </Tabs.List>
- )
-}

apps/web/components/api-access/VeniceDatabaseExplorer/QueryOutput/OutputFormatTabs.tsx

@@ -1,4 +1,4 @@
-import {TabsPrimitive as Tabs} from '@usevenice/ui'
+import {TabsPrimitive} from '@usevenice/ui'
 
 interface OutputFormatTabsProps<K> {
  options: Array<{key: K; label: string}>
@@ -8,15 +8,15 @@ export function OutputFormatTabs<K extends string>(
  props: OutputFormatTabsProps<K>,
 ) {
  return (
- <Tabs.List className="flex rounded-lg bg-venice-black-500 text-sm ring-1 ring-inset ring-venice-black-300">
+ <TabsPrimitive.List className="flex rounded-lg bg-venice-black-500 text-sm ring-1 ring-inset ring-venice-black-300">
  {props.options.map(({key, label}) => (
- <Tabs.Trigger
+ <TabsPrimitive.Trigger
  key={key}
  value={key}
- className="h-8 rounded-lg px-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-offwhite/70 data-[state=active]:bg-venice-green-btn">
+ className="h-8 whitespace-nowrap rounded-lg px-3 focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-offwhite/70 data-[state=active]:bg-venice-green-btn">
  {label}
- </Tabs.Trigger>
+ </TabsPrimitive.Trigger>
  ))}
- </Tabs.List>
+ </TabsPrimitive.List>
  )
 }

apps/web/components/api-access/VeniceDatabaseExplorer/QueryOutput/QueryOutput.tsx

@@ -1,4 +1,4 @@
-import {CircularProgress, TabsPrimitive as Tabs} from '@usevenice/ui'
+import {CircularProgress, Tabs, TabsContent} from '@usevenice/ui'
 import {useMemo} from 'react'
 import {DataTable, EmptyDataTable} from '../../../DataTable'
 import {ActionsBar} from './ActionsBar'
@@ -14,21 +14,21 @@ interface QueryOutputProps {
 export function QueryOutput(props: QueryOutputProps) {
  const {databaseQuery} = props
  return (
- <Tabs.Root
+ <Tabs
  id="OutputFormatTabs"
  className="grid gap-6"
  value={databaseQuery.selectedOutputTab}
  onValueChange={databaseQuery.onOutputTabsValueChange}>
  <ActionsBar databaseQuery={databaseQuery} />
  <div className="overflow-x-auto">
- <Tabs.Content value={OutputTabsKey.dataTable}>
+ <TabsContent value={OutputTabsKey.dataTable}>
  <DataTableQueryOutput
  isInitial={databaseQuery.json.isLoading}
  isFetching={databaseQuery.json.isFetching}
  output={databaseQuery.json.data}
  />
- </Tabs.Content>
- <Tabs.Content value={OutputTabsKey.json}>
+ </TabsContent>
+ <TabsContent value={OutputTabsKey.json}>
  <section className="grid gap-3 lg:grid-cols-[1fr_27rem]">
  <QueryResultDisplay
  isFetching={databaseQuery.json.isFetching}
@@ -39,8 +39,8 @@ export function QueryOutput(props: QueryOutputProps) {
  queryUrl={databaseQuery.getFetchUrl()}
  />
  </section>
- </Tabs.Content>
- <Tabs.Content value={OutputTabsKey.csv}>
+ </TabsContent>
+ <TabsContent value={OutputTabsKey.csv}>
  <section className="grid gap-3 lg:grid-cols-[1fr_27rem]">
  <QueryResultDisplay
  isFetching={databaseQuery.csv.isFetching}
@@ -51,9 +51,9 @@ export function QueryOutput(props: QueryOutputProps) {
  queryUrl={databaseQuery.getFetchUrl()}
  />
  </section>
- </Tabs.Content>
+ </TabsContent>
  </div>
- </Tabs.Root>
+ </Tabs>
  )
 }
 

apps/web/components/api-access/index.ts

@@ -1,3 +1,2 @@
 export {DatabaseAccessCard} from './DatabaseAccessCard'
-export {PrimaryTabs} from './PrimaryTabs'
 export {VeniceDatabaseExplorer} from './VeniceDatabaseExplorer'