mirror of
https://github.com/supabase/supabase.git
synced 2026-07-24 08:30:05 -04:00
Gildas Garcia
96d43099bb
## Problem Our `<Button>` component breaks the default `button` contract by redefining the `type` prop to set its variant (`primary`, `default`, etc) instead of the button type (`submit`, `button`, etc). This is confusing and forces to write more code when using it with shadcn components that expect/inject the standard button props. ## Solution - rename the `type` prop to `variant` - rename the `htmlType` prop to `type` - propagate the changes where necessary - format code ## How to test As this is just prop renaming, if it builds it's ok --------- Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
import { Button, cn, Collapsible, CollapsibleContent, CollapsibleTrigger } from 'ui'
|
|
|
|
interface CodeBlockProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
expandButtonTitle?: string
|
|
}
|
|
|
|
export function CodeBlockWrapper({
|
|
expandButtonTitle = 'View Code',
|
|
className,
|
|
children,
|
|
...props
|
|
}: CodeBlockProps) {
|
|
const [isOpened, setIsOpened] = React.useState(false)
|
|
|
|
return (
|
|
<Collapsible open={isOpened} onOpenChange={setIsOpened}>
|
|
<div className={cn('relative overflow-hidden', className)} {...props}>
|
|
<CollapsibleContent forceMount className={cn('overflow-hidden', !isOpened && 'max-h-32')}>
|
|
<div
|
|
className={cn(
|
|
'[&_pre]:my-0 [&_pre]:max-h-[650px] [&_pre]:pb-[100px]',
|
|
!isOpened ? '[&_pre]:overflow-hidden' : '[&_pre]:overflow-auto]'
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</CollapsibleContent>
|
|
<div
|
|
className={cn(
|
|
'absolute flex items-center justify-center bg-linear-to-b from-zinc-700/30 to-zinc-950/90 p-2',
|
|
isOpened ? 'inset-x-0 bottom-0 h-12' : 'inset-0'
|
|
)}
|
|
>
|
|
<CollapsibleTrigger asChild>
|
|
<Button variant="secondary" className="h-8 text-xs">
|
|
{isOpened ? 'Collapse' : expandButtonTitle}
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
</div>
|
|
</div>
|
|
</Collapsible>
|
|
)
|
|
}
|