/
githubmirror
/
ui
Обзор
Документация
Войти
/
githubmirror
/
ui
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
apps/v4/components/component-wrapper.tsx
66 строк
2 KB
shadcn
refactor: new-york-v4
05 фев 2025, 09:38
05 фев 2025, 09:38
475abbb
Код
Авторство
О чём код?
"use client" import * as React from "react" import { cn } from "@/registry/new-york-v4/lib/utils" export function ComponentWrapper({ className, name, children, ...props }: React.ComponentPropsWithoutRef<"div"> & { name: string }) { return ( <ComponentErrorBoundary name={name}> <div id={name} data-name={name.toLowerCase()} className={cn( "flex w-full scroll-mt-16 flex-col rounded-lg border", className )} {...props} > <div className="border-b px-4 py-3"> <div className="text-sm font-medium">{getComponentName(name)}</div> </div> <div className="flex flex-1 items-center gap-2 p-4">{children}</div> </div> </ComponentErrorBoundary> ) } class ComponentErrorBoundary extends React.Component< { children: React.ReactNode; name: string }, { hasError: boolean } > { constructor(props: { children: React.ReactNode; name: string }) { super(props) this.state = { hasError: false } } static getDerivedStateFromError() { return { hasError: true } } componentDidCatch(error: Error, errorInfo: React.ErrorInfo) { console.error(`Error in component ${this.props.name}:`, error, errorInfo) } render() { if (this.state.hasError) { return ( <div className="p-4 text-red-500"> Something went wrong in component: {this.props.name} </div> ) } return this.props.children } } function getComponentName(name: string) { // convert kebab-case to title case return name.replace(/-/g, " ").replace(/\b\w/g, (char) => char.toUpperCase()) }