PrimeReact

import { Button } from 'primereact/button';
import { InputText } from 'primereact/inputtext';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Dropdown } from 'primereact/dropdown';
import { Calendar } from 'primereact/calendar';

// Login Form
function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');

  const handleLogin = () => {
    console.log('تسجيل الدخول:', username);
  };

  return (
    <div className="flex flex-column gap-3 p-4" style={{ maxWidth: '400px' }}>
      <div className="p-inputgroup">
        <span className="p-inputgroup-addon">
          <i className="pi pi-user" />
        </span>
        <InputText
          placeholder="اسم المستخدم"
          value={username}
          onChange={e => setUsername(e.target.value)}
        />
      </div>

      <div className="p-inputgroup">
        <span className="p-inputgroup-addon">
          <i className="pi pi-lock" />
        </span>
        <InputText
          type="password"
          placeholder="كلمة المرور"
          value={password}
          onChange={e => setPassword(e.target.value)}
        />
      </div>

      <Button
        label="تسجيل الدخول"
        icon="pi pi-sign-in"
        className="p-button-raised"
        onClick={handleLogin}
      />
    </div>
  );
}

// DataTable
function UsersTable() {
  const users = [
    { id: 1, name: 'أحمد', city: 'القاهرة', age: 28 },
    { id: 2, name: 'فاطمة', city: 'الإسكندرية', age: 32 },
  ];

  return (
    <DataTable value={users} paginator rows={10} stripedRows>
      <Column field="id" header="الرقم" sortable />
      <Column field="name" header="الاسم" sortable />
      <Column field="city" header="المدينة" sortable />
      <Column field="age" header="العمر" sortable />
    </DataTable>
  );
}