dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 09:25:06 +03:00
Code Issues Packages Projects Releases Wiki Activity

add reference details

Browse Source
This commit is contained in:
Jonathan Summers-Muir committed 2022-12-07 02:39:50 +08:00
1 parent dc8049c21a
commit f99c481c05
2 files changed
+73 -42
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/docs/components/Reference/ReferenceDetailCollapse.tsx
+44
View File
@@ -0,0 +1,44 @@
import * as Accordion from '@radix-ui/react-accordion'
import React from 'react'
import { IconChevronRight } from '~/../../packages/ui'
const ReferenceDetailCollapse: React.FC<{ id: string; label: string; defaultOpen?: boolean }> = ({
defaultOpen = true,
...props
}) => {
return (
<Accordion.Root
className="AccordionRoot"
type="single"
defaultValue={defaultOpen ? `${props.id}` : ''}
collapsible
>
<Accordion.Item className="AccordionItem" value={`${props.id}`}>
<Accordion.Trigger asChild>
<button
className={[
'transition-all ease-out',
'h-8',
'bg-scale-200 data-open:bg-scale-300',
'dark:bg-scale-300 dark:data-open:bg-scale-500',
'border border-scale-500 w-full flex items-center gap-3 px-5',
'rounded-tl rounded-tr',
'data-closed:rounded-bl data-closed:rounded-br',
'text-scale-1100 text-xs',
].join(' ')}
>
<div className="data-open-parent:rotate-90 text-scale-900">
<IconChevronRight size={12} strokeWidth={2} />
</div>
{props.label}
</button>
</Accordion.Trigger>
<Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up">
{props.children}
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
)
}
export default ReferenceDetailCollapse
apps/docs/pages/reference/javascript/[...slug].tsx
+29 -42
View File
@@ -32,6 +32,7 @@ import RefSubLayout from '~/layouts/ref/RefSubLayout'
import OldLayout from '~/layouts/Default'
import * as Accordion from '@radix-ui/react-accordion'
import ReferenceDetailCollapse from '~/components/Reference/ReferenceDetailCollapse'
export default function JSReference(props) {
const router = useRouter()
@@ -90,6 +91,7 @@ export default function JSReference(props) {
// const introFileMarkdownContent =
console.log('props.docs', props.docs)
// if (item.id !== 'db-modifiers-select') return <></>
return (
@@ -194,33 +196,13 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
label={example.name}
className="flex flex-col gap-3"
>
<Accordion.Root
className="AccordionRoot"
type="single"
defaultValue={`${example.id}-data`}
collapsible
>
<Accordion.Item value={`${example.id}-data`}>
<Accordion.Trigger asChild>
<button
className={[
'transition-all ease-out',
'h-8',
'bg-scale-300 data-open:bg-scale-500',
'border border-scale-500 w-full flex items-center gap-3 px-5',
'data-open:bg-yellow-900',
'rounded-tl rounded-tr',
'data-closed:rounded-bl data-closed:rounded-br',
'text-scale-1100 text-xs',
].join(' ')}
>
<div className="data-open-parent:rotate-90 text-scale-900">
<IconChevronRight size={12} strokeWidth={2} />
</div>
Example data source
</button>
</Accordion.Trigger>
<Accordion.Content>
{((tables && tables.length > 0) || sql) && (
<ReferenceDetailCollapse
id={`${example.id}-${exampleIndex}-data`}
label="Example data source"
defaultOpen={false}
>
<>
{tables &&
tables.length > 0 &&
tables.map((table) => {
@@ -241,16 +223,17 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
})}
{sql && (
<CodeBlock
className="useless-code-block-class my-0 border border-scale-500 !rounded-tl-none !rounded-tr-none"
className="useless-code-block-class my-0 border border-t-0 border-scale-500 !rounded-tl-none !rounded-tr-none"
language="sql"
hideLineNumbers={true}
>
{sql}
</CodeBlock>
)}
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
</>
</ReferenceDetailCollapse>
)}
<CodeBlock
className="useless-code-block-class"
language="js"
@@ -264,18 +247,22 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
.replace('```', ''))}
</CodeBlock>
{response && (
<CodeBlock
className="useless-code-block-class"
language="js"
hideLineNumbers={true}
<ReferenceDetailCollapse
id={`${example.id}-${exampleIndex}-response`}
label="Example response"
defaultOpen={false}
>
{exampleString +
(example.code &&
example.code
.replace('```', '')
.replace('js', '')
.replace('```', ''))}
</CodeBlock>
<CodeBlock
className="useless-code-block-class"
language="js"
hideLineNumbers={true}
>
{response
.replace('```', '')
.replace('json', '')
.replace('```', '')}
</CodeBlock>
</ReferenceDetailCollapse>
)}
</Tabs.Panel>
)