GPT-4Frontend development
تولیدکننده کامپوننت React
چرا این پرامپت اهمیت دارد
Specifying accessibility and TypeScript requirements upfront produces production-ready components instead of prototypes that need rewriting.
ما از آن برای چه استفاده میکنیم
Frontend development
پرامپت
Create a React component based on this description. Requirements: TypeScript with proper prop types, accessible (ARIA attributes, keyboard navigation), responsive design using Tailwind CSS, follows composition pattern with slots for customization. Include JSDoc comments for the component and its props.
نتیجه
```tsx
interface AlertProps {
/** The visual severity of the alert */
variant?: 'info' | 'success' | 'warning' | 'error';
/** Alert title displayed prominently */
title: string;
/** Optional descriptive content */
children?: React.ReactNode;
/** Called when the dismiss button is clicked */
onDismiss?: () => void;
}
export function Alert({ variant = 'info', title, children, onDismiss }: AlertProps) {
return (
{title}
{children &&
);
}
```{children}
} {onDismiss && ×}Specifying accessibility and TypeScript requirements upfront produces production-ready components instead of prototypes that need rewriting.
This prompt demonstrates a structured approach to frontend development, producing consistent, high-quality results that can be iterated upon.