Skip to content

Commit

Permalink
Navbar set
Browse files Browse the repository at this point in the history
  • Loading branch information
paragpurandare committed Feb 6, 2024
1 parent 24f7467 commit dee90f1
Show file tree
Hide file tree
Showing 2 changed files with 5,620 additions and 0 deletions.
126 changes: 126 additions & 0 deletions frontend/app/components/Navbar.jsx
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;
Loading

0 comments on commit dee90f1

Please sign in to comment.