a81d056d79
* Fix the v0 button. Add some more docs. (+13 squashed commits) Squashed commits: [cc5954779e] Add success state to the forgot-password form. [258bfb1015] Simplify the tanstack auth block. [1ba5c223d9] Add missing pages to the nextjs auth. [b842e4acec] Fix the env vars in the React client. [2a2bcc5356] Fix the command URL. [a26a2d36c2] Add a tanstack block for password-based auth. [d68881f0d5] Fix the tanstack client. [1fd2e16d96] Add missing deps to satisfy TS build. [9797d745df] Various fixes. [3e9b676e99] Fix the registryBlock component. [540a5d600b] Set the supabase project for testing. [3eba892c92] Regenerate the llms.txt file. [bf526a0ecb] Regenerate the registry files. * Add current user avatar. * Add RealtimeAvatarStack. * Use the fields which are populated by Auth. * Regenerate the registry files. * Fix the imports. * Rebuild the registry files. Add a github login to the supabase config. * Minor fixes for the components. * Minor fix to the avatar stack. * Remove peekCode, show showCode prop to component preview. * Add examples for avatar stack and current user avatar. * Use the new generatenames function in the cursors. * Add documentation for avatar stack and avatar. * Switch the profile images. * Fix a type error. * More fixes.
106 lines
3.1 KiB
TypeScript
106 lines
3.1 KiB
TypeScript
'use client'
|
|
|
|
import { Index } from '@/__registry__'
|
|
import * as React from 'react'
|
|
|
|
import { useConfig } from '@/hooks/use-config'
|
|
import { cn } from 'ui'
|
|
|
|
import { styles } from '@/registry/styles'
|
|
|
|
interface ComponentPreviewProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
name: string
|
|
extractClassname?: boolean
|
|
extractedClassNames?: string
|
|
align?: 'center' | 'start' | 'end'
|
|
showGrid?: boolean
|
|
showDottedGrid?: boolean
|
|
wide?: boolean
|
|
}
|
|
|
|
export function CodeFragment({
|
|
name,
|
|
children,
|
|
className,
|
|
extractClassname,
|
|
extractedClassNames,
|
|
align = 'center',
|
|
showGrid = false,
|
|
showDottedGrid = true,
|
|
wide = false,
|
|
...props
|
|
}: ComponentPreviewProps) {
|
|
const [config] = useConfig()
|
|
const index = styles.findIndex((style) => style.name === config.style)
|
|
|
|
const Codes = React.Children.toArray(children) as React.ReactElement[]
|
|
const Code = Codes[index]
|
|
|
|
const [expand, setExpandState] = React.useState(false)
|
|
|
|
const Preview = React.useMemo(() => {
|
|
// console.log('Index', Index)
|
|
// console.log('name', name)
|
|
// console.log('config.style', config.style)
|
|
|
|
const Component = Index[config.style][name]?.component
|
|
// const Component = Index[name]?.component
|
|
|
|
if (!Component) {
|
|
return (
|
|
<p className="text-sm text-muted-foreground">
|
|
Code fragment{' '}
|
|
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
|
|
{name}
|
|
</code>{' '}
|
|
not found in registry.
|
|
</p>
|
|
)
|
|
}
|
|
|
|
return <Component />
|
|
}, [name, config.style])
|
|
|
|
const ComponentPreview = React.useMemo(() => {
|
|
return (
|
|
<>
|
|
<div
|
|
className={cn('preview flex min-h-[350px] w-full justify-center p-10', {
|
|
'items-center': align === 'center',
|
|
'items-start': align === 'start',
|
|
'items-end': align === 'end',
|
|
})}
|
|
>
|
|
<React.Suspense
|
|
fallback={
|
|
<div className="flex items-center text-sm text-muted-foreground">Loading...</div>
|
|
}
|
|
>
|
|
{Preview}
|
|
</React.Suspense>
|
|
</div>
|
|
</>
|
|
)
|
|
}, [Preview, align])
|
|
|
|
const wideClasses = wide ? '2xl:-ml-12 2xl:-mr-12' : ''
|
|
|
|
return (
|
|
<div className={cn('mt-4 mb-12', wideClasses)}>
|
|
<div
|
|
className={cn(
|
|
'relative rounded-md border-t border-l border-r border-b bg-studio overflow-hidden'
|
|
)}
|
|
>
|
|
{showGrid && (
|
|
<div className="pointer-events-none absolute h-full w-full bg-[linear-gradient(to_right,hsla(var(--foreground-default)/0.02)_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]"></div>
|
|
)}
|
|
{showDottedGrid && (
|
|
<div className="z-0 pointer-events-none absolute h-full w-full bg-[radial-gradient(hsla(var(--foreground-default)/0.02)_1px,transparent_1px)] [background-size:16px_16px] [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_70%,transparent_100%)]"></div>
|
|
)}
|
|
<div className="z-10 relative">{ComponentPreview}</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|