@heroicons/react/solid#HomeIcon TypeScript Examples
The following examples show how to use
@heroicons/react/solid#HomeIcon.
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: BreadCrumbs.tsx From eventcatalog with MIT License | 6 votes |
|
function BreadCrumbs({ pages, homePath = '/events' }: BreadCrumbsProps) {
return (
<nav className="flex" aria-label="Breadcrumb">
<ol className="flex items-center space-x-4">
<li>
<Link href={homePath}>
<a className="text-gray-400 hover:text-gray-500">
<HomeIcon className="flex-shrink-0 h-5 w-5" aria-hidden="true" />
<span className="sr-only">Home</span>
</a>
</Link>
</li>
{pages.map((page) => (
<li key={page.name}>
<div className="flex items-center">
<svg
className="flex-shrink-0 h-5 w-5 text-gray-300"
xmlns="http://www.w3.org/2000/svg"
fill="currentColor"
viewBox="0 0 20 20"
aria-hidden="true"
>
<path d="M5.555 17.776l8-16 .894.448-8 16-.894-.448z" />
</svg>
<Link href={page.href}>
<a
className="ml-4 text-sm font-medium text-gray-500 hover:text-gray-700"
aria-current={page.current ? 'page' : undefined}
>
{page.name}
</a>
</Link>
</div>
</li>
))}
</ol>
</nav>
);
}
Example #2
| Source File: NavBar.tsx From server with MIT License | 6 votes |
|
DesktopNavBar = () => {
const history = useHistory()
const path = useLocation().pathname
return (
<div className="nav-bar-container nav-bar-top" onClick={() => {window.scrollTo({ top: 0, behavior: 'smooth'})}}>
<div
className={`nav-bar-button-container nav-bar-button-container-aligned ${handleNavItemActiveClass(path, "/")}`}
onClick={() => {
history.push('/')
}}
>
<HomeIcon />
<span className='nav-bar-button-text'>Home</span>
</div>
<div
className={`nav-bar-button-container nav-bar-button-container-aligned ${handleNavItemActiveClass(path, "/users")}`}
onClick={() => {history.push('/users')}}
>
<UserGroupIcon />
<span className='nav-bar-button-text'>Users</span>
</div>
<div
className={`nav-bar-button-container nav-bar-button-container-aligned ${handleNavItemActiveClass(path, "/profile")}`}
onClick={() => {history.push('/profile')}}
>
<UserCircleIcon />
<span className='nav-bar-button-text'>Profile</span>
</div>
<div
className={`nav-bar-button-container nav-bar-button-container-aligned ${handleNavItemActiveClass(path, "/settings")}`}
onClick={() => {history.push('/settings')}}
>
<CogIcon />
<span className='nav-bar-button-text'>Settings</span>
</div>
</div>
)
}
Example #3
| Source File: NavBar.tsx From server with MIT License | 5 votes |
|
MobileNavBar = () => {
const history = useHistory()
const path = useLocation().pathname
const hasNewNotifications = useAppSelector(state => state.notifications.notifications.filter(n => n.unread).length > 0)
return (
<div className="nav-bar-container nav-bar-bottom">
<div
className={`nav-bar-button-container nav-bar-button-container-spaced ${handleNavItemActiveClass(path, "/circles")}`}
onClick={() => {
history.push('/circles')
window.scrollTo({ top: 0, behavior: 'smooth'})
}}
>
<CirclesIcon />
</div>
<div
className={`nav-bar-button-container nav-bar-button-container-spaced ${handleNavItemActiveClass(path, "/users")}`}
onClick={() => {
history.push('/users')
window.scrollTo({ top: 0, behavior: 'smooth'})
}}
>
<UserAddIcon />
</div>
<div
className={`nav-bar-button-container nav-bar-button-container-spaced ${handleNavItemActiveClass(path, "/")}`}
onClick={() => {
history.push('/')
window.scrollTo({ top: 0, behavior: 'smooth'})
}}
>
<HomeIcon />
</div>
<div
className={`nav-bar-button-container nav-bar-button-container-spaced ${handleNavItemActiveClass(path, "/notifications")}`}
onClick={() => {
history.push('/notifications')
window.scrollTo({ top: 0, behavior: 'smooth'})
}}
>
{hasNewNotifications && <div className='nav-bar-notification-indicator-wrapper'><div className='nav-bar-notification-indicator' /></div>}
<BellIcon />
</div>
<div
className={`nav-bar-button-container nav-bar-button-container-spaced ${handleNavItemActiveClass(path, "/profile")}`}
onClick={() => {
history.push('/profile')
window.scrollTo({ top: 0, behavior: 'smooth'})
}}
>
<UserCircleIcon />
</div>
</div>
)
}
Example #4
| Source File: NavBar.tsx From ide with Mozilla Public License 2.0 | 4 votes |
|
NavBar = (props: DesktopNavBarProps): JSX.Element => {
const onlineUsers = useOnlineUsers();
const onlineUserCount = onlineUsers?.filter(isUserOnline).length;
const [showCopied, setShowCopied] = useState(false);
const handleShare = () => {
navigator.clipboard.writeText(window.location.href).then(
() => {
setShowCopied(true);
setTimeout(() => {
setShowCopied(false);
}, 3000);
},
() => {
alert(
"Couldn't copy link to clipboard. Share the current URL manually."
);
}
);
};
return (
<div className="flex items-center overflow-x-auto">
<div className="flex items-center divide-x divide-gray-700">
<Link href="/">
<a className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium text-gray-200 hover:bg-gray-800 focus:bg-gray-800 focus:outline-none">
<HomeIcon className="h-5 w-5" />
</a>
</Link>
{props.fileMenu}
<button
type="button"
className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium text-gray-200 hover:bg-gray-800 focus:bg-gray-800 focus:outline-none"
onClick={() => handleShare()}
>
<ShareIcon
className="-ml-1 mr-2 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
{showCopied ? 'URL Copied!' : 'Share'}
</button>
</div>
{props.runButton}
<div className="flex items-center divide-x divide-gray-700">
<a
href="https://github.com/cpinitiative/ide/issues"
target="_blank"
className="px-4 py-2 text-gray-400 hover:text-gray-200 text-sm font-medium flex-shrink-0"
rel="noreferrer"
>
Report an Issue
</a>
<a
href="https://github.com/cpinitiative/ide"
target="_blank"
rel="noreferrer"
className="px-4 py-2 text-gray-400 hover:text-gray-200 text-sm font-medium flex-shrink-0"
>
Star this on Github!
</a>
{props.showViewOnly && (
<span className="px-4 py-2 text-gray-400 text-sm font-medium">
View Only
</span>
)}
</div>
<div className="flex-1" />
{props.showSidebarButton && (
<div>
<button
type="button"
className="relative inline-flex items-center px-4 py-2 shadow-sm text-sm font-medium text-gray-200 hover:bg-gray-800 focus:bg-gray-800 focus:outline-none"
onClick={() => props.onToggleSidebar()}
>
{props.isSidebarOpen ? (
<ChevronRightIcon
className="-ml-1 mr-2 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
) : (
<ChevronLeftIcon
className="-ml-1 mr-2 h-5 w-5 text-gray-400"
aria-hidden="true"
/>
)}
{onlineUserCount} User{onlineUserCount === 1 ? '' : 's'} Online
</button>
</div>
)}
</div>
);
}
