mirror of
https://github.com/supabase/supabase.git
synced 2026-09-09 03:19:36 +08:00
cabe14e5ca
## Problem Now that we migrated all usages of the deprecated `Tabs` component, we don't need the `_Shadcn_` suffix anymore. ## Solution Remove `_Shadcn_` suffix from `ui` tabs components. That's all this PR does, no visual nor functional changes <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **New Features** * Standardized tab components across the app so pages and dialogs now use the same consistent tab UI. * Improved tab-based views in design, docs, studio, learn, and website experiences for a more uniform interface. * **Chores** * Updated shared UI exports to expose tab components directly, simplifying future usage across the product. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
import { cn, Tabs, TabsContent, TabsList, TabsTrigger } from 'ui'
|
|
|
|
import {
|
|
// CopyButton,
|
|
CopyWithClassNames,
|
|
} from '@/components/copy-button'
|
|
|
|
interface ComponentExampleProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
extractClassname?: boolean
|
|
extractedClassNames?: string
|
|
align?: 'center' | 'start' | 'end'
|
|
src?: string
|
|
}
|
|
|
|
export function ComponentExample({
|
|
children,
|
|
className,
|
|
extractClassname,
|
|
extractedClassNames,
|
|
align = 'center',
|
|
src: _,
|
|
...props
|
|
}: ComponentExampleProps) {
|
|
const [Example, Code, ...Children] = React.Children.toArray(children) as React.ReactElement<{
|
|
children: React.ReactNode
|
|
'data-rehype-pretty-code-fragment'?: unknown
|
|
}>[]
|
|
|
|
const codeString = React.useMemo(() => {
|
|
if (typeof Code?.props['data-rehype-pretty-code-fragment'] !== 'undefined') {
|
|
const [, Button] = React.Children.toArray(Code.props.children) as React.ReactElement<{
|
|
value?: string
|
|
__rawString__?: string
|
|
}>[]
|
|
return Button?.props?.value || Button?.props?.__rawString__ || null
|
|
}
|
|
}, [Code])
|
|
|
|
return (
|
|
<div className={cn('group relative my-4 flex flex-col gap-2', className)} {...props}>
|
|
<Tabs defaultValue="preview" className="relative mr-auto w-full">
|
|
<div className="flex items-center justify-between pb-3">
|
|
<TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
|
|
<TabsTrigger
|
|
value="preview"
|
|
className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
|
|
>
|
|
Preview
|
|
</TabsTrigger>
|
|
<TabsTrigger
|
|
value="code"
|
|
className="relative rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
|
|
>
|
|
Code
|
|
</TabsTrigger>
|
|
</TabsList>
|
|
{
|
|
extractedClassNames && codeString ? (
|
|
<CopyWithClassNames
|
|
value={codeString}
|
|
classNames={extractedClassNames}
|
|
className="absolute right-4 top-20"
|
|
/>
|
|
) : undefined
|
|
// codeString && <CopyButton value={codeString} className="absolute right-4 top-20" />
|
|
}
|
|
</div>
|
|
<TabsContent value="preview" className="rounded-md border">
|
|
<div
|
|
className={cn('flex min-h-[350px] justify-center p-10', {
|
|
'items-center': align === 'center',
|
|
'items-start': align === 'start',
|
|
'items-end': align === 'end',
|
|
})}
|
|
>
|
|
{Example}
|
|
</div>
|
|
</TabsContent>
|
|
<TabsContent value="code">
|
|
<div className="flex flex-col space-y-4">
|
|
<div className="w-full rounded-md [&_button]:hidden [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
|
|
{Code}
|
|
</div>
|
|
{Children?.length ? (
|
|
<div className="rounded-md [&_button]:hidden [&_pre]:my-0 [&_pre]:max-h-[350px] [&_pre]:overflow-auto">
|
|
{Children}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</TabsContent>
|
|
</Tabs>
|
|
</div>
|
|
)
|
|
}
|