@fortawesome/free-solid-svg-icons#faCheckCircle JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faCheckCircle.
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: AlertPanel.jsx From ashteki with GNU Affero General Public License v3.0 | 6 votes |
|
AlertPanel = ({ type = AlertType.Info, title, message, noIcon = false, children }) => {
let icon;
/**
* @type {AlertType}
*/
let alertType;
switch (type) {
case AlertType.Warning:
icon = faExclamationTriangle;
alertType = 'warning';
break;
case AlertType.Danger:
icon = faExclamationCircle;
alertType = 'danger';
break;
case AlertType.Info:
icon = faInfoCircle;
alertType = 'info';
break;
case AlertType.Success:
icon = faCheckCircle;
alertType = 'success';
break;
}
return (
<Alert variant={alertType}>
{title && <Alert.Heading>{title}</Alert.Heading>}
{!noIcon && <FontAwesomeIcon icon={icon} />}
{message && <span id='alert-message'> {getMessageWithLinks(message)}</span>}
{children && <span> {children}</span>}
</Alert>
);
}
Example #2
| Source File: index.jsx From defizap-frontend with GNU General Public License v2.0 | 6 votes |
|
Confirmed = props => (
<div className="container loading">
<div className="row">
<div className="col-md-12 text-center pt-4">
<FontAwesomeIcon size="2x" color="green" icon={faCheckCircle} />
{props.txId ? (
<>
<Row className="justify-content-center">
<a
href={`https://etherscan.io/tx/${props.txId}`}
rel="noopener noreferrer"
target="_blank"
>
View Transaction on Etherscan
</a>
</Row>
<Row className="justify-content-center">
<a
href="https://twitter.com/intent/tweet?text=I%20just%20got%20instant%20access%20to&hashtags=defi&via=DeFi_Zap"
target="_blank"
rel="noopener noreferrer"
>
Tweet it out{' '}
<FontAwesomeIcon size="lg" color="#1DA1F2" icon={faTwitter} />
</a>
</Row>
</>
) : null}
</div>
</div>
</div>
)
Example #3
| Source File: Skills.js From Personal-Portfolio with MIT License | 6 votes |
|
render() {
return(
<section className="resume-section p-3 p-lg-5 d-flex align-items-center" id="skills">
<div className="w-100">
<h2 className="mb-5">Skills</h2>
<div className="subheading mb-3">Programming Languages & Tools</div>
<div className="row">
{
this.skills.map((data, index) => (
<div key={index} className="col-6">
<p className="list-item">
<FontAwesomeIcon icon={faCheckCircle} color="green" />
<span className="ml-3">{data.name}</span>
</p>
</div>
))
}
</div>
</div>
</section>
);
}
Example #4
| Source File: Icon.js From mailmask with GNU Affero General Public License v3.0 | 6 votes |
|
ICONS = {
bars: faBars,
'check-circle': faCheckCircle,
'chevron-down': faChevronDown,
'chevron-right': faChevronRight,
'exchange-alt': faExchangeAlt,
exclamation: faExclamation,
'exclamation-triangle': faExclamationTriangle,
info: faInfo,
moon: faMoon,
question: faQuestion,
rss: faRss,
'sign-in-alt': faSignInAlt,
sun: faSun,
snowflake: faSnowflake,
star: faStar,
'times-circle': faTimesCircle,
user: faUser,
}
Example #5
| Source File: Alert.jsx From frontend-app-support-tools with GNU Affero General Public License v3.0 | 6 votes |
|
function getAlertIcon(type) {
if (type === 'error') {
return faExclamationTriangle;
}
if (type === 'danger') {
return faMinusCircle;
}
if (type === 'success') {
return faCheckCircle;
}
return faInfoCircle;
}
Example #6
| Source File: ServerStatus.jsx From ashteki with GNU Affero General Public License v3.0 | 5 votes |
|
ServerStatus = (props) => {
const { connecting, connected, responseTime, serverType } = props;
const { t } = useTranslation();
let className = '';
let toolTip = `${serverType} is`;
let pingText;
let icon = faCheckCircle;
let splash = null;
if (connected) {
className += ' text-success';
toolTip += ' connected';
let pingClass;
if (responseTime === undefined) {
pingText = <span>{t('Waiting for ping')}</span>;
} else {
if (responseTime < 150) {
pingClass = 'text-success';
} else if (responseTime < 300) {
pingClass = 'text-warning';
} else {
pingClass = 'text-danger';
}
pingText = (
<React.Fragment>
<span>{serverType}: </span>
<span className={pingClass}>{responseTime}ms</span>
</React.Fragment>
);
}
} else if (connecting) {
className += ' text-warning';
icon = faTimesCircle;
toolTip += ' connecting';
pingText = (
<React.Fragment>
<span>{serverType}: </span>
<span className='text-warning'>{t('Connecting')}</span>
</React.Fragment>
);
} else {
className += ' text-danger';
icon = faBan;
toolTip += ' disconnected';
pingText = (
<React.Fragment>
<span>{serverType}: </span>
<span className='text-danger'>{t('Disconnected')}</span>
</React.Fragment>
);
splash = <div className='disconnect-splash panel'><span className='text-danger'>Disconnected!</span></div>
}
return (
<li className='server-status'>
{pingText}
<span className={className}>
<FontAwesomeIcon icon={icon} title={t(toolTip)} />
</span>
{splash}
</li>
);
}
Example #7
| Source File: icon.js From uptime-kuma with MIT License | 5 votes |
|
library.add(
faArrowAltCircleUp,
faCog,
faEdit,
faEye,
faEyeSlash,
faList,
faPause,
faPlay,
faPlus,
faSearch,
faTachometerAlt,
faTimes,
faTimesCircle,
faTrash,
faCheckCircle,
faStream,
faSave,
faExclamationCircle,
faBullhorn,
faArrowsAltV,
faUnlink,
faQuestionCircle,
faImages,
faUpload,
faCopy,
faCheck,
faFile,
faAward,
faLink,
faChevronDown,
faSignOutAlt,
faPen,
faExternalLinkSquareAlt,
faSpinner,
faUndo,
faPlusCircle,
faAngleDown,
faLink,
);
Example #8
| Source File: fontawesome.js From xmrig-workers with GNU General Public License v3.0 | 5 votes |
|
export default function () {
library.add(faGithub, faWindows, faLinux, faTwitter, faReddit, faTelegram, faCheckCircle, faMicrochip, faTrashAlt,
faPaperPlane, faSpinner, faFlask, faInfoCircle, faPen, faTools, faCheck, faPlus, faCog, faExclamationTriangle,
faQuestionCircle, faSyncAlt, faInfinity, faDownload, faCopy, faPlug, faTimesCircle);
}
Example #9
| Source File: ProductDetails.js From clayma-store with MIT License | 4 votes |
|
export default function ProductDetails(props) {
// const {action} =props;
// let product_display_mode="action_view";
//TODO
// switch(action){
// case "edit":
// product_display_mode="action_edit";
// break;
// default:
// product_display_mode="action_view";
// }
const { addToast } = useToasts();
const [prod_quantity,setProd_quantity]=useState(1)
const [prod_selected_size,setProd_prod_selected_size]=useState("")
let ProductDetails;
let productDescription = [];
let productSize = [];
props.product.map((product) => (ProductDetails = product));
productDescription = ProductDetails.product_details;
productSize = ProductDetails.size;
const productStockLevel = ProductDetails.product_stock;
let bannerStockLevel = "";
let stockLevelMessage = "";
if (productStockLevel > 0 && productStockLevel < 100) {
bannerStockLevel = "product-details-banner-stock-level-low";
stockLevelMessage = `Low stock, only ${productStockLevel} left.`;
} else if (productStockLevel === 0) {
bannerStockLevel = "product-details-banner-stock-level-out-of-stock";
stockLevelMessage = `Out of stock`;
}
const {addItemTocart}= useContext(GlobalCartContext)
function handleAddToCart(data) {
//alert(data.productname+" Added to cart");
const newCartItem={
productname: data.productname,
id: data.id,
price: data.price,
discount: data.discount,
color: data.color,
size: data.size,
selectedSize: prod_selected_size,
product_status: data.product_status,
product_stock: data.product_stock,
product_selected_qty:prod_quantity,
product_image: data.product_image,
brand: data.brand,
product_details: data.product_details,
}
addItemTocart(newCartItem);
addToast(data.productname+" has been saved for later shopping", { appearance: 'success', autoDismiss: true, })
}
function handleChange(event) {
setProd_quantity(event.target.value)
//console.log(event.target.value)
}
function handleChangeSize(event) {
setProd_prod_selected_size(event.target.value)
//console.log(event.target.value)
}
const description = productDescription.map((desc) => (
<h5 key={desc}>
<FontAwesomeIcon
icon={faCheckCircle}
className="product-description-icons"
></FontAwesomeIcon>
{desc}
</h5>
));
const product_size = productSize.map((size) => (
<option value={size} key={size}> {size}</option>
));
return (
<div className="container-product-details">
<div className="row">
<div className="col-lg-7">
<img
className="card-img-top"
src={require("../assets/products/allproducts/" +
ProductDetails.product_image)}
alt={ProductDetails.product_image}
/>
<div
className={`${
ProductDetails.product_status === "New"
? "product-details-banner-new"
: "product-banner-trending"
}`}
>
{ProductDetails.product_status}
</div>
<div className={bannerStockLevel}>{stockLevelMessage}</div>
</div>
<div className="col-lg-5">
<h1>{ProductDetails.productname}</h1>
{ProductDetails.discount > 0 ? (
<h2>
<span className="product-price-after-discount">
{
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(
ProductDetails.price -
(ProductDetails.price * ProductDetails.discount / 100)
)
// Math.round(ProductDetails.price - (ProductDetails.price*ProductDetails.discount/100))
}
</span>{" "}
<span className="product-price-before-discount">
{new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(ProductDetails.price)}
</span>{" "}
<span className="product-discount-rate">
-{ProductDetails.discount}%{" "}
</span>
</h2>
) : (
<h2>
{" "}
<span className="product-price-whit-no-discount">
{new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(ProductDetails.price)}
</span>
</h2>
)}
{/* <h2> R{ProductDetails.price} <span> R{ProductDetails.price}</span> <span> 50</span></h2> */}
<h3>Brand: {ProductDetails.brand}</h3>
<h3>Color: {ProductDetails.color}</h3>
<h3>Size:</h3>
<select
className="form-control product-size-option"
name="size-product"
id="size-product"
value={prod_selected_size} onChange={handleChangeSize}
>
{product_size}
</select>
{/* <div className="mb-4 mt-4">{product_size}</div> */}
<h3>QTY:</h3>
<select
className="form-control product-size-option"
value={prod_quantity} onChange={handleChange}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<h3>Product Details:</h3>
<div className="mb-4 mt-4">{description}</div>
<div className="row product-details-services">
<div className="col-lg-4">
<FontAwesomeIcon
icon={faPlaneDeparture}
className="product-details-services-icons"
/>
<h4>SHIPS WITHIN HOURS</h4>
</div>
<div className="col-lg-4">
<FontAwesomeIcon
icon={faRedoAlt}
className="product-details-services-icons"
/>
<h4>EASY RETRUNS</h4>
</div>
<div className="col-lg-4">
<FontAwesomeIcon
icon={faCommentDots}
className="product-details-services-icons"
/>
<h4>24/7 CUSTOMER SERVICE</h4>
</div>
</div>
{/* {
product_display_mode ==="action_edit"
?
<h2> Editing product </h2>
:
<h2> Viewing product </h2>
}
*/}
{productStockLevel === 0 ? (
<h2 className="out-of-stock-notice">
<FontAwesomeIcon icon={faChartBar} /> Out of Stock
</h2>
) : (
<button className="product-btn-add-to-cart shadow-none "
onClick={ () => handleAddToCart(ProductDetails)}
>
<FontAwesomeIcon
icon={faCartPlus}
className="product-btn-add-to-cart-icon"
/>
Add to Cart
</button>
)}
</div>
</div>
</div>
);
}
Example #10
| Source File: UpdateCartItem.js From clayma-store with MIT License | 4 votes |
|
export default function UpdateCartItem(props) {
const { addToast } = useToasts();
const [prod_quantity,setProd_quantity]=useState(1)
const [prod_selected_size,setProd_prod_selected_size]=useState("")
let ProductDetails;
let productDescription = [];
let productSize = [];
props.product.map((product) => (ProductDetails = product));
productDescription = ProductDetails.product_details;
productSize = ProductDetails.size;
const productStockLevel = ProductDetails.product_stock;
let bannerStockLevel = "";
let stockLevelMessage = "";
if (productStockLevel > 0 && productStockLevel < 100) {
bannerStockLevel = "product-details-banner-stock-level-low";
stockLevelMessage = `Low stock, only ${productStockLevel} left.`;
} else if (productStockLevel === 0) {
bannerStockLevel = "product-details-banner-stock-level-out-of-stock";
stockLevelMessage = `Out of stock`;
}
const {addItemTocart}= useContext(GlobalCartContext)
function handleAddToCart(data) {
//alert(data.productname+" Added to cart");
const newCartItem={
productname: data.productname,
id: data.id,
price: data.price,
discount: data.discount,
color: data.color,
size: data.size,
selectedSize: prod_selected_size,
product_status: data.product_status,
product_stock: data.product_stock,
product_selected_qty:prod_quantity,
product_image: data.product_image,
brand: data.brand,
product_details: data.product_details,
}
addItemTocart(newCartItem);
addToast(data.productname+" has been saved for later shopping", { appearance: 'success', autoDismiss: true, })
}
function handleChange(event) {
setProd_quantity(event.target.value)
//console.log(event.target.value)
}
function handleChangeSize(event) {
setProd_prod_selected_size(event.target.value)
//console.log(event.target.value)
}
const description = productDescription.map((desc) => (
<h5 key={desc}>
<FontAwesomeIcon
icon={faCheckCircle}
className="product-description-icons"
></FontAwesomeIcon>
{desc}
</h5>
));
const product_size = productSize.map((size) => (
<option value={size} key={size}> {size}</option>
));
return (
<div className="container-product-details">
<div className="row">
<div className="col-lg-7">
<img
className="card-img-top"
src={require("../assets/products/allproducts/" +
ProductDetails.product_image)}
alt={ProductDetails.product_image}
/>
<div
className={`${
ProductDetails.product_status === "New"
? "product-details-banner-new"
: "product-banner-trending"
}`}
>
{ProductDetails.product_status}
</div>
<div className={bannerStockLevel}>{stockLevelMessage}</div>
</div>
<div className="col-lg-5">
<h1>{ProductDetails.productname}</h1>
{ProductDetails.discount > 0 ? (
<h2>
<span className="product-price-after-discount">
{
new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(
ProductDetails.price -
(ProductDetails.price * ProductDetails.discount / 100)
)
// Math.round(ProductDetails.price - (ProductDetails.price*ProductDetails.discount/100))
}
</span>{" "}
<span className="product-price-before-discount">
{new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(ProductDetails.price)}
</span>{" "}
<span className="product-discount-rate">
-{ProductDetails.discount}%{" "}
</span>
</h2>
) : (
<h2>
{" "}
<span className="product-price-whit-no-discount">
{new Intl.NumberFormat("en-US", {
style: "currency",
currency: "ZAR",
}).format(ProductDetails.price)}
</span>
</h2>
)}
{/* <h2> R{ProductDetails.price} <span> R{ProductDetails.price}</span> <span> 50</span></h2> */}
<h3>Brand: {ProductDetails.brand}</h3>
<h3>Color: {ProductDetails.color}</h3>
<h3>Size:</h3>
<select
className="form-control product-size-option"
name="size-product"
id="size-product"
value={prod_selected_size} onChange={handleChangeSize}
>
{product_size}
</select>
{/* <div className="mb-4 mt-4">{product_size}</div> */}
<h3>QTY:</h3>
<select
className="form-control product-size-option"
value={prod_quantity} onChange={handleChange}>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<h3>Product Details:</h3>
<div className="mb-4 mt-4">{description}</div>
<div className="row product-details-services">
<div className="col-lg-4">
<FontAwesomeIcon
icon={faPlaneDeparture}
className="product-details-services-icons"
/>
<h4>SHIPS WITHIN HOURS</h4>
</div>
<div className="col-lg-4">
<FontAwesomeIcon
icon={faRedoAlt}
className="product-details-services-icons"
/>
<h4>EASY RETRUNS</h4>
</div>
<div className="col-lg-4">
<FontAwesomeIcon
icon={faCommentDots}
className="product-details-services-icons"
/>
<h4>24/7 CUSTOMER SERVICE</h4>
</div>
</div>
{productStockLevel === 0 ? (
<h2 className="out-of-stock-notice">
<FontAwesomeIcon icon={faChartBar} /> Out of Stock
</h2>
) : (
<button className="product-btn-add-to-cart shadow-none "
onClick={ () => handleAddToCart(ProductDetails)}
>
<FontAwesomeIcon
icon={faCartPlus}
className="product-btn-add-to-cart-icon"
/>
Update Cart
</button>
)}
</div>
</div>
</div>
);
}
Example #11
| Source File: Pods.jsx From ThermaKube with MIT License | 4 votes |
|
Pods = ({ data }) => {
// console.log('pods data', data);
// console.log('props', props);
// using hooks to set state
const [table, setTable] = useState([]); //pod data in table
let children = [];
data[0].children.map(child => children.push(...child.children));
// console.log('children', children);
useEffect(() => {
const podList = children.map((p, i) => {
// check status - if "Running" then render green check circle
if (p.status === 'Running') {
return (
<tbody key={`tbody${i}`}>
<tr>
<td>{p.name}</td>
<td>{p.namespace}</td>
<td>
<FontAwesomeIcon icon={faCheckCircle} color='#00df00' />
{p.status}
</td>
<td>{p.podIP}</td>
<td>{p.createdAt}</td>
</tr>
</tbody>
);
} else {
// if not "Running", invoke the addAlert func to add to database and render red circle
addAlert(p);
return (
<tbody key={`tbody${i}`}>
<tr>
<td>{p.name}</td>
<td>{p.namespace}</td>
<td>
<FontAwesomeIcon icon={faMinusCircle} color='orange' />
{p.status}
</td>
<td>{p.podIP}</td>
<td>{p.createdAt}</td>
</tr>
</tbody>
);
}
});
setTable(podList);
// use Effect will trigger every time data is changed
}, data);
// function that adds a new Alert - gets called in ^useEffect when pod status is not "Running"
const addAlert = async p => {
const token = Cookies.get('token');
const header = {
headers: {
Authorization: 'Bearer' + token,
},
};
// console.log('header', header);
const postAlert = await axios.post(
'/api/alerts',
{
name: p.name,
namespace: p.namespace,
status: p.status,
podIP: p.podIP,
time: Date(Date.now()).toString(),
},
header
);
};
return (
<div className='podContainer'>
<h4 className='podsTitle'>Pods List</h4>
<Table striped bordered hover>
<thead>
<tr>
<th>Pod Name</th>
<th>Namespace</th>
<th>Status</th>
<th>Pod IP</th>
<th>Created At</th>
</tr>
</thead>
{table}
</Table>
</div>
);
}
