import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </Router>
  );
}

import { create } from 'zustand'

const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}))

// توی کامپوننت
function Counter() {
  const { count, increment, decrement } = useCounterStore()
  return (
    <div>
      <span>{count}</span>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  )
}

import { createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: (state) => {
      state.value += 1
    },
    decrement: (state) => {
      state.value -= 1
    }
  }
})

import { useQuery } from '@tanstack/react-query'

function Posts() {
  const { data: posts, isLoading, error } = useQuery({
    queryKey: ['posts'],
    queryFn: () => fetch('/api/posts').then(res => res.json())
  })

  if (isLoading) return <div>Loading...</div>
  if (error) return <div>Error: {error.message}</div>

  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

import axios from 'axios'

// تنظیمات پایه
const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
})

// اضافه کردن interceptor برای error handling
api.interceptors.response.use(
  response => response,
  error => {
    console.error('API Error:', error)
    return Promise.reject(error)
  }
)

import { useForm } from 'react-hook-form'

function ContactForm() {
  const { register, handleSubmit, formState: { errors } } = useForm()

  const onSubmit = (data) => {
    console.log(data)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input
        {...register('name', { required: 'نام الزامی است' })}
        placeholder="نام شما"
      />
      {errors.name && <span>{errors.name.message}</span>}

      <input
        {...register('email', {
          required: 'ایمیل الزامی است',
          pattern: {
            value: /^\S+@\S+$/i,
            message: 'فرمت ایمیل نادرست است'
          }
        })}
        placeholder="ایمیل"
      />
      {errors.email && <span>{errors.email.message}</span>}

      <button type="submit">ارسال</button>
    </form>
  )
}

import { z } from 'zod'
import { zodResolver } from '@hookform/resolvers/zod'

const schema = z.object({
  name: z.string().min(2, 'نام حداقل ۲ کاراکتر باشد'),
  email: z.string().email('ایمیل معتبر وارد کنید'),
  age: z.number().min(18, 'سن حداقل ۱۸ سال باشد')
})

const { register, handleSubmit } = useForm({
  resolver: zodResolver(schema)
})

import { Dialog } from '@headlessui/react'
import { useState } from 'react'

function MyModal() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <>
      <button onClick={() => setIsOpen(true)}>
        باز کردن مودال
      </button>

      <Dialog open={isOpen} onClose={() => setIsOpen(false)}>
        <Dialog.Panel className="bg-white p-6 rounded-lg">
          <Dialog.Title>عنوان مودال</Dialog.Title>
          <Dialog.Description>
            این یک مودال نمونه است
          </Dialog.Description>
          <button onClick={() => setIsOpen(false)}>بستن</button>
        </Dialog.Panel>
      </Dialog>
    </>
  )
}

import { motion } from 'framer-motion'

function AnimatedBox() {
  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.5 }}
      animate={{ opacity: 1, scale: 1 }}
      transition={{ duration: 0.5 }}
      whileHover={{ scale: 1.1 }}
      whileTap={{ scale: 0.9 }}
      className="w-32 h-32 bg-blue-500 rounded-lg"
    >
      کلیک کنید!
    </motion.div>
  )
}

import clsx from 'clsx'
import { twMerge } from 'tailwind-merge'

// ترکیب clsx و tailwind-merge برای مدیریت بهتر کلاس‌ها
function cn(...inputs) {
  return twMerge(clsx(inputs))
}

// استفاده
function Button({ variant, className, ...props }) {
  return (
    <button
      className={cn(
        "px-4 py-2 rounded-md font-medium",
        {
          "bg-blue-500 text-white": variant === "primary",
          "bg-gray-200 text-gray-800": variant === "secondary",
        },
        className
      )}
      {...props}
    />
  )
}

import i18n from 'i18next'
import { initReactI18next, useTranslation } from 'react-i18next'

i18n.use(initReactI18next).init({
  resources: {
    fa: {
      translation: {
        welcome: "خوش آمدید",
        goodbye: "خداحافظ"
      }
    },
    en: {
      translation: {
        welcome: "Welcome",
        goodbye: "Goodbye"
      }
    }
  },
  lng: "fa",
  fallbackLng: "en"
})

function Welcome() {
  const { t } = useTranslation()
  return <h1>{t('welcome')}</h1>
}

import { format, formatDistanceToNow } from 'date-fns'
import { faIR } from 'date-fns/locale'

// قالب‌بندی تاریخ
const formattedDate = format(new Date(), 'PPP', { locale: faIR })

// محاسبه فاصله زمانی
const timeAgo = formatDistanceToNow(new Date(2023, 0, 1), {
  addSuffix: true,
  locale: faIR
})

import { FaHome, FaUser, FaCog } from 'react-icons/fa'
import { MdEmail, MdPhone } from 'react-icons/md'

function Navigation() {
  return (
    <nav>
      <a href="/"><FaHome /> خانه</a>
      <a href="/profile"><FaUser /> پروفایل</a>
      <a href="/settings"><FaCog /> تنظیمات</a>
    </nav>
  )
}