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.
98 lines
3.5 KiB
TypeScript
98 lines
3.5 KiB
TypeScript
'use client'
|
|
|
|
import * as React from 'react'
|
|
|
|
import { cn } from 'ui'
|
|
import {
|
|
// CopyButton,
|
|
CopyWithClassNames,
|
|
} from '@/components/copy-button'
|
|
import {
|
|
Tabs_Shadcn_ as Tabs,
|
|
TabsContent_Shadcn_ as TabsContent,
|
|
TabsList_Shadcn_ as TabsList,
|
|
TabsTrigger_Shadcn_ as TabsTrigger,
|
|
} from 'ui'
|
|
|
|
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[]
|
|
|
|
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[]
|
|
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 ? (
|
|
<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>
|
|
)
|
|
}
|