react-icons/fi#FiInfo TypeScript Examples
The following examples show how to use
react-icons/fi#FiInfo.
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.tsx From react-pdv with MIT License | 6 votes |
MenuBar: React.FC = () => (
<s.MenuBarWrapper>
<s.MenuBarLogo>
<img src={LogoImg} alt="Logo" />
</s.MenuBarLogo>
<s.MenuBarGroup>
<s.MenuBarLink to="/" title="Home">
<s.MenuBarItem>
<FiMonitor size="1.6em" />
</s.MenuBarItem>
</s.MenuBarLink>
<s.MenuBarLink to="/product" title="Produtos">
<s.MenuBarItem>
<FiBox size="1.6em" />
</s.MenuBarItem>
</s.MenuBarLink>
<s.MenuBarItem title="Perfil">
<FiUser size="1.6em" />
</s.MenuBarItem>
<s.MenuBarItem title="Configuração">
<FiSliders size="1.6em" />
</s.MenuBarItem>
<s.MenuBarLink to="/about" title="Sobre">
<s.MenuBarItem>
<FiInfo size="1.6em" />
</s.MenuBarItem>
</s.MenuBarLink>
</s.MenuBarGroup>
</s.MenuBarWrapper>
)
Example #2
Source File: Card.tsx From tobira with Apache License 2.0 | 6 votes |
Card: React.FC<Props> = ({ kind, iconPos = "left", children, ...rest }) => (
<div
css={{
display: "inline-flex",
flexDirection: iconPos === "left" ? "row" : "column",
borderRadius: 4,
padding: "8px 16px",
gap: 16,
alignItems: "center",
"& > svg": {
fontSize: 24,
minWidth: 24,
},
...match(kind, {
"error": () => ({
backgroundColor: "var(--danger-color)",
border: "1.5px solid var(--danger-color)",
color: "var(--danger-color-bw-contrast)",
}) as Record<string, string>,
"info": () => ({
backgroundColor: "var(--grey97)",
}),
}),
}}
{...rest}
>
{match(kind, {
"error": () => <FiAlertTriangle />,
"info": () => <FiInfo css={{ color: "var(--grey40)" }} />,
})}
<div>{children}</div>
</div>
)
Example #3
Source File: index.tsx From rocketredis with MIT License | 5 votes |
icons = { info: <FiInfo size={24} />, success: <FiCheckCircle size={24} />, error: <FiAlertCircle size={24} /> }
Example #4
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 #5
Source File: Index.tsx From meshtastic-web with GNU General Public License v3.0 | 5 votes |
Extensions = (): JSX.Element => {
const [selectedExtension, setSelectedExtension] = useState<
'info' | 'logs' | 'fileBrowser' | 'rangeTest' | 'debug'
>('info');
return (
<Layout
title="Extensions"
icon={<VscExtensions />}
sidebarContents={
<div className="absolute flex w-full flex-col dark:bg-primaryDark">
<ExternalSection
onClick={(): void => {
setSelectedExtension('info');
}}
icon={<FiInfo />}
active={selectedExtension === 'info'}
title="Node Info"
/>
<ExternalSection
onClick={(): void => {
setSelectedExtension('logs');
}}
icon={<MdSubject />}
active={selectedExtension === 'logs'}
title="Logs"
/>
<ExternalSection
onClick={(): void => {
setSelectedExtension('fileBrowser');
}}
icon={<FiFile />}
active={selectedExtension === 'fileBrowser'}
title="File Browser"
/>
<ExternalSection
onClick={(): void => {
setSelectedExtension('rangeTest');
}}
icon={<RiPinDistanceFill />}
active={selectedExtension === 'rangeTest'}
title="Range Test"
/>
<ExternalSection
onClick={(): void => {
setSelectedExtension('debug');
}}
icon={<VscDebug />}
active={selectedExtension === 'debug'}
title="Debug"
/>
</div>
}
>
<div className="w-full">
{selectedExtension === 'info' && <Info />}
{selectedExtension === 'logs' && <Logs />}
{selectedExtension === 'fileBrowser' && <FileBrowser />}
{selectedExtension === 'debug' && <Debug />}
</div>
</Layout>
);
}
Example #6
Source File: index.tsx From GoBarber with MIT License | 5 votes |
icons = { info: <FiInfo size={24} />, error: <FiAlertCircle size={24} />, success: <FiCheckCircle size={24} />, }
Example #7
Source File: index.tsx From gobarber-project with MIT License | 5 votes |
icons = { info: <FiInfo size={24} />, error: <FiAlertCircle size={24} />, success: <FiCheckCircle size={24} />, }
Example #8
Source File: index.tsx From vagasExplorer with MIT License | 5 votes |
icons = { info: <FiInfo size={24} />, error: <FiAlertCircle size={24} />, sucess: <FiCheckCircle size={24} />, }
Example #9
Source File: index.tsx From front-entenda-direito with GNU General Public License v3.0 | 5 votes |
icons = { info: <FiInfo size={24} />, success: <FiCheckCircle size={24} />, error: <FiAlertCircle size={24} />, }
Example #10
Source File: index.tsx From front-entenda-direito with GNU General Public License v3.0 | 5 votes |
icons = { info: <FiInfo size={24} />, success: <FiCheckCircle size={24} />, error: <FiAlertCircle size={24} />, }
Example #11
Source File: index.tsx From ecoleta with MIT License | 5 votes |
icons = { info: <FiInfo size={24} />, error: <FiAlertCircle size={24} />, success: <FiCheckCircle size={24} />, }
Example #12
Source File: index.tsx From gobarber-web with MIT License | 5 votes |
icons = { info: <FiInfo size={24} />, error: <FiAlertCircle size={24} />, success: <FiCheckCircle size={24} />, }
Example #13
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>
);
}
Example #14
Source File: StakeTokens.tsx From dxvote with GNU Affero General Public License v3.0 | 4 votes |
StakeTokens = () => {
const [stakeAmount, setStakeAmount] = useState<string>('');
const { account: userAddress } = useWeb3React();
const { guild_id: guildAddress } = useParams<{ guild_id?: string }>();
const { data: guildConfig } = useGuildConfig(guildAddress);
const { data: tokenInfo } = useERC20Info(guildConfig?.token);
const { data: tokenBalance } = useERC20Balance(
guildConfig?.token,
userAddress
);
const roundedBalance = useBigNumberToNumber(
tokenBalance,
tokenInfo?.decimals,
4
);
const { data: tokenAllowance } = useERC20Allowance(
guildConfig?.token,
userAddress,
guildConfig?.tokenVault
);
const { data: userVotingPower } = useVotingPowerOf({
contractAddress: guildAddress,
userAddress,
});
const stakeAmountParsed = useStringToBigNumber(
stakeAmount,
tokenInfo.decimals
);
const isStakeAmountValid = useMemo(
() =>
stakeAmountParsed?.gt(0) &&
tokenInfo?.decimals &&
stakeAmountParsed.lte(tokenBalance),
[stakeAmountParsed, tokenBalance, tokenInfo]
);
const { createTransaction } = useTransactions();
const guildContract = useERC20Guild(guildAddress);
const lockTokens = async () => {
if (!isStakeAmountValid) return;
createTransaction(
`Lock ${formatUnits(stakeAmountParsed, tokenInfo?.decimals)} ${
tokenInfo?.symbol
} tokens`,
async () => guildContract.lockTokens(stakeAmountParsed)
);
};
const tokenContract = useERC20(guildConfig?.token);
const approveTokenSpending = async () => {
if (!isStakeAmountValid) return;
createTransaction(`Approve ${tokenInfo?.symbol} token spending`, async () =>
tokenContract.approve(guildConfig?.tokenVault, stakeAmountParsed)
);
};
const votingPowerPercent = useVotingPowerPercent(
userVotingPower,
guildConfig?.totalLocked,
3
);
const nextVotingPowerPercent = useVotingPowerPercent(
stakeAmountParsed?.add(userVotingPower),
stakeAmountParsed?.add(guildConfig?.totalLocked),
3
);
const history = useHistory();
const location = useLocation();
const { isRepGuild } = useGuildImplementationType(guildAddress);
return (
<GuestContainer>
<DaoBrand>
<DaoIcon src={dxIcon} alt={'DXdao Logo'} />
<DaoTitle>
{guildConfig?.name || (
<Loading text loading skeletonProps={{ width: 100 }} />
)}
</DaoTitle>
</DaoBrand>
{!isRepGuild && (
<InfoItem>
{guildConfig?.lockTime ? (
`${moment
.duration(guildConfig.lockTime.toNumber(), 'seconds')
.humanize()} staking period`
) : (
<Loading loading text skeletonProps={{ width: 200 }} />
)}{' '}
</InfoItem>
)}
{!isRepGuild && (
<BalanceWidget>
<InfoRow>
<InfoLabel>Balance:</InfoLabel>
<InfoValue>
{tokenBalance && tokenInfo ? (
roundedBalance
) : (
<Loading loading text skeletonProps={{ width: 30 }} />
)}{' '}
{tokenInfo?.symbol || (
<Loading loading text skeletonProps={{ width: 10 }} />
)}
</InfoValue>
</InfoRow>
<InfoRow>
<StakeAmountInput
value={stakeAmount}
onUserInput={setStakeAmount}
/>
<Button
onClick={() =>
setStakeAmount(formatUnits(tokenBalance, tokenInfo?.decimals))
}
>
Max
</Button>
</InfoRow>
</BalanceWidget>
)}
{isRepGuild && (
<InfoRow>
<InfoLabel>Balance</InfoLabel>
<InfoValue>
{tokenBalance && tokenInfo ? (
roundedBalance
) : (
<Loading loading text skeletonProps={{ width: 30 }} />
)}{' '}
{tokenInfo?.symbol || (
<Loading loading text skeletonProps={{ width: 10 }} />
)}
</InfoValue>
</InfoRow>
)}
<InfoRow>
<InfoLabel>Your voting power</InfoLabel>
<InfoValue>
{isStakeAmountValid ? (
<>
<InfoOldValue>
{votingPowerPercent != null ? (
`${votingPowerPercent}%`
) : (
<Loading loading text skeletonProps={{ width: 40 }} />
)}{' '}
<FiArrowRight />
</InfoOldValue>{' '}
<strong>
{nextVotingPowerPercent != null ? (
`${nextVotingPowerPercent}%`
) : (
<Loading loading text skeletonProps={{ width: 40 }} />
)}
</strong>
</>
) : (
'-'
)}
</InfoValue>
</InfoRow>
{!isRepGuild && (
<InfoRow>
<InfoLabel>Unlock Date</InfoLabel>
<InfoValue>
{isStakeAmountValid ? (
<>
<strong>
{moment()
.add(guildConfig.lockTime.toNumber(), 'seconds')
.format('MMM Do, YYYY - h:mm a')}
</strong>{' '}
<FiInfo />
</>
) : (
'-'
)}
</InfoValue>
</InfoRow>
)}
{!isRepGuild ? (
stakeAmountParsed && tokenAllowance?.gte(stakeAmountParsed) ? (
<ActionButton disabled={!isStakeAmountValid} onClick={lockTokens}>
Lock{' '}
{tokenInfo?.symbol || (
<Loading loading text skeletonProps={{ width: 10 }} />
)}
</ActionButton>
) : (
<ActionButton
disabled={!isStakeAmountValid}
onClick={approveTokenSpending}
>
Approve{' '}
{tokenInfo?.symbol || (
<Loading loading text skeletonProps={{ width: 10 }} />
)}{' '}
Spending
</ActionButton>
)
) : (
<ActionButton
onClick={() => history.push(location.pathname + '/proposalType')}
>
Mint Rep
</ActionButton>
)}
</GuestContainer>
);
}
Example #15
Source File: Orphanage.tsx From happy with MIT License | 4 votes |
export default function Orphanage() {
const params = useParams<OrphanageParams>();
const [orphanage, setOrphanage] = useState<Orphanage>();
const [activeImageIndex, setActiveImageIndex] = useState(0);
useEffect(() => {
api.get(`orphanages/${params.id}`).then(response => {
setOrphanage(response.data);
});
}, [params.id]);
if (!orphanage) {
return <p>Carregando...</p>
}
return (
<div id="page-orphanage">
<Sidebar />
<main>
<div className="orphanage-details">
<img src={orphanage.images[activeImageIndex].url} alt={orphanage.name} />
<div className="images">
{orphanage.images.map((image, index) => (
<button
key={image.id}
className={activeImageIndex === index ? 'active' : ''}
type="button"
onClick={() => {
setActiveImageIndex(index);
}}
>
<img src={image.url} alt={orphanage.name} />
</button>
))}
</div>
<div className="orphanage-details-content">
<h1>{orphanage.name}</h1>
<p>{orphanage.about}</p>
<div className="map-container">
<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={mapIcon} 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>
</div>
<hr />
<h2>Instruções para visita</h2>
<p>{orphanage.instructions}</p>
<div className="open-details">
<div className="hour">
<FiClock size={32} color="#15B6D6" />
Segunda à Sexta <br />
{orphanage.opening_hours}
</div>
{ orphanage.open_on_weekends ? (
<div className="open-on-weekends">
<FiInfo size={32} color="#39CC83" />
Atendemos <br />
fim de semana
</div>
) : (
<div className="open-on-weekends dont-open">
<FiInfo size={32} color="#FF6690" />
Não 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 #16
Source File: Orphanage.tsx From happy with MIT License | 4 votes |
export default function Orphanage() {
const params = useParams<OrphanageParams>();
const [orphanage, setOrphaange] = useState<Orphanage>();
const [activeImageIndex, setActiveImageIndex] = useState(0);
useEffect(() => {
api.get(`/orphanages/${params.id}`).then(res => {
setOrphaange(res.data);
});
}, [params.id]);
if (!orphanage) {
return <p>Carregando...</p>
}
return (
<div id="page-orphanage">
<Sidebar />
<main>
<div className="orphanage-details">
<img src={orphanage.images[activeImageIndex].url} alt={orphanage.name} />
<div className="images">
{orphanage.images.map((image, index) => {
return (
<button
key={image.id}
className={activeImageIndex === index ? "active" : ""}
type="button"
onClick={() => {
setActiveImageIndex(index);
}}
>
<img src={image.url} alt={orphanage.name} />
</button>
)
})}
</div>
<div className="orphanage-details-content">
<h1>{orphanage.name}</h1>
<p>{orphanage.about}</p>
<div className="map-container">
<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={mapIcon} position={[orphanage.latitude, orphanage.longitude]} />
</Map>
<footer>
<a target="_blank" rel="noopener noreferrer" href={`https://google.com/maps/dir/?api=1&destination=${orphanage.latitude},${orphanage.longitude}`}>Ver rotas no Google Maps</a>
</footer>
</div>
<hr />
<h2>Instruções para visita</h2>
<p>{orphanage.instructions}</p>
<div className="open-details">
<div className="hour">
<FiClock size={32} color="#15B6D6" />
Segunda à Sexta <br />
{orphanage.opening_hours}
</div>
{orphanage.open_on_weekends ? (
<div className="open-on-weekends">
<FiInfo size={32} color="#39CC83" />
Atendemos <br />
fim de semana
</div>
) : (
<div className="open-on-weekends dont-open">
<FiInfo size={32} color="#FF6690" />
Não 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 #17
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 #18
Source File: CreateOrphanage.tsx From NLW-3.0 with MIT License | 4 votes |
export default function Orphanage() {
const params = useParams<OrphanageParams>();
const [orphanage, setOrphanage] = useState<Orphanage>();
const [activeImageIndex, setActiveImageIndex] = useState(0);
useEffect(() => {
api.get(`orphanages/${params.id}`).then(response => {
setOrphanage(response.data);
});
}, [params.id]);
if (!orphanage) {
return <p>Carregando...</p>
}
return (
<div id="page-orphanage">
<Sidebar />
<main>
<div className="orphanage-details">
<img src={orphanage.images[activeImageIndex].url} alt={orphanage.name} />
<div className="images">
{orphanage.images.map((image, index) => (
<button
key={image.id}
className={activeImageIndex === index ? 'active' : ''}
type="button"
onClick={() => {
setActiveImageIndex(index);
}}
>
<img src={image.url} alt={orphanage.name} />
</button>
))}
</div>
<div className="orphanage-details-content">
<h1>{orphanage.name}</h1>
<p>{orphanage.about}</p>
<div className="map-container">
<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={mapIcon} 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>
</div>
<hr />
<h2>Instruções para visita</h2>
<p>{orphanage.instructions}</p>
<div className="open-details">
<div className="hour">
<FiClock size={32} color="#15B6D6" />
Segunda à Sexta <br />
{orphanage.opening_hours}
</div>
{orphanage.open_on_weekends ? (
<div className="open-on-weekends">
<FiInfo size={32} color="#39CC83" />
Atendemos <br />
fim de semana
</div>
) : (
<div className="open-on-weekends dont-open">
<FiInfo size={32} color="#FF6690" />
Não Atendemos <br />
fim de semana
</div>
)}
</div>
</div>
</div>
</main>
</div>
);
}