33127bb6ab
* Copy the design-system app into a new one for ui-library. * Remove unneeded content. * Add supabase config. * Cleanup the css. * Add bunch of packages. * Cleanup the registry. * Regenerate the registry. * Add needed components for documenting components. * Add the pages for the components. * Fix the RegistryBlock. * Various fixes. * Add a turbo definition for ui-library. * Rename Remix to React Router. * Reorder the pages for all frameworks. * Remove the bottom pager. * Fix the pages and command menu. * Various fixes. * Minor fixes. * Add ai editor rules. * Various fixes. * Add local supabase env vars. * Try to fix a package error. * Bunch of various fixes. * Fix lint errors.
54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
|
|
import { cn } from 'ui'
|
|
import { Button } from 'ui'
|
|
import {
|
|
Collapsible_Shadcn_ as Collapsible,
|
|
CollapsibleContent_Shadcn_ as CollapsibleContent,
|
|
CollapsibleTrigger_Shadcn_ as 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-gradient-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 type="secondary" className="h-8 text-xs">
|
|
{isOpened ? 'Collapse' : expandButtonTitle}
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
</div>
|
|
</div>
|
|
</Collapsible>
|
|
)
|
|
}
|