react-icons/fa#FaWhatsapp TypeScript Examples
The following examples show how to use
react-icons/fa#FaWhatsapp.
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: SharePopover.tsx From ksana.in with Apache License 2.0 | 5 votes |
|
SharePopover = ({ url }: SharePopoverProps) => {
const [isLoadingShare, setLoadingShare] = useState<boolean>(false)
const [showShare, setShowShare] = useState<boolean>(false)
const [text, setText] = useState<string>('')
const parsedUrl = encodeURIComponent(url)
const handleShare = async (url: string) => {
setLoadingShare(true)
const d = await getMeta(url)
setText(encodeURIComponent(d.description))
setShowShare(true)
setLoadingShare(false)
}
return (
<Popover
isOpen={showShare}
onClose={() => {
setShowShare(false)
}}
isLazy
placement="bottom"
>
<PopoverTrigger>
<IconButton
onClick={() => {
handleShare(url)
}}
aria-label="Share url"
fontSize="20px"
variant="ghost"
borderRadius="md"
isLoading={isLoadingShare}
icon={<HiShare color="#ED8936" />}
/>
</PopoverTrigger>
<PopoverContent>
<PopoverArrow />
<PopoverCloseButton />
<PopoverHeader>Bagikan tautan anda</PopoverHeader>
<PopoverBody>
<Stack direction="row" justifyContent="center">
<Link isExternal href={`https://api.whatsapp.com/send?text=${text}+%0A+${parsedUrl}`}>
<IconButton
borderRadius="md"
colorScheme="green"
aria-label="Share whatsapp"
icon={<FaWhatsapp />}
/>
</Link>
<Link
isExternal
href={`https://twitter.com/intent/tweet?text=${text}+%0A+${parsedUrl}`}
>
<IconButton
borderRadius="md"
colorScheme="twitter"
aria-label="Share twitter"
icon={<FaTwitter />}
/>
</Link>
<Link
isExternal
href={`https://www.facebook.com/sharer/sharer.php?quote=${text}&u=${parsedUrl}`}
>
<IconButton
borderRadius="md"
colorScheme="facebook"
aria-label="Share Facebook"
icon={<FaFacebook />}
/>
</Link>
</Stack>
</PopoverBody>
</PopoverContent>
</Popover>
)
}
Example #2
| Source File: index.tsx From nlw-03-omnistack with MIT License | 5 votes |
|
export default function Orphanage() {
return (
<div id="page-orphanage">
<Sidebar />
<main>
<div className="orphanage-details">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
<div className="images">
<button className="active" type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
</div>
<div className="orphanage-details-content">
<h1>Lar das meninas</h1>
<p>Presta assistência a crianças de 06 a 15 anos que se encontre em situação de risco e/ou vulnerabilidade social.</p>
<div className="map-container">
<Map
interactive={false}
center={[-27.2092052,-49.6401092]}
zoom={16}
style={{ width: '100%', height: 280 }}
>
<Marker interactive={false} icon={happyMapIcon} position={[-27.2092052,-49.6401092]} />
</Map>
<footer>
<a href="">Ver rotas no Google Maps</a>
</footer>
</div>
<hr />
<h2>Instruções para visita</h2>
<p>Venha como se sentir mais à vontade e traga muito amor para dar.</p>
<div className="open-details">
<div className="hour">
<FiClock size={32} color="#15B6D6" />
Segunda à Sexta <br />
8h às 18h
</div>
<div className="open-on-weekends">
<FiInfo size={32} color="#39CC83" />
Atendemos <br />
fim de semana
</div>
</div>
<PrimaryButton type="button">
<FaWhatsapp size={20} color="#FFF" />
Entrar em contato
</PrimaryButton>
</div>
</div>
</main>
</div>
);
}
Example #3
| Source File: Orphanage.tsx From NLW-3.0 with MIT License | 4 votes |
|
export default function Orphanage() {
const { goBack } = useHistory();
return (
<div id="page-orphanage">
<aside>
<img src={mapMarkerImg} alt="Happy" />
<footer>
<button type="button" onClick={goBack}>
<FiArrowLeft size={24} color="#FFF" />
</button>
</footer>
</aside>
<main>
<div className="orphanage-details">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
<div className="images">
<button className="active" type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
<button type="button">
<img src="https://www.gcd.com.br/wp-content/uploads/2020/08/safe_image.jpg" alt="Lar das meninas" />
</button>
</div>
<div className="orphanage-details-content">
<h1>Lar das meninas</h1>
<p>Presta assistência a crianças de 06 a 15 anos que se encontre em situação de risco e/ou vulnerabilidade social.</p>
<div className="map-container">
<Map
center={[-27.2092052, -49.6401092]}
zoom={16}
style={{ width: '100%', height: 280 }}
dragging={false}
touchZoom={false}
zoomControl={false}
scrollWheelZoom={false}
doubleClickZoom={false}
>
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
<Marker interactive={false} icon={happyMapIcon} position={[-27.2092052, -49.6401092]} />
</Map>
<footer>
<a href="">Ver rotas no Google Maps</a>
</footer>
</div>
<hr />
<h2>Instruções para visita</h2>
<p>Venha como se sentir mais à vontade e traga muito amor para dar.</p>
<div className="open-details">
<div className="hour">
<FiClock size={32} color="#15B6D6" />
Segunda à Sexta <br />
8h às 18h
</div>
<div className="open-on-weekends">
<FiInfo size={32} color="#39CC83" />
Atendemos <br />
fim de semana
</div>
</div>
<button type="button" className="contact-button">
<FaWhatsapp size={20} color="#FFF" />
Entrar em contato
</button>
</div>
</div>
</main>
</div>
);
}
Example #4
| Source File: index.tsx From NextLevelWeek with MIT License | 4 votes |
|
Orphanage: React.FC = () => {
const params = useParams<IOrphanageParams>();
const [orphanage, setOrphanage] = useState<IOpharnage>();
const [activeImageIndex, setActiveImageIndex] = useState(0);
useEffect(() => {
api.get(`/orphanages/${params.id}`).then(res => {
// console.log(res.data);
setOrphanage(res.data);
});
}, [params.id]);
if (!orphanage) {
return <p>Carregando..</p>;
// Fazer em Shimmer
}
return (
<Container>
<Sidebar />
<Content>
<DetailsContainer>
<img src={orphanage.images[activeImageIndex].url} alt={orphanage.name} />
<ImagesContainer>
{orphanage.images.map((image, index) => {
return (
<ButtonImage
key={image.id}
type="button"
active={activeImageIndex === index}
onClick={() => {
setActiveImageIndex(index);
}}
>
<img src={image.url} alt={orphanage.name} />
</ButtonImage>
);
})}
</ImagesContainer>
<OrphanageDetails>
<h1>{orphanage.name}</h1>
<p>{orphanage.about}</p>
<MapContainer>
<Map
center={[orphanage.latitude, orphanage.longitude]}
zoom={16}
style={{ width: '100%', height: 280 }}
dragging={false}
touchZoom={false}
zoomControl={false}
scrollWheelZoom={false}
doubleClickZoom={false}
>
<TileLayer
url={`https://api.mapbox.com/styles/v1/mapbox/light-v10/tiles/256/{z}/{x}/{y}@2x?access_token=${process.env.REACT_APP_MAPBOX_TOKEN}`}
/>
<Marker interactive={false} icon={happyMapIcon} position={[orphanage.latitude, orphanage.longitude]} />
</Map>
<footer>
<a target="_blank" rel="noopener noreferrer" href={`https://www.google.com/maps/dir/?api=1&destination=${orphanage.latitude},${orphanage.longitude}`}>Ver rotas no Google Maps</a>
</footer>
</MapContainer>
<hr />
<h2>Instruções para visita</h2>
<p>{orphanage.instructions}</p>
<OpenDetails>
<OpeningHoursContainer>
<FiClock size={32} color="#15B6D6" />
Segunda à Sexta <br />
{orphanage.opening_hours}
</OpeningHoursContainer>
{orphanage.open_on_weekends ? (
<OpenWeekends open={orphanage.open_on_weekends}>
<FiInfo size={32} />
Atendemos <br />
fim de semanada
</OpenWeekends>
) : (
<OpenWeekends open={orphanage.open_on_weekends}>
<FiInfo size={32} />
Não atendemos <br />
no fim de semanada
</OpenWeekends>
)
}
<button type="button">
<FaWhatsapp size={20} color="#FFF" />
Entrar em contato
</button>
</OpenDetails>
</OrphanageDetails>
</DetailsContainer>
</Content>
</Container>
);
}
