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 && ×}يضمن تحديد متطلبات إمكانية الوصول و TypeScript مسبقاً إنتاج مكونات جاهزة للبيئة الإنتاجية بدلاً من نماذج أولية تحتاج إلى إعادة كتابة.
يوضح هذا الموجه نهجاً منظماً لتطوير الواجهات الأمامية، مُنتجاً نتائج متسقة وعالية الجودة يمكن البناء عليها وتطويرها بشكل تكراري.