69 lines
1.4 KiB
TypeScript
69 lines
1.4 KiB
TypeScript
import type { {{ENTITY}} } from '@/types';
|
|
import { use{{ENTITY}} } from '@/hooks/use{{ENTITY}}';
|
|
import { Spinner } from '@/components/ui/Spinner';
|
|
import { ErrorMessage } from '@/components/ui/ErrorMessage';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface {{COMPONENT_NAME}}Props {
|
|
{{ENTITY_LOWER}}Id: string;
|
|
className?: string;
|
|
}
|
|
|
|
/**
|
|
* {{COMPONENT_NAME}} component
|
|
*
|
|
* @description Displays {{ENTITY_LOWER}} information
|
|
* @example
|
|
* ```tsx
|
|
* <{{COMPONENT_NAME}} {{ENTITY_LOWER}}Id="123" />
|
|
* ```
|
|
*/
|
|
export const {{COMPONENT_NAME}}: React.FC<{{COMPONENT_NAME}}Props> = ({
|
|
{{ENTITY_LOWER}}Id,
|
|
className,
|
|
}) => {
|
|
// Custom hook handles business logic
|
|
const { data: {{ENTITY_LOWER}}, isLoading, error } = use{{ENTITY}}({{ENTITY_LOWER}}Id);
|
|
|
|
// Loading state
|
|
if (isLoading) {
|
|
return (
|
|
<div className={cn('flex items-center justify-center p-4', className)}>
|
|
<Spinner />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Error state
|
|
if (error) {
|
|
return (
|
|
<div className={cn('p-4', className)}>
|
|
<ErrorMessage error={error} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Not found state
|
|
if (!{{ENTITY_LOWER}}) {
|
|
return (
|
|
<div className={cn('p-4', className)}>
|
|
<p>{{ENTITY}} not found</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Success state - render component
|
|
return (
|
|
<div className={cn('p-4', className)}>
|
|
{/* TODO: Add component content */}
|
|
<h2>{/* {{ENTITY_LOWER}}.field */}</h2>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|