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

add collapse test in

Browse Source
This commit is contained in:
Jonathan Summers-Muir committed 2022-12-07 01:23:32 +08:00
1 parent f417388c6f
commit db23338703
1 file changed
+54 -48
Download Patch File Download Diff File Expand all files Collapse all files
apps/docs/pages/reference/javascript/[...slug].tsx
+54 -48
View File
@@ -31,8 +31,7 @@ import RefSubLayout from '~/layouts/ref/RefSubLayout'
import OldLayout from '~/layouts/Default'
import * as Collapsible from '@radix-ui/react-collapsible'
import * as Accordion from '@radix-ui/react-collapsible'
import * as Accordion from '@radix-ui/react-accordion'
export default function JSReference(props) {
const router = useRouter()
@@ -175,55 +174,62 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
label={example.name}
className="flex flex-col gap-3"
>
<Accordion.Root className="transition-all ease-out flex flex-col">
<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 className="transition data-open:animate-slide-down data-closed:animate-slide-up">
{tables &&
tables.length > 0 &&
tables.map((table) => {
return (
<div className="bg-scale-300 border rounded prose max-w-none">
<div className="bg-scale-200 px-5 py-2">
<div className="flex gap-2 items-center">
<div className="text-brand-900">
<IconDatabase size={16} />
<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 className="transition data-open:animate-slide-down data-closed:animate-slide-up">
{tables &&
tables.length > 0 &&
tables.map((table) => {
return (
<div className="bg-scale-300 border rounded prose max-w-none">
<div className="bg-scale-200 px-5 py-2">
<div className="flex gap-2 items-center">
<div className="text-brand-900">
<IconDatabase size={16} />
</div>
<h5 className="text-xs text-scale-1200">
{table.name}
</h5>
</div>
<h5 className="text-xs text-scale-1200">
{table.name}
</h5>
</div>
</div>
</div>
)
})}
{sql && (
<CodeBlock
className="useless-code-block-class my-0 border border-scale-500 !rounded-tl-none !rounded-tr-none"
language="sql"
hideLineNumbers={true}
>
{sql}
</CodeBlock>
)}
</Accordion.Content>
)
})}
{sql && (
<CodeBlock
className="useless-code-block-class my-0 border border-scale-500 !rounded-tl-none !rounded-tr-none"
language="sql"
hideLineNumbers={true}
>
{sql}
</CodeBlock>
)}
</Accordion.Content>
</Accordion.Item>
</Accordion.Root>
<CodeBlock
className="useless-code-block-class"