react-icons/fi#FiArrowLeft JavaScript Examples
The following examples show how to use
react-icons/fi#FiArrowLeft.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From SemanaOmnistack11 with MIT License | 5 votes |
|
export default function NewIncident() {
const [title, setTitle] = useState("");
const [description, setDescription] = useState("");
const [value, setValue] = useState("");
const ongId = localStorage.getItem("ongId");
const history = useHistory();
async function handleNewIncident(e) {
e.preventDefault();
const data = {
title,
description,
value
};
try {
await api.post("/incidents", data, {
headers: { Authorization: ongId }
});
history.push("/profile");
} catch (err) {
console.log(err);
alert("Erro no cadastro, tente novamente");
}
}
return (
<div className="new-incident-container">
<div className="content">
<section>
<img src={logoImg} alt="Be The Hero" />
<h1>Cadastrar novo caso</h1>
<p>
Descreva o caso detalhadamente para encontrar um herói para resolver
isso.
</p>
<Link to="/" className="back-link">
<FiArrowLeft size={16} color="#e02041" />
Voltar para home
</Link>
</section>
<form onSubmit={handleNewIncident}>
<input
placeholder="Título do caso"
value={title}
onChange={e => setTitle(e.target.value)}
/>
<textarea
placeholder="Descrição"
value={description}
onChange={e => setDescription(e.target.value)}
/>
<input
placeholder="Valor em reais"
value={value}
onChange={e => setValue(e.target.value)}
/>
<button className="button" type="submit">
Cadastrar
</button>
</form>
</div>
</div>
);
}
Example #2
| Source File: index.js From be-the-hero with MIT License | 5 votes |
|
export default function NewIncident() {
const history = useHistory();
const ongId = localStorage.getItem('ongId');
async function handleSubmit({ title, description, value }, { reset }) {
try {
await api.post('incidents', {
title,
description,
value,
},{
headers: {
Authorization: ongId,
}
});
history.push('/profile');
alert('Caso cadastrado com sucesso.');
} catch (err) {
alert('Erro ao cadastrar caso, tente novamente.');
}
reset();
}
return (
<Container>
<Content>
<section>
<img src={logoImg} alt="Be The Hero"/>
<h1>Cadastrar novo caso</h1>
<p>
Descreva o caso detalhadamente para encontrar um herói para resolver isso.
</p>
<BackLink
to="/profile"
Icon={FiArrowLeft}
title="Voltar para home"
/>
</section>
<Form onSubmit={handleSubmit}>
<Input name="title" placeholder="Título do caso" />
<TextArea name="description" placeholder="Descrição" />
<Input name="value" placeholder="Valor em reais" />
<div>
<CancelButton onClick={() => history.push('/profile')} type="button">Cancelar</CancelButton>
<Button type="submit">Cadastrar</Button>
</div>
</Form>
</Content>
</Container>
);
}
Example #3
| Source File: index.js From be-the-hero with MIT License | 5 votes |
|
export default function Register() {
const history = useHistory();
async function handleSubmit({ name, email, whatsapp, city, uf }, { reset }) {
try {
const response = await api.post('ongs', {
name,
email,
whatsapp,
city,
uf,
});
alert(`Seu ID de acesso: ${response.data.id}`);
history.push('/');
} catch (err) {
alert('Error no cadastro, tente novamente.');
}
reset();
}
return (
<Container>
<Content>
<section>
<img src={logoImg} alt="Be The Hero"/>
<h1>Cadastro</h1>
<p>
Faça seu cadastro, entre na plataforma e ajude pessoas a encontrarem os casos da sua ONG.
</p>
<BackLink
to="/"
Icon={FiArrowLeft}
title="Voltar para o logon"
/>
</section>
<Form onSubmit={handleSubmit} >
<Input name="name" placeholder="Nome da ONG" />
<Input type="email" name="email" placeholder="E-mail" />
<Input name="whatsapp" placeholder="Whatsapp" />
<div>
<Input name="city" placeholder="Cidade" />
<Input name="uf" placeholder="UF" style={{ width: 80 }} />
</div>
<Button type="submit">Cadastrar</Button>
</Form>
</Content>
</Container>
);
}
Example #4
| Source File: index.js From be-the-hero with MIT License | 5 votes |
|
export default function NewIncident() {
const [title, setTitle] = useState('')
const [description, setDescription] = useState('')
const [value, setValue] = useState('')
const history = useHistory()
const ongId = localStorage.getItem('ongId')
async function handleNewIncident(e) {
e.preventDefault()
const data = {
title,
description,
value,
}
try {
await api.post('/incidents', data, {
headers: {
Authorization: ongId,
}
})
history.push('/profile')
} catch (err) {
alert('Erro ao cadastrar caso, tente novamente.')
}
}
return (
<div className="new-incident-container">
<div className="content">
<section>
<img src={logoImg} alt="Be The Hero" />
<h1> Cadastrar Novo Caso </h1>
<p> Descreva o caso detalhadamente para encontrar um herói para resolver isso. </p>
<Link className="back-link" to="/profile">
<FiArrowLeft size={16} color="#e02041" />
Voltar para Home
</Link>
</section>
<form onSubmit={handleNewIncident}>
<input placeholder="Titulo do Caso" value={title} onChange={e => setTitle(e.target.value)} />
<textarea placeholder="Descrição" value={description} onChange={e => setDescription(e.target.value)} />
<input placeholder="Valor em Reais" value={value} onChange={e => setValue(e.target.value)} />
<button className="button" type="submit"> Cadastrar </button>
</form>
</div>
</div>
)
}
Example #5
| Source File: index.js From be-the-hero with MIT License | 5 votes |
|
export default function Register() {
const [name, setName] = useState('')
const [email, setEmail] = useState('')
const [whatsapp, setWhatsapp] = useState('')
const [city, setCity] = useState('')
const [uf, setUf] = useState('')
const history = useHistory()
async function handleRegister(e) {
e.preventDefault()
const data = {
name,
email,
whatsapp,
city,
uf,
}
try {
const response = await api.post('ongs', data)
alert(`Seu ID de acesso: ${response.data.id}`)
history.push('/')
} catch (err) {
alert('Erro no cadastro, tente novamente')
}
}
return (
<div className="register-container">
<div className="content">
<section>
<img src={logoImg} alt="Be The Hero" />
<h1> Cadastro </h1>
<p> Faça seu cadastro, entre na plataforma e ajude pessoas a encontrarem os casos da sua ONG. </p>
<Link className="back-link" to="/">
<FiArrowLeft size={16} color="#e02041" />
Não tenho cadastro
</Link>
</section>
<form onSubmit={handleRegister}>
<input placeholder="Nome da ONG" value={name} onChange={e => setName(e.target.value)} />
<input type="email" placeholder="Email" value={email} onChange={e => setEmail(e.target.value)} />
<input placeholder="WhatsApp" value={whatsapp} onChange={e => setWhatsapp(e.target.value)} />
<div className="input-group">
<input placeholder="Cidade" value={city} onChange={e => setCity(e.target.value)} />
<input placeholder="UF" value={uf} onChange={e => setUf(e.target.value)} style={{ width: 80 }} />
</div>
<button className="button" type="submit"> Cadastrar </button>
</form>
</div>
</div>
)
}
Example #6
| Source File: index.js From be-the-hero with MIT License | 5 votes |
|
export default function NewIncident(){
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [value, setValue] = useState('');
const history = useHistory();
const ongId = localStorage.getItem('ongId');
async function HandleNewIncident(e) {
e.preventDefault();
const data = {
title,
description,
value,
};
try {
await api.post('incidents', data, {
headers: {
Authorization: ongId,
}
})
history.push('/profile');
} catch (err) {
alert('Erro ao cadastrar caso,tente novamente.');
}
}
return(
<div className="new-incident-container">
<div className="content">
<section>
<img src={logoImg} alt="Be The Hero" />
<h1>Cadastrar novo caso</h1>
<p>Descreva o caso detalhadamente para encontrar um herói para resolver isso.</p>
<Link className="back-link" to="/profile">
<FiArrowLeft size={16} color="#E02041" />
Voltar para home
</Link>
</section>
<form onSubmit={HandleNewIncident}>
<input
placeholder="Titulo do caso"
value={title}
onChange={e => setTitle(e.target.value)} />
<textarea
placeholder="Descrição"
value={description}
onChange={e => setDescription(e.target.value)} />
<input
placeholder="Valor em reais"
value={value}
onChange={e => setValue(e.target.value)} />
<button className="button" type="submit">Cadastrar</button>
</form>
</div>
</div>
);
}
Example #7
| Source File: index.js From be-the-hero with MIT License | 5 votes |
|
export default function NewIncident(){
const [title,setTitle] = useState('');
const [description,setDescription] = useState('');
const [value,setValue] = useState('');
const ongId = localStorage.getItem('ongId');
const history = useHistory();
async function handleNewIncident(e){
e.preventDefault();
const data = {
title,
description,
value,
};
try {
await api.post('incidents',data,{
headers: {
Authorization: ongId
}
});
history.push('/profile');
} catch (err) {
alert('Ocorreu um erro ao cadastrar o caso');
}
}
return (
<div className="new-incident-container">
<div className="content">
<section>
<img src={logoImg} alt="Be the Hero"/>
<h1>Cadastrar novo caso</h1>
<p>Descreva o caso detalhadamente para encontrar um herói para resolver isso.</p>
<Link className="back-link" to="/profile">
<FiArrowLeft size={16} color="#E02041" />
Voltar para Home
</Link>
</section>
<form>
<input
placeholder="Titulo do caso"
value={title}
onChange={e => setTitle(e.target.value)}
/>
<textarea
placeholder="Descrição"
value={description}
onChange={e => setDescription(e.target.value)}
/>
<input
placeholder="Valor em reais"
value={value}
onChange={e => setValue(e.target.value)}
/>
<button onClick={handleNewIncident} className="button" type="submit">Cadastrar</button>
</form>
</div>
</div>
);
}
Example #8
| Source File: index.js From semana-omnistack-11 with MIT License | 5 votes |
|
export default function NewIncident() {
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [value, setValue] = useState('');
const history = useHistory();
const ongId = localStorage.getItem('ongId');
async function handleNewIncident(e) {
e.preventDefault();
const data = {
title,
description,
value,
};
try {
await api.post('incidents', data, {
headers: {
Authorization: ongId,
}
})
history.push('/profile');
} catch (err) {
alert('Erro ao cadastrar caso, tente novamente.');
}
}
return (
<div className="new-incident-container">
<div className="content">
<section>
<img src={logoImg} alt="Be The Hero"/>
<h1>Cadastrar novo caso</h1>
<p>Descreva o caso detalhadamente para encontrar um herói para resolver isso.</p>
<Link className="back-link" to="/profile">
<FiArrowLeft size={16} color="#E02041" />
Voltar para home
</Link>
</section>
<form onSubmit={handleNewIncident}>
<input
placeholder="Título do caso"
value={title}
onChange={e => setTitle(e.target.value)}
/>
<textarea
placeholder="Descrição"
value={description}
onChange={e => setDescription(e.target.value)}
/>
<input
placeholder="Valor em reais"
value={value}
onChange={e => setValue(e.target.value)}
/>
<button className="button" type="submit">Cadastrar</button>
</form>
</div>
</div>
)
}
Example #9
| Source File: index.js From SemanaOmnistack11 with MIT License | 4 votes |
|
export default function Register() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [whatsapp, setWhatsapp] = useState("");
const [city, setCity] = useState("");
const [uf, setUf] = useState("");
const history = useHistory();
async function handleRegister(e) {
e.preventDefault();
const data = {
name,
email,
whatsapp,
city,
uf
};
try {
const response = await api.post("/ongs", data);
alert(`Seu ID de acesso: ${response.data.id}`);
history.push("/");
} catch (err) {
console.log(err);
alert("Erro no cadastro, tente novamente");
}
}
return (
<div className="register-container">
<div className="content">
<section>
<img src={logoImg} alt="Be The Hero" />
<h1>Cadastro</h1>
<p>
Faça seu cadastro, entre na plataforma e ajude pessoas a encontrar
os casos da sua ONG
</p>
<Link to="/" className="back-link">
<FiArrowLeft size={16} color="#e02041" />
Não tenho cadastro
</Link>
</section>
<form onSubmit={handleRegister}>
<input
placeholder="Nome da ONG"
value={name}
onChange={e => setName(e.target.value)}
/>
<input
type="email"
placeholder="E-mail"
value={email}
onChange={e => setEmail(e.target.value)}
/>
<input
placeholder="WhatsApp"
value={whatsapp}
onChange={e => setWhatsapp(e.target.value)}
/>
<div className="input-group">
<input
placeholder="Cidade"
value={city}
onChange={e => setCity(e.target.value)}
/>
<input
placeholder="UF"
style={{ width: 80 }}
value={uf}
onChange={e => setUf(e.target.value)}
/>
</div>
<button className="button" type="submit">
Cadastrar
</button>
</form>
</div>
</div>
);
}
Example #10
| Source File: index.js From be-the-hero with MIT License | 4 votes |
|
export default function Register(){
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [whatsapp, setWhatsapp] = useState('');
const [city, setCity] = useState('');
const [uf, setUf] = useState('');
const history = useHistory();
async function handleRegister(e){
e.preventDefault();
const data = {
name,
email,
whatsapp,
city,
uf,
};
try {
const response = await api.post('ongs', data);
alert(`Seu ID de acesso: ${response.data.id}`);
history.push('/');
} catch (err) {
alert('Erro no cadastro, tente novamente.')
}
}
return(
<div className="register-container">
<div className="content">
<section>
<img src={logoImg} alt="Be The Hero" />
<h1>Cadastro</h1>
<p>Faça seu cadastro, entre na plataforma e ajude pessoas a encontrarem os casos da sua ONG.</p>
<Link className="back-link" to="/">
<FiArrowLeft size={16} color="#E02041" />
Voltar para o logon
</Link>
</section>
<form onSubmit={handleRegister}>
<input
placeholder="Nome da ONG"
value={name}
onChange={ e => setName(e.target.value)} />
<input
type="email"
placeholder="E-mail"
value={email}
onChange={ e => setEmail(e.target.value)} />
<input
placeholder="Whatsapp"
value={whatsapp}
onChange={ e => setWhatsapp(e.target.value)} />
<div className="input-group">
<input
placeholder="Cidade"
value={city}
onChange={ e => setCity(e.target.value)} />
<input
placeholder="UF"
style={{ width: 80 }}
value={uf}
onChange={ e => setUf(e.target.value)} />
</div>
<button className="button" type="submit">Cadastrar</button>
</form>
</div>
</div>
)
}
Example #11
| Source File: index.js From be-the-hero with MIT License | 4 votes |
|
export default function Register() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [whatsapp, setWhatsapp] = useState('');
const [city, setCity] = useState('');
const [uf, setUf] = useState('');
const history = useHistory();
async function handleRegister(e) {
e.preventDefault();
const data = {
name,
email,
whatsapp,
city,
uf,
};
try {
const response = await api.post('ongs', data)
alertify
.alert(`Yeah! Obrigado por se cadastar em nosso sistema! Aqui está o seu ID de acesso: ${response.data.id} ?♂️`, function(){
});
history.push('/')
} catch (err) {
alertify.error('Ih, acho que o Superman encostou em uma Kryptonita! Teve um erro no cadastro, tente novamente.')
}
}
return (
<div className="register-container">
<div className="content">
<section>
<img src={logoImg} alt="Be The Hero"/>
<h1>Cadastro</h1>
<p>Faça seu cadastro e ajude pessoas a encontrarem os casos da sua ONG. ?♂️</p>
<Link className='back-link' to="/">
<FiArrowLeft size={16} color="#E02041"/>
Voltar para o logon
</Link>
</section>
<form onSubmit={handleRegister}>
<input
placeholder="Nome da ONG"
value={name}
onChange={e => setName(e.target.value)}
/>
<input
type="email"
placeholder="E-mail"
value={email}
onChange={e => setEmail(e.target.value)}
/>
<input
placeholder="Whatsapp"
value={whatsapp}
onChange={e => setWhatsapp(e.target.value)}
/>
<div className="input-group">
<input
placeholder="Cidade"
value={city}
onChange={e => setCity(e.target.value)}
/>
<input
placeholder="UF"
style={{ width: 80 }}
value={uf}
onChange={e => setUf(e.target.value)}
/>
</div>
<button className="button" type="submit"> Cadastrar </button>
</form>
</div>
</div>
)
}
Example #12
| Source File: HomeDemo.jsx From react-motion-layout with MIT License | 4 votes |
|
export default function HomeDemo() {
const [animated, setAnimated] = useState(false);
const [blocked, setBlocked] = useState(false);
const withTransition = useMotion('story-0');
const animate = useCallback(() => {
if (blocked) {
return;
}
setBlocked(true);
withTransition(() => {
setAnimated(!animated);
setBlocked(false);
})();
},
[withTransition, animated, blocked]);
return (
<>
<div className="xl:mr-14 w-4/4 mr-0 rounded bg-white lg:rounded-lg p-10 pt-8 lg:shadow-xl demo-box">
{ !animated
&& (
<MotionScreen name="Feed-Screen">
<MotionScene name="story-0" easing="cubic-bezier(0.22, 1, 0.36, 1)">
<div className="flex flex-col cursor-default">
<div className="flex">
<SharedElement.Image
animationKey="avatar"
className="w-16 h-16 rounded-full object-cover"
src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
/>
<div className="flex flex-col ml-4 mt-2">
<SharedElement.Text animationKey="name" className="font-bold text-lg leading-tight text-pink-400">
Patricia
</SharedElement.Text>
<div className="font-normal text-sm text-gray-500">
a minute ago
</div>
</div>
</div>
<div className="mt-4">
<SharedElement.Text animationKey="body" className="font-normal text-gray-500 max-w-xs">
Hey guys, as I promised here is my collection of vintage pictures. I hope you like it.
</SharedElement.Text>
<div className="flex my-8">
<img
className="h-40 rounded-lg object-cover"
src="https://images.unsplash.com/photo-1502120492606-fba13cc63721?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=50"
/>
<div className="ml-2">
<SharedElement.Image
animationKey="big-image"
className="h-40 rounded-lg object-cover"
src="https://images.unsplash.com/photo-1527786356703-4b100091cd2c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
</div>
<img
className="h-40 rounded-lg object-cover ml-2"
src="https://images.unsplash.com/photo-1516962126636-27ad087061cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=300&q=50"
/>
</div>
<div className="mt-4 flex items-center">
<img
className="w-10 h-10 rounded-full object-cover border-white border-2 border-solid z-20"
src="https://images.unsplash.com/photo-1523598455533-144bae6cf56e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
<img
className="w-10 h-10 rounded-full object-cover border-white border-2 -ml-4 border-solid z-10"
src="https://images.unsplash.com/photo-1532910404247-7ee9488d7292?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
<img
className="w-10 h-10 rounded-full object-cover border-white border-2 -ml-4 border-solid"
src="https://images.unsplash.com/photo-1517841905240-472988babdf9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
<div className="text-bold font-bold pl-2 text-pink-300">+1801</div>
</div>
</div>
</div>
</MotionScene>
</MotionScreen>
)}
{ animated
&& (
<MotionScreen name="Story-Screen">
<MotionScene name="story-0" easing="cubic-bezier(0.22, 1, 0.36, 1)">
<div className="flex">
<div className="flex flex-col items-center flex-shrink-0">
<SharedElement.Image
animationKey="avatar"
className="w-10 h-10 rounded-full object-cover"
src="https://images.unsplash.com/photo-1500917293891-ef795e70e1f6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
/>
</div>
<div className="ml-4">
<div className="mb-4">
<div className="flex flex-col">
<SharedElement.Text animationKey="name" className="font-bold text-base leading-tight text-pink-400">
Patricia
</SharedElement.Text>
</div>
<div className="mt-2">
<SharedElement.Text animationKey="body" className="font-normal text-gray-500 max-w-sm">
Hey guys, as I promised here is my collection of vintage pictures. I hope you like it.
</SharedElement.Text>
</div>
</div>
<SharedElement.Image
animationKey="big-image"
className="h-64 rounded-lg object-cover"
src="https://images.unsplash.com/photo-1527786356703-4b100091cd2c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
/>
<div className="mt-4 flex items-center">
<img
className="opacity-75 w-8 h-8 rounded-full object-cover border-white border-2 border-solid z-20"
src="https://images.unsplash.com/photo-1535207010348-71e47296838a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
<img
className="opacity-75 w-8 h-8 rounded-full object-cover border-white border-2 -ml-4 border-solid z-10"
src="https://images.unsplash.com/photo-1520409364224-63400afe26e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
<img
className="opacity-75 w-8 h-8 rounded-full object-cover border-white border-2 -ml-4 border-solid"
src="https://images.unsplash.com/photo-1510678960173-b52e15cbcfb4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=40"
/>
</div>
</div>
</div>
</MotionScene>
</MotionScreen>
)}
</div>
<div className="mt-4 inline-block mb-8 ml-4 lg:ml-0">
<div onClick={animate} className="p-4 bg-white rounded-md flex items-center shadow-md text-gray-600 cursor-pointer">
{animated ? <FiArrowLeft /> : <FiPlay />}
<div className="ml-4 font-medium ">
{animated ? 'Go back' : 'Run animation'}
</div>
</div>
</div>
</>
);
}
Example #13
| Source File: index.js From semana-omnistack-11 with MIT License | 4 votes |
|
export default function Register() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [whatsapp, setWhatsapp] = useState('');
const [city, setCity] = useState('');
const [uf, setUf] = useState('');
const history = useHistory();
async function handleRegister(e) {
e.preventDefault();
const data = {
name,
email,
whatsapp,
city,
uf,
};
try {
const response = await api.post('ongs', data);
alert(`Seu ID de acesso: ${response.data.id}`);
history.push('/');
} catch (err) {
alert('Erro no cadastro, tente novamente.');
}
}
return (
<div className="register-container">
<div className="content">
<section>
<img src={logoImg} alt="Be The Hero"/>
<h1>Cadastro</h1>
<p>Faça seu cadastro, entre na plataforma e ajude pessoas a encontrarem os casos da sua ONG.</p>
<Link className="back-link" to="/">
<FiArrowLeft size={16} color="#E02041" />
Não tenho cadastro
</Link>
</section>
<form onSubmit={handleRegister}>
<input
placeholder="Nome da ONG"
value={name}
onChange={e => setName(e.target.value)}
/>
<input
type="email"
placeholder="E-mail"
value={email}
onChange={e => setEmail(e.target.value)}
/>
<input
placeholder="WhatsApp"
value={whatsapp}
onChange={e => setWhatsapp(e.target.value)}
/>
<div className="input-group">
<input
placeholder="Cidade"
value={city}
onChange={e => setCity(e.target.value)}
/>
<input
placeholder="UF"
style={{ width: 80 }}
value={uf}
onChange={e => setUf(e.target.value)}
/>
</div>
<button className="button" type="submit">Cadastrar</button>
</form>
</div>
</div>
);
}
Example #14
| Source File: index.js From plataforma-sabia with MIT License | 4 votes |
|
StepTwo = ({ activeStep, setNextStep, setPrevStep, updateUserData }) => {
const [isFetching, setIsFetching] = useState(false);
const form = useForm({
defaultValues: {
email: '',
password: '',
passwordConfirm: '',
privacyTerms: false,
},
});
const passwordField = useRef({});
passwordField.current = form.watch('password');
const handleSubmit = async ({ email, password }) => {
setIsFetching(true);
const response = await register(email, password);
if (response.error) {
toast.error(
response.error.message[0].message ||
'Ocorreu um erro para efetuar seu registro. Recarregue a página e tente novamente...',
);
setIsFetching(false);
return;
}
updateUserData(response);
setNextStep();
};
return (
<Form onSubmit={form.handleSubmit(handleSubmit)}>
<StepTitle>{activeStep.title}</StepTitle>
<StepSubtitle>{activeStep.subtitle}</StepSubtitle>
<InputsWrapper>
<InputField
name="email"
form={form}
label="Email"
placeholder="Digite seu e-mail"
variant="lightRounded"
validation={{ required: true }}
/>
<S.PasswordWrapper>
<InputField
name="password"
form={form}
label="Senha"
placeholder="Digite sua senha"
variant="lightRounded"
type="password"
validation={{
required: true,
validate: {
passwordStrength: (value) => {
const strength = checkPasswordStrength(value);
const isValid = Object.values(strength).every((item) => !!item);
return isValid || '';
},
},
}}
/>
<PasswordStrength form={form} inputToWatch="password" />
</S.PasswordWrapper>
<InputField
name="passwordConfirm"
form={form}
label="Confirmar senha"
placeholder="Confirme sua senha"
variant="lightRounded"
type="password"
validation={{
required: true,
validate: {
passwordMatch: (value) =>
passwordField.current === value || 'As senhas não são iguais',
},
}}
/>
<S.CheckboxWrapper>
<CheckBoxField
form={form}
validation={{ required: true }}
name="terms-and-privacy"
ariaLabel="Concordo com os termos de uso e política de privacidade da Plataforma Sabiá"
label={
<S.CheckboxLabel>
Concordo com os{' '}
<a href="/terms-of-use" target="_blank">
termos de uso
</a>{' '}
e{' '}
<a href="/privacy-policy" target="_blank">
política de privacidade
</a>{' '}
da Plataforma Sabiá
</S.CheckboxLabel>
}
noPadding
variant="rounded"
/>
<CheckBoxField
form={form}
name="receive-news"
ariaLabel="Concordo em receber novidades da Plataforma Sabiá por email. (OPCIONAL)"
label={
<S.CheckboxLabel>
Concordo em receber novidades da Plataforma Sabiá por email.
(OPCIONAL)
</S.CheckboxLabel>
}
noPadding
variant="rounded"
/>
</S.CheckboxWrapper>
</InputsWrapper>
<Actions>
<RectangularButton
variant="round"
colorVariant="green"
type="submit"
disabled={isFetching}
>
Continuar
<FiArrowRight fontSize="2rem" />
</RectangularButton>
<RectangularButton
variant="text"
colorVariant="silver"
id="back-button"
onClick={setPrevStep}
>
<FiArrowLeft fontSize="2rem" />
Voltar
</RectangularButton>
</Actions>
</Form>
);
}
Example #15
| Source File: index.js From plataforma-sabia with MIT License | 4 votes |
|
Register = ({ initialStepIndex }) => {
const [activeStep, setActiveStep] = useState({
...steps[initialStepIndex ?? 0],
index: initialStepIndex ?? 0,
});
const [userData, setUserData] = useState({});
const CurrentStepComponent = activeStep.component;
const isLastStep = activeStep.index === steps.length - 1;
const canGoToPreviousStep = activeStep.index === 1;
const updateUserData = (data) => setUserData((prev) => ({ ...prev, ...data }));
const setNextStep = () => {
setActiveStep((active) => ({ ...steps[active.index + 1], index: active.index + 1 }));
};
const setPrevStep = () => {
setActiveStep((active) => ({ ...steps[active.index - 1], index: active.index - 1 }));
};
return (
<S.Container backgroundImage={activeStep.backgroundImage}>
{!isLastStep && (
<S.Sidebar>
{canGoToPreviousStep && (
<RectangularButton colorVariant="silver" onClick={setPrevStep}>
<FiArrowLeft fontSize="2rem" strokeWidth={2.5} />
</RectangularButton>
)}
<Link href={internalPages.home} passHref>
<S.LogoWrapper>
<Image
src="/logo-mono.svg"
alt="Plataforma Sabiá"
width={215}
height={65}
layout="responsive"
/>
</S.LogoWrapper>
</Link>
<S.StepsWrapper>
<S.StepsTitle>Cadastro de Usuários</S.StepsTitle>
<S.Steps>
{steps.map((step, index) => {
const isLast = index === steps.length - 1;
if (isLast) return null;
const isActive = step.title === activeStep.title;
const isCompleted = activeStep.index > index;
return (
<S.Step
key={step.title}
active={isActive}
completed={isCompleted}
>
{!!isActive && <FiArrowRight />}
{!!isCompleted && <FiCheckCircle />}
<p>{step.title}</p>
</S.Step>
);
})}
</S.Steps>
</S.StepsWrapper>
</S.Sidebar>
)}
<S.Content>
{!isLastStep && (
<>
<S.PageTitle>Cadastro de Usuários</S.PageTitle>
<S.ProgressIndicator
stepsLength={steps.length}
activeStepIndex={activeStep.index}
/>
</>
)}
{CurrentStepComponent && (
<CurrentStepComponent
activeStep={activeStep}
setNextStep={setNextStep}
setPrevStep={setPrevStep}
userData={userData}
updateUserData={updateUserData}
/>
)}
</S.Content>
</S.Container>
);
}
