-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
24f7467
commit dee90f1
Showing
2 changed files
with
5,620 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,126 @@ | ||
import React, { useState } from 'react'; | ||
|
||
const Navbar = () => { | ||
const [activeTooltip, setActiveTooltip] = useState(null); | ||
|
||
const handleTooltip = (tooltipId) => { | ||
setActiveTooltip(activeTooltip === tooltipId ? null : tooltipId); | ||
}; | ||
|
||
return ( | ||
<div className="fixed z-50 w-full h-16 max-w-lg -translate-x-1/2 bg-white border border-gray-200 rounded-full bottom-4 left-1/2 dark:bg-gray-700 dark:border-gray-600"> | ||
<div className="grid h-full max-w-lg grid-cols-5 mx-auto"> | ||
<button | ||
onMouseEnter={() => handleTooltip("tooltip-home")} | ||
onMouseLeave={() => handleTooltip("tooltip-home")} | ||
type="button" | ||
className="inline-flex flex-col items-center justify-center px-5 rounded-s-full hover:bg-gray-50 dark:hover:bg-gray-800 group" | ||
> | ||
<svg | ||
className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500" | ||
aria-hidden="true" | ||
xmlns="http://www.w3.org/2000/svg" | ||
fill="currentColor" | ||
viewBox="0 0 20 20" | ||
> | ||
<path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/> | ||
</svg> | ||
<span className="sr-only">Home</span> | ||
</button> | ||
<div id="tooltip-home" role="tooltip" className={`absolute z-10 ${activeTooltip === 'tooltip-home' ? 'visible' : 'invisible'} inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700`}> | ||
Home | ||
<div className="tooltip-arrow" data-popper-arrow></div> | ||
</div> | ||
<button | ||
onMouseEnter={() => handleTooltip("tooltip-wallet")} | ||
onMouseLeave={() => handleTooltip("tooltip-wallet")} | ||
type="button" | ||
className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group relative" | ||
> | ||
<svg | ||
className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500" | ||
aria-hidden="true" | ||
xmlns="http://www.w3.org/2000/svg" | ||
fill="currentColor" | ||
viewBox="0 0 20 20" | ||
> | ||
<path d="M11.074 4 8.442.408A.95.95 0 0 0 7.014.254L2.926 4h8.148ZM9 13v-1a4 4 0 0 1 4-4h6V6a1 1 0 0 0-1-1H1a1 1 0 0 0-1 1v13a1 1 0 0 0 1 1h17a1 1 0 0 0 1-1v-2h-6a4 4 0 0 1-4-4Z"/> | ||
<path d="M19 10h-6a2 2 0 0 0-2 2v1a2 2 0 0 0 2 2h6a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1Zm-4.5 3.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2ZM12.62 4h2.78L12.539.41a1.086 1.086 0 1 0-1.7 1.352L12.62 4Z"/> | ||
</svg> | ||
<span className="sr-only">Wallet</span> | ||
</button> | ||
<div id="tooltip-wallet" role="tooltip" className={`absolute z-10 ${activeTooltip === 'tooltip-wallet' ? 'visible' : 'invisible'} inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700`}> | ||
Wallet | ||
<div className="tooltip-arrow" data-popper-arrow></div> | ||
</div> | ||
<div className="flex items-center justify-center"> | ||
<button | ||
onMouseEnter={() => handleTooltip("tooltip-new")} | ||
onMouseLeave={() => handleTooltip("tooltip-new")} | ||
type="button" | ||
className="inline-flex items-center justify-center w-10 h-10 font-medium bg-blue-600 rounded-full hover:bg-blue-700 group focus:ring-4 focus:ring-blue-300 focus:outline-none dark:focus:ring-blue-800 relative" | ||
> | ||
<svg | ||
className="w-4 h-4 text-white" | ||
aria-hidden="true" | ||
xmlns="http://www.w3.org/2000/svg" | ||
fill="none" | ||
viewBox="0 0 18 18" | ||
> | ||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 1v16M1 9h16"/> | ||
</svg> | ||
<span className="sr-only">New item</span> | ||
</button> | ||
</div> | ||
<div id="tooltip-new" role="tooltip" className={`absolute z-10 ${activeTooltip === 'tooltip-new' ? 'visible' : 'invisible'} inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700`}> | ||
Create new item | ||
<div className="tooltip-arrow" data-popper-arrow></div> | ||
</div> | ||
<button | ||
onMouseEnter={() => handleTooltip("tooltip-settings")} | ||
onMouseLeave={() => handleTooltip("tooltip-settings")} | ||
type="button" | ||
className="inline-flex flex-col items-center justify-center px-5 hover:bg-gray-50 dark:hover:bg-gray-800 group relative" | ||
> | ||
<svg | ||
className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500" | ||
aria-hidden="true" | ||
xmlns="http://www.w3.org/2000/svg" | ||
fill="none" | ||
viewBox="0 0 20 20" | ||
> | ||
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M4 12.25V1m0 11.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M4 19v-2.25m6-13.5V1m0 2.25a2.25 2.25 0 0 0 0 4.5m0-4.5a2.25 2.25 0 0 1 0 4.5M10 19V7.75m6 4.5V1m0 11.25a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5ZM16 19v-2"/> | ||
</svg> | ||
<span className="sr-only">Settings</span> | ||
</button> | ||
<div id="tooltip-settings" role="tooltip" className={`absolute z-10 ${activeTooltip === 'tooltip-settings' ? 'visible' : 'invisible'} inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700`}> | ||
Settings | ||
<div className="tooltip-arrow" data-popper-arrow></div> | ||
</div> | ||
<button | ||
onMouseEnter={() => handleTooltip("tooltip-profile")} | ||
onMouseLeave={() => handleTooltip("tooltip-profile")} | ||
type="button" | ||
className="inline-flex flex-col items-center justify-center px-5 rounded-e-full hover:bg-gray-50 dark:hover:bg-gray-800 group relative" | ||
> | ||
<svg | ||
className="w-5 h-5 mb-1 text-gray-500 dark:text-gray-400 group-hover:text-blue-600 dark:group-hover:text-blue-500" | ||
aria-hidden="true" | ||
xmlns="http://www.w3.org/2000/svg" | ||
fill="currentColor" | ||
viewBox="0 0 20 20" | ||
> | ||
<path d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z"/> | ||
</svg> | ||
<span className="sr-only">Profile</span> | ||
</button> | ||
<div id="tooltip-profile" role="tooltip" className={`absolute z-10 ${activeTooltip === 'tooltip-profile' ? 'visible' : 'invisible'} inline-block px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm tooltip dark:bg-gray-700`}> | ||
Profile | ||
<div className="tooltip-arrow" data-popper-arrow></div> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Navbar; |
Oops, something went wrong.