react-icons/fi#FiAlertTriangle JavaScript Examples
The following examples show how to use
react-icons/fi#FiAlertTriangle.
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: StatusBar.js From sailplane-web with GNU General Public License v3.0 | 5 votes |
|
export function StatusBar() {
const status = useSelector((state) => state.tempData.status);
const {message, isError, isInfo} = status;
const styles = {
container: {
position: 'fixed',
bottom: 10,
backgroundColor: isError ? errorColor : primary3,
padding: 8,
borderRadius: 4,
fontFamily: 'Open Sans',
color: '#FFF',
fontSize: 14,
lineHeight: 14,
display: 'flex',
alignItems: 'center',
height: 18,
opacity: message ? 1 : 0,
},
icon: {
marginRight: 4,
},
};
let iconComponent = FiLoader;
if (isError) {
iconComponent = FiAlertTriangle;
}
const IconComponent = iconComponent;
return (
<div style={styles.container}>
{!isInfo ? (
<IconComponent
color={'#FFF'}
size={16}
style={styles.icon}
className={!isError ? 'rotating' : ''}
/>
) : null}
<span style={styles.message}>{message}</span>
</div>
);
}
Example #2
| Source File: index.js From dashboard-reactjs with MIT License | 4 votes |
|
export default function ButtonsPage() {
useEffect(() => {
document.title = 'Buttons'
}, []);
return (
<>
<div className="col-12 title">
<h1>Tables</h1>
</div>
<div className="col-6 px-0">
<Card className="red">
<div className="card-title">
<h3>State Buttons</h3>
</div>
<div className="card-body">
<Buttons className="wrap">
<Button className="danger">Danger</Button>
<Button className="warning">Warning</Button>
<Button className="info">Info</Button>
<Button className="success">Success</Button>
<Button className="primary">Primary</Button>
<Button className="light">Light</Button>
<Button className="dark">Dark</Button>
</Buttons>
</div>
</Card>
</div>
<div className="col-6 px-0">
<Card className="red">
<div className="card-title">
<h3>Circle Buttons</h3>
</div>
<div className="card-body">
<Buttons className="wrap">
<Button className="danger btn-circle">Danger</Button>
<Button className="warning btn-circle">Warning</Button>
<Button className="info btn-circle">Info</Button>
<Button className="success btn-circle">Success</Button>
<Button className="primary btn-circle">Primary</Button>
<Button className="light btn-circle">Light</Button>
<Button className="dark btn-circle">Dark</Button>
</Buttons>
</div>
</Card>
</div>
<div className="col-6 px-0">
<Card className="red">
<div className="card-title">
<h3>Shadow Buttons</h3>
</div>
<div className="card-body">
<Buttons className="wrap">
<Button className="danger btn-shadow">Danger</Button>
<Button className="warning btn-shadow">Warning</Button>
<Button className="info btn-shadow">Info</Button>
<Button className="success btn-shadow">Success</Button>
<Button className="primary btn-shadow">Primary</Button>
<Button className="light btn-shadow">Light</Button>
<Button className="dark btn-shadow">Dark</Button>
</Buttons>
</div>
</Card>
</div>
<div className="col-6 px-0">
<Card className="red">
<div className="card-title">
<h3>Button with Icon</h3>
</div>
<div className="card-body">
<Buttons className="wrap">
<Button className="danger btn-shadow"><FiX /> Danger</Button>
<Button className="warning btn-shadow"><FiAlertTriangle /> Warning</Button>
<Button className="info btn-shadow"><FiInfo />Info</Button>
<Button className="success btn-shadow"><FiCheckCircle /> Success</Button>
<Button className="primary btn-shadow"><FiCoffee /> Primary</Button>
</Buttons>
</div>
</Card>
</div>
<div className="col-6 px-0">
<Card className="red">
<div className="card-title">
<h3>Size Buttons</h3>
</div>
<div className="card-body">
<Buttons>
<Button className="danger btn-sm">Danger SM</Button>
<Button className="warning btn-sm">Warning SM</Button>
<Button className="success btn-sm">Success SM</Button>
</Buttons>
<Buttons>
<Button className="danger">Danger</Button>
<Button className="warning">Warning</Button>
<Button className="success">Success</Button>
</Buttons>
<Buttons>
<Button className="danger btn-lg">Danger LG</Button>
<Button className="warning btn-lg">Warning LG</Button>
<Button className="success btn-lg">Success LG</Button>
</Buttons>
</div>
</Card>
</div>
</>
);
}
Example #3
| Source File: shopping-cart.js From plataforma-sabia with MIT License | 4 votes |
|
ShoppingCart = () => {
const { t } = useTranslation(['common', 'pages']);
const form = useForm({ comment: '' });
const {
items,
totalPrice,
updateItem,
removeItem,
resetCart,
checkForItemsUpdates,
} = useShoppingCart();
const { openModal } = useModal();
const { user } = useAuth();
const router = useRouter();
const [isSubmitting, setIsSubmitting] = useState(false);
const [cartItemsUpdates, setCartItemsUpdates] = useState([]);
const handleSubmit = async (values) => {
if (!user.id) {
router.push(`${internalPages.signIn}?redirect=${internalPages.shoppingCart}`);
return;
}
if (!user.operations.can_create_service_order) {
openModal('needToCompleteTheRegistration', null, {
overlayClick: false,
});
return;
}
setIsSubmitting(true);
const itemsUpdates = await checkForItemsUpdates();
if (itemsUpdates.length) {
setIsSubmitting(false);
setCartItemsUpdates(itemsUpdates);
toast.info(
'Houve alterações nos itens do seu carrinho. Por favor verifique o card informativo e refaça a operação caso esteja de acordo.',
);
return;
}
const result = await createServiceOrder(
items.map((item) => ({ service_id: item.id, quantity: item.quantity })),
values.comment,
);
if (!result) {
toast.error('Ocorreu um erro ao finalizar seu pedido. Tente novamente em instantes.');
return;
}
toast.success('Pedido enviado com sucesso!');
resetCart();
setIsSubmitting(false);
};
if (!items.length) {
return (
<Wrapper>
<EmptyScreen
message={
<p>
Oops! Parece que seu carrinho está vazio. <br />
Que tal dar uma olhada em algumas soluções?
</p>
}
showHomeButton
/>
</Wrapper>
);
}
return (
<>
<Head title={t('pages:shoppingCart.title')} noIndex />
<Wrapper onSubmit={form.handleSubmit(handleSubmit)}>
<Container>
<CartItems>
<SectionTitle align="left" color="black" noMargin noPadding>
Meu carrinho
</SectionTitle>
<CartItemsWrapper>
{!!cartItemsUpdates.length && (
<ChangesWrapper>
<ChangesHeader>
<FiAlertTriangle fontSize={24} />
<p>Mensagem importante sobre o seu carrinho</p>
</ChangesHeader>
<ChangesBody>
<p>
Houve {cartItemsUpdates.length}{' '}
{cartItemsUpdates.length > 1
? 'alterações'
: 'alteração'}{' '}
nos itens do seu carrinho:
</p>
<ChangesList>
{cartItemsUpdates.map((item) => {
if (item.type === 'deleted') {
return (
<li
key={`${item.id}-${item.from}-${item.to}`}
>
<span>{item.name} </span>
<span>
foi excluído pois não está mais
disponível
</span>
</li>
);
}
return (
<li key={`${item.id}-${item.from}-${item.to}`}>
<span>{item.name} </span>
<span>
{getItemChangeLabel(item.type)}{' '}
</span>
<span>
de{' '}
<strong>
{getItemChangeContent(
item.type,
item.from,
)}{' '}
</strong>
</span>
<span>
para{' '}
<strong>
{getItemChangeContent(
item.type,
item.to,
)}{' '}
</strong>
</span>
</li>
);
})}
</ChangesList>
</ChangesBody>
</ChangesWrapper>
)}
{items.map((item) => (
<CartItem
{...item}
key={`${item.id}-${item.type}`}
form={form}
onRemoveFromCart={() =>
removeItem({ id: item.id, type: item.type })
}
onUpdateItem={(newValues) =>
updateItem({ ...item, ...newValues })
}
/>
))}
</CartItemsWrapper>
</CartItems>
<Checkout>
<SectionTitle align="left" color="black" noMargin noPadding>
Resumo do pedido
</SectionTitle>
<CheckoutInfos>
<Total>
<span>Total</span> <span>{formatMoney(totalPrice)}</span>
</Total>
<TextField
form={form}
name="comment"
variant="gray"
label="Observações"
placeholder="Digite suas observações"
resize="none"
/>
<RectangularButton
variant="filled"
colorVariant="orange"
type="submit"
disabled={isSubmitting}
fullWidth
>
Finalizar pedido
</RectangularButton>
<Link href={`${internalPages.search}?solution=services`} passHref>
<RectangularButton
variant="outlined"
colorVariant="blue"
as="a"
disabled={isSubmitting}
fullWidth
>
Escolher mais serviços
</RectangularButton>
</Link>
</CheckoutInfos>
</Checkout>
</Container>
</Wrapper>
</>
);
}
