shadcn-ui

預期結果:

• لإضافة مكون الزر إلى مشروع shadcn/ui الخاص بك:
•  
• ```bash
• npx shadcn@latest add button
• ```
•  
• هذا يقوم بتثبيت مكون الزر وتبعياته.
•  
• الاستخدام الأساسي:
•  
• ```tsx
• import { Button } from "@/components/ui/button"
•  
• export default function MyComponent() {
• return <Button>انقر علي</Button>
• }
• ```

預期結果:

• إليك نموذج بسيط مع تحقق من صحة البريد الإلكتروني باستخدام React Hook Form و Zod:
•  
• ```tsx
• import { useForm } from "react-hook-form"
• import { z } from "zod"
• import { zodResolver } from "@hookform/resolvers/zod"
• import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
• import { Input } from "@/components/ui/input"
• import { Button } from "@/components/ui/button"
•  
• const formSchema = z.object({
• email: z.string().email({ message: "Invalid email address" }),
• })
•  
• export function EmailForm() {
• const form = useForm({
• resolver: zodResolver(formSchema),
• defaultValues: { email: "" }
• })
•  
• function onSubmit(values) {
• console.log(values)
• }
•  
• return (
• <Form {...form}>
• <form onSubmit={form.handleSubmit(onSubmit)}>
• <FormField
• control={form.control}
• name="email"
• render={({ field }) => (
• <FormItem>
• <FormLabel>البريد الإلكتروني</FormLabel>
• <FormControl><Input placeholder="you@example.com" {...field} /></FormControl>
• <FormMessage />
• </FormItem>
• )}
• />
• <Button type="submit">إرسال</Button>
• </form>
• </Form>
• )
• }
• ```