react-icons/fa#FaCompass JavaScript Examples
The following examples show how to use
react-icons/fa#FaCompass.
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: project-icon.js From gatsby-theme-intro with MIT License | 6 votes |
|
ProjectIcon = ({ icon }) => (
<span className="absolute right-0 bottom-0 mb-5 mr-5 text-back">
{icon === "github" ? (
<FaGithub className="w-6 h-6" />
) : (
<FaCompass className="w-6 h-6" />
)}
</span>
)
Example #2
| Source File: summary.js From gatsby-theme-intro with MIT License | 6 votes |
|
Summary = ({ profile }) => (
<div className="flex pb-8">
<div className="w-1/2 pr-4 lg:pr-12 border-r border-line">
<h5 className="font-header font-semibold text-front text-sm uppercase">
Company
</h5>
<h3 className="font-header font-light text-2xl text-front leading-tight">
{profile.company}
</h3>
{profile.for_hire && (
<div className="font-header font-semibold text-xs uppercase pt-2">
<span className="inline-block w-2 h-2 rounded-full mr-1 bg-green-500"></span>
Available for hire
</div>
)}
</div>
<div className="w-1/2 pl-4 lg:pl-12">
<h5 className="font-header font-semibold text-front text-sm uppercase">
Focused on
</h5>
<div className="font-header font-light text-2xl text-front leading-tight">
{profile.focus}
{profile.focus_url && (
<div>
<a
aria-label="website"
className="inline-block text-front opacity-50 hover:opacity-75 h-4 w-4 transition-opacity duration-150"
href={profile.focus_url}
rel="noopener noreferrer"
target="_blank"
>
<FaCompass />
</a>
</div>
)}
</div>
</div>
</div>
)
Example #3
| Source File: Navbar.js From devagram with GNU General Public License v3.0 | 4 votes |
|
Navbar = (props) => {
const [searchText, setSearchText] = useState("");
const [open, setOpen] = useState(false);
const [openProfile, setOpenProfile] = useState(false);
return (
<>
<nav className={classes.Navbar}>
<div className={classes.NavContent}>
<Title title="Devagram" />
<div className={classes.Search}>
<input
type="text"
value={searchText}
onChange={setSearchText}
name="search"
required
placeholder="Search"
aria-labelledby="label-search"
/>
<Link to="#">
<FaSearch size="1.2em" style={{ color: "#aaa" }} />
</Link>
</div>
<div className={classes.Options}>
<div className={classes.Option}>
<Link to="#">
<FaInbox style={{ color: "black" }} />
</Link>
</div>
<div className={classes.Option}>
<Link to="/feeds">
<FaCompass style={{ color: "black" }} />
</Link>
</div>
<div className={classes.Option}>
<Link to="/connect">
<FaUsers style={{ color: "black" }} />
</Link>
</div>
<div className={classes.Option}>
<Link to="/jobsAndHack">
<AiFillCode style={{ color: "black" }} />
</Link>
</div>
<div
className={classes.Option}
onClick={() => setOpenProfile(!openProfile)}
>
<CgProfile style={{ color: "black", cursor: "pointer" }} />
</div>
<div
className={(classes.Option, classes.Burger)}
onClick={() => setOpen(!open)}
>
<FaHamburger style={{ color: "black", cursor: "pointer" }} />
</div>
</div>
</div>
<div
className={[
classes.ProfileOptions,
openProfile ? classes.Open : "",
].join(" ")}
>
<div className={classes.ProfileOption}>
<NavLink to="/dashboard" activeClassName={classes.selected}>
<FaHome />
<span>Home</span>
</NavLink>
</div>
<div className={classes.ProfileOption}>
<NavLink to="#" activeClassName={classes.selected}>
<FaSearch />
<span>Search</span>
</NavLink>
</div>
<div className={classes.ProfileOption}>
<NavLink to="#" activeClassName={classes.selected}>
<FaPlus />
<span>Create Post</span>
</NavLink>
</div>
<div className={classes.ProfileOption}>
<NavLink to="/profile" activeClassName={classes.selected}>
<FaUser />
<span>Profile</span>
</NavLink>
</div>
</div>
<div
className={[classes.SmallScreen, open ? classes.Open : ""].join(" ")}
>
<div className={classes.SmallOption}>
<Link to="/dashboard">
<FaHome style={{ color: "black" }} />
<span>Home</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="#">
<FaInbox style={{ color: "black" }} />
<span>Inbox</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="/feeds">
<FaCompass style={{ color: "black" }} />
<span>Explore-feeds</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="/connect">
<FaUsers style={{ color: "black" }} />
<span>Connect</span>
</Link>
</div>
<div className={classes.SmallOption}>
<Link to="/jobsAndHack">
<AiFillCode style={{ color: "black" }} />
<span>jobs-hackathons</span>
</Link>
</div>
</div>
</nav>
</>
);
}
Example #4
| Source File: index.js From FinDevs with MIT License | 4 votes |
|
export default function SignUpForm({ history }) {
const [gitUser, setGitUser] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [techs, setTechs] = useState([]);
const [latitude, setLatitude] = useState('');
const [longitude, setLongitude] = useState('');
useEffect(() => {
navigator.geolocation.getCurrentPosition(
(position) => {
const { latitude, longitude } = position.coords;
setLatitude(latitude);
setLongitude(longitude);
},
(err) => {
console.log(err);
},
{
timeout: 30000,
},
);
}, []);
async function handleSubmit(e) {
e.preventDefault();
try {
if (confirmPassword !== password) {
setConfirmPassword('');
setPassword('');
throw 'Passwords does not match.';
}
if (password.length < 6) {
setConfirmPassword('');
setPassword('');
throw 'This password is too short! (min 6 characters)';
}
const newDev = await api.post('/devs', {
github_user: gitUser,
password,
techs,
latitude,
longitude,
});
history.push('/');
} catch (err) {
await Swal.fire({
title: err.response ? err.response.data.error : err,
icon: 'error',
confirmButtonColor: '#7159c1',
});
}
}
return (
<Form onSubmit={handleSubmit}>
<img src={logo} alt="FinDevs" />
<div className="input-block">
<label htmlFor="GitHub User">
<FaGithubAlt />
</label>
<input
name="github_user"
id="github_user"
placeholder="GitHub User"
required
onChange={(e) => {
setGitUser(e.target.value);
}}
/>
</div>
<div className="input-block">
<label htmlFor="password">
<FaKey />
</label>
<input
name="password"
id="password"
type="password"
placeholder="Password"
required
onChange={(e) => {
setPassword(e.target.value);
}}
value={password}
/>
<input
name="confirmPassword"
id="confirmPassword"
type="password"
placeholder="Confirm Password"
required
onChange={(e) => {
setConfirmPassword(e.target.value);
}}
value={confirmPassword}
/>
</div>
<div className="input-block">
<label htmlFor="techs">
<FaCode />
</label>
<input
name="techs"
id="techs"
placeholder="Your main Techs splited by comma"
required
onChange={(e) => {
setTechs(e.target.value);
}}
/>
</div>
<div className="input-group">
<div className="input-block">
<label htmlFor="location">
<FaCompass />
</label>
<input
name="Latitude"
type="number"
id="Latitude"
placeholder="Latitude"
value={latitude}
onChange={(e) => setLatitude(e.target.value)}
/>
<input
name="Longitude"
type="number"
id="Longitude"
placeholder="Longitude"
value={longitude}
onChange={(e) => setLongitude(e.target.value)}
/>
</div>
</div>
<button type="submit">New Dev</button>
</Form>
);
}
