react-icons/fa#FaStar TypeScript Examples
The following examples show how to use
react-icons/fa#FaStar.
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: StarBadge.tsx From hub with Apache License 2.0 | 6 votes |
|
StarBadge = (props: Props) => {
if (isUndefined(props.starsNumber) || !isNumber(props.starsNumber)) return null;
return (
<div
data-testid="starBadge"
className={classnames('badge rounded-pill bg-light text-dark border', styles.badge, props.className, {
[styles[`size-${props.size}`]]: !isUndefined(props.size),
})}
aria-label={`${props.starsNumber} stars`}
>
<div className="d-flex align-items-center">
<FaStar className={`me-1 ${styles.icon}`} />
<div>{prettifyNumber(props.starsNumber)}</div>
</div>
</div>
);
}
Example #2
| Source File: MobileSettings.tsx From hub with Apache License 2.0 | 4 votes |
|
MobileSettings = (props: Props) => {
const { ctx } = useContext(AppCtx);
const [openSideBarStatus, setOpenSideBarStatus] = useState(false);
const getSidebarIcon = (): JSX.Element => {
if (ctx.user) {
if (ctx.user.profileImageId) {
return (
<Image
imageId={ctx.user.profileImageId}
alt="User profile"
className={`rounded-circle mw-100 mh-100 h-auto border border-2 ${styles.profileImage}`}
placeholderIcon={<FaUserCircle />}
/>
);
} else {
return <FaUserCircle />;
}
} else {
return <GoThreeBars />;
}
};
return (
<div className={`btn-group navbar-toggler pe-0 ms-auto border-0 fs-6 bg-transparent ${styles.navbarToggler}`}>
{isUndefined(ctx.user) ? (
<div className="spinner-grow spinner-grow-sm textLight pt-2" role="status">
<span className="visually-hidden">Loading...</span>
</div>
) : (
<Sidebar
label="User settings"
className="d-inline-block d-lg-none"
buttonType="position-relative btn text-secondary pe-0 ps-3"
buttonIcon={
<div
className={classnames(
'rounded-circle d-flex align-items-center justify-content-center lh-1 fs-3 bg-white',
styles.iconWrapper
)}
>
{getSidebarIcon()}
</div>
}
direction="right"
header={
<>
{!isNull(ctx.user) && (
<div className="h6 mb-0 text-dark flex-grow-1">
Signed in as <span className="fw-bold">{ctx.user.alias}</span>
</div>
)}
</>
}
open={openSideBarStatus}
onOpenStatusChange={(status: boolean) => setOpenSideBarStatus(status)}
>
<>
{!isUndefined(ctx.user) && (
<>
{!isNull(ctx.user) ? (
<>
<ThemeMode device="mobile" onSelection={() => setOpenSideBarStatus(false)} />
<div className="dropdown-divider my-3" />
<Link
className="dropdown-item my-2"
onClick={() => {
setOpenSideBarStatus(false);
}}
to={{
pathname: '/stats',
}}
>
<div className="d-flex align-items-center">
<HiChartSquareBar className="me-2" />
<div>Stats</div>
</div>
</Link>
<Link
className="dropdown-item my-2"
to={{
pathname: '/packages/starred',
}}
onClick={() => setOpenSideBarStatus(false)}
>
<div className="d-flex align-items-center">
<FaStar className="me-2" />
<div>Starred packages</div>
</div>
</Link>
<Link
className="dropdown-item my-2"
to={{
pathname: '/control-panel',
}}
onClick={() => setOpenSideBarStatus(false)}
>
<div className="d-flex align-items-center">
<FaCog className="me-2" />
<div>Control Panel</div>
</div>
</Link>
<LogOut
className="my-2"
onSuccess={() => setOpenSideBarStatus(false)}
privateRoute={props.privateRoute}
/>
</>
) : (
<>
<ThemeMode device="mobile" onSelection={() => setOpenSideBarStatus(false)} />
<div className="dropdown-divider my-3" />
<Link
className="dropdown-item my-2"
onClick={() => {
setOpenSideBarStatus(false);
}}
to={{
pathname: '/stats',
}}
>
<div className="d-flex align-items-center">
<HiChartSquareBar className="me-2" />
<div>Stats</div>
</div>
</Link>
<button
className="dropdown-item my-2"
onClick={() => {
setOpenSideBarStatus(false);
props.setOpenLogIn(true);
}}
aria-label="Open sign in modal"
>
<div className="d-flex align-items-center">
<FaSignInAlt className="me-2" />
<div>Sign in</div>
</div>
</button>
<button
className="dropdown-item my-2"
onClick={() => {
setOpenSideBarStatus(false);
props.setOpenSignUp(true);
}}
aria-label="Open sign up modal"
>
<div className="d-flex align-items-center">
<FaEdit className="me-2" />
<div>Sign up</div>
</div>
</button>
</>
)}
</>
)}
</>
</Sidebar>
)}
</div>
);
}
Example #3
| Source File: UserAuthDropdown.tsx From hub with Apache License 2.0 | 4 votes |
|
UserAuthDropdown = (props: Props) => {
const { ctx } = useContext(AppCtx);
const [openStatus, setOpenStatus] = useState(false);
const ref = useRef(null);
useOutsideClick([ref], openStatus, () => setOpenStatus(false));
return (
<div className="btn-group">
<button
className={`btn p-0 position-relative ${styles.btn}`}
type="button"
onClick={() => setOpenStatus(true)}
aria-label="Open menu"
>
<div className="d-flex flex-row align-items-center justify-content-center">
<div
className={classnames(
'rounded-circle d-flex align-items-center justify-content-center textLight userAuth overflow-hidden position-relative border border-2 overflow-hidden lh-1 fs-5 bg-white',
styles.imageWrapper,
{ [styles.iconWrapper]: isUndefined(ctx.user!.profileImageId) || isNull(ctx.user!.profileImageId) }
)}
>
{ctx.user && ctx.user.profileImageId ? (
<Image
imageId={ctx.user.profileImageId}
alt="User profile"
className="mw-100 h-auto"
classNameForSquare={`position-absolute top-0 start-0 w-100 h-100 ${styles.imageAsBg}`}
/>
) : (
<FaUser data-testid="profileIcon" className="rounded-circle" />
)}
</div>
<small className="ms-1 textLight">
<FaCaretDown />
</small>
</div>
</button>
<div ref={ref} className={classnames('dropdown-menu dropdown-menu-end', styles.dropdown, { show: openStatus })}>
<div className={`dropdown-arrow ${styles.arrow}`} />
<p className={`mt-2 mb-0 text-break ${styles.signedInText}`}>
Signed in as <span className="fw-bold">{ctx.user!.alias}</span>
</p>
<div className="dropdown-divider my-3" />
<ThemeMode device="desktop" onSelection={() => setOpenStatus(false)} />
<div className="dropdown-divider my-3" />
<Link
className="dropdown-item"
to={{
pathname: '/packages/starred',
}}
onClick={() => setOpenStatus(false)}
>
<div className="d-flex align-items-center">
<FaStar className="me-2" />
<div>Starred packages</div>
</div>
</Link>
<Link
className="dropdown-item"
to={{
pathname: '/control-panel',
}}
onClick={() => setOpenStatus(false)}
>
<div className="d-flex align-items-center">
<FaCog className="me-2" />
<div>Control Panel</div>
</div>
</Link>
<LogOut className="mb-2" onSuccess={() => setOpenStatus(false)} privateRoute={props.privateRoute} />
</div>
</div>
);
}
Example #4
| Source File: StarButton.tsx From hub with Apache License 2.0 | 4 votes |
|
StarButton = (props: Props) => {
const { ctx, dispatch } = useContext(AppCtx);
const history = useHistory();
const [packageStars, setPackageStars] = useState<PackageStars | undefined | null>(undefined);
const [isSending, setIsSending] = useState(false);
const [isGettingIfStarred, setIsGettingIfStarred] = useState<boolean | undefined>(undefined);
const [pkgId, setPkgId] = useState<string>(props.packageId);
const point = useBreakpointDetect();
const notLoginUser = isUndefined(ctx.user) || isNull(ctx.user);
const [enabledTooltip, setEnabledTooltip] = useState<boolean>(false);
async function getPackageStars() {
try {
setIsGettingIfStarred(true);
setPackageStars(await API.getStars(props.packageId));
setIsGettingIfStarred(false);
} catch {
setPackageStars(null);
setIsGettingIfStarred(false);
}
}
useEffect(() => {
if (
(!isUndefined(ctx.user) &&
(isUndefined(packageStars) ||
(!isNull(ctx.user) && isUndefined(packageStars!.starredByUser)) ||
(isNull(ctx.user) && packageStars!.starredByUser))) ||
props.packageId !== pkgId
) {
setPkgId(props.packageId);
getPackageStars();
}
}, [ctx.user, props.packageId]); /* eslint-disable-line react-hooks/exhaustive-deps */
const notStarred =
!isUndefined(ctx.user) &&
(isNull(ctx.user) ||
(!isNull(ctx.user) &&
!isUndefined(packageStars) &&
!isNull(packageStars) &&
!isUndefined(packageStars.starredByUser) &&
!packageStars.starredByUser));
async function handleToggleStar() {
try {
setIsSending(true);
await API.toggleStar(props.packageId);
getPackageStars();
setIsSending(false);
} catch (err: any) {
setIsSending(false);
// On unauthorized, we force sign out
if (err.kind === ErrorKind.Unauthorized) {
dispatch(signOut());
history.push(`${window.location.pathname}?modal=login&redirect=${window.location.pathname}`);
} else {
let errMessage = `An error occurred ${
notStarred ? 'starring' : 'unstarring'
} the package, please try again later.`;
alertDispatcher.postAlert({
type: 'danger',
message: errMessage,
});
}
}
}
useEffect(() => {
let timeout: NodeJS.Timeout;
if (enabledTooltip) {
// Hide tooltip after 2s
timeout = setTimeout(() => setEnabledTooltip(false), 2 * 1000);
}
return () => {
if (!isUndefined(timeout)) {
clearTimeout(timeout);
}
};
}, [enabledTooltip]);
if (isUndefined(ctx.user) || isUndefined(packageStars) || isNull(packageStars)) return null;
return (
<>
<div className={`ms-auto d-flex flex-row align-items-center position-relative ${styles.wrapper}`}>
<ElementWithTooltip
active
className={styles.starBtnWrapper}
element={
<button
className={classnames('btn btn-sm btn-primary px-1 px-md-3 position-relative starBtn', styles.starBtn, {
[`disabled ${styles.disabled}`]: notLoginUser || isGettingIfStarred,
})}
type="button"
onClick={() => {
if (!isGettingIfStarred) {
if (notLoginUser) {
if ([point && 'xs', 'sm'].includes(point)) {
setEnabledTooltip(true);
}
} else {
handleToggleStar();
}
}
}}
aria-label={`${notStarred ? 'Star' : 'Unstar'} package`}
>
<div className="d-flex align-items-center">
{notStarred ? <FaRegStar className={styles.icon} /> : <FaStar className={styles.icon} />}
<span className="ms-2">{notStarred ? 'Star' : 'Unstar'}</span>
</div>
</button>
}
tooltipMessage="You must be signed in to star a package"
visibleTooltip={isNull(ctx.user)}
/>
<span className={`badge bg-light text-dark text-center px-3 border border-start-0 lh-base ${styles.starBadge}`}>
{isNumber(packageStars.stars) ? prettifyNumber(packageStars.stars) : '-'}
</span>
{(isSending || isGettingIfStarred) && (
<div className={`position-absolute ${styles.spinner}`} role="status">
<span className="spinner-border spinner-border-sm text-primary" />
</div>
)}
</div>
</>
);
}
