136 lines
6.2 KiB
TypeScript
136 lines
6.2 KiB
TypeScript
'use client';
|
|
import { Button } from 'primereact/button';
|
|
import { Dropdown } from 'primereact/dropdown';
|
|
import { FileUpload } from 'primereact/fileupload';
|
|
import { InputText } from 'primereact/inputtext';
|
|
import { InputTextarea } from 'primereact/inputtextarea';
|
|
import React, { useEffect, useState } from 'react';
|
|
import type { Demo } from '@/types';
|
|
|
|
function ProfileCreate() {
|
|
const [countries, setCountries] = useState<Demo.Country[]>([]);
|
|
const [selectedCountry, setSelectedCountry] = useState<Demo.Country | {}>(null);
|
|
useEffect(() => {
|
|
setCountries([
|
|
{ name: 'Australia', code: 'AU' },
|
|
{ name: 'Brazil', code: 'BR' },
|
|
{ name: 'China', code: 'CN' },
|
|
{ name: 'Egypt', code: 'EG' },
|
|
{ name: 'France', code: 'FR' },
|
|
{ name: 'Germany', code: 'DE' },
|
|
{ name: 'India', code: 'IN' },
|
|
{ name: 'Japan', code: 'JP' },
|
|
{ name: 'Spain', code: 'ES' },
|
|
{ name: 'United States', code: 'US' }
|
|
]);
|
|
}, []);
|
|
|
|
const itemTemplate = (option: Demo.Country) => {
|
|
return (
|
|
<div className="flex align-items-center">
|
|
<img
|
|
src={`/demo/images/flag/flag_placeholder.png`}
|
|
onError={(e) => ((e.target as HTMLImageElement).src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
|
|
className={'mr-2 flag flag-' + option.code.toLowerCase()}
|
|
style={{ width: '18px' }}
|
|
alt={option.name}
|
|
/>
|
|
<div>{option.name}</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="card">
|
|
<span className="text-900 text-xl font-bold mb-4 block">Create User</span>
|
|
<div className="grid">
|
|
<div className="col-12 lg:col-2">
|
|
<div className="text-900 font-medium text-xl mb-3">Profile</div>
|
|
<p className="m-0 p-0 text-600 line-height-3 mr-3">Odio euismod lacinia at quis risus sed vulputate odio.</p>
|
|
</div>
|
|
<div className="col-12 lg:col-10">
|
|
<div className="grid formgrid p-fluid">
|
|
<div className="field mb-4 col-12">
|
|
<label htmlFor="nickname" className="font-medium text-900">
|
|
Nickname
|
|
</label>
|
|
<InputText id="nickname" type="text" />
|
|
</div>
|
|
<div className="field mb-4 col-12">
|
|
<label htmlFor="avatar" className="font-medium text-900">
|
|
Avatar
|
|
</label>
|
|
<FileUpload
|
|
mode="basic"
|
|
name="avatar"
|
|
url="./upload.php"
|
|
accept="image/*"
|
|
maxFileSize={1000000}
|
|
chooseOptions={{
|
|
label: 'Upload Image',
|
|
className: 'p-button-outlined p-button-plain'
|
|
}}
|
|
></FileUpload>
|
|
</div>
|
|
<div className="field mb-4 col-12">
|
|
<label htmlFor="bio" className="font-medium text-900">
|
|
Bio
|
|
</label>
|
|
<InputTextarea id="bio" rows={5} autoResize></InputTextarea>
|
|
</div>
|
|
<div className="field mb-4 col-12 md:col-6">
|
|
<label htmlFor="email" className="font-medium text-900">
|
|
Email
|
|
</label>
|
|
<InputText id="email" type="text" />
|
|
</div>
|
|
<div className="field mb-4 col-12 md:col-6">
|
|
<label htmlFor="country" className="font-medium text-900">
|
|
Country
|
|
</label>
|
|
<Dropdown
|
|
inputId="country"
|
|
options={countries}
|
|
itemTemplate={itemTemplate}
|
|
onChange={(e) => setSelectedCountry(e.value)}
|
|
value={selectedCountry}
|
|
optionLabel="name"
|
|
filter
|
|
filterBy="name"
|
|
showClear
|
|
placeholder="Select a Country"
|
|
/>
|
|
</div>
|
|
<div className="field mb-4 col-12 md:col-6">
|
|
<label htmlFor="city" className="font-medium text-900">
|
|
City
|
|
</label>
|
|
<InputText id="city" type="text" />
|
|
</div>
|
|
<div className="field mb-4 col-12 md:col-6">
|
|
<label htmlFor="state" className="font-medium text-900">
|
|
State
|
|
</label>
|
|
<InputText id="state" type="text" />
|
|
</div>
|
|
<div className="field mb-4 col-12">
|
|
<label htmlFor="website" className="font-medium text-900">
|
|
Website
|
|
</label>
|
|
<div className="p-inputgroup">
|
|
<span className="p-inputgroup-addon">www</span>
|
|
<InputText id="website" type="text" />
|
|
</div>
|
|
</div>
|
|
<div className="col-12">
|
|
<Button label="Create User" className="w-auto mt-3"></Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default ProfileCreate;
|