AI Code Toolkit

/** * {{ componentName }} Component (Smart/Container Component) * * DESIGN PATTERNS: * - Smart/Container Component: Handles business logic, state, and data fetching * - Delegates rendering to {{ componentName }}View (dumb/presentational component) * - Separation of Concerns: Logic in smart component, UI in view component * * CODING STANDARDS: * - Import and use the View component for rendering * - Handle state, effects, and callbacks here * - Pass data and handlers as props to the View * - Export component as default export * * USAGE: * - Import: import {{ componentName }} from '@/components/{{ componentName }}' * - This component manages logic and delegates UI to {{ componentName }}View */ import * as React from 'react'; import { {{ componentName }}View, type {{ componentName }}ViewProps } from './{{ componentName }}View'; type {{ componentName }}Props = {{ componentName }}ViewProps; export default function {{ componentName }}(props: {{ componentName }}Props) { // Add your state and logic here // Example: // const [state, setState] = React.useState(initialValue); // const handleAction = () => { ... }; return <{{ componentName }}View {...props} />; }