timmypidashev/web
1
0
Fork 0
mirror of https://github.com/timmypidashev/web.git synced 2026-04-14 02:53:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix tab colors

Browse Source
This commit is contained in:
Timothy Pidashev
2024-03-19 22:48:07 -07:00
parent a2555d1940
commit 3ba0a94793
1 changed files with 47 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/web/src/components/header.jsx
View File

@@ -16,7 +16,7 @@ const tabs = [
]; ];
// Tab theme colors // Tab theme colors
const tabColors = { const tabLineColors = {
green: "bg-light-green-1 dark:bg-dark-green-1", green: "bg-light-green-1 dark:bg-dark-green-1",
yellow: "bg-light-yellow-1 dark:bg-dark-yellow-1", yellow: "bg-light-yellow-1 dark:bg-dark-yellow-1",
blue: "bg-light-blue-1 dark:bg-dark-blue-1", blue: "bg-light-blue-1 dark:bg-dark-blue-1",
@@ -24,6 +24,14 @@ const tabColors = {
aqua: "bg-light-aqua-1 dark:bg-dark-aqua-1" aqua: "bg-light-aqua-1 dark:bg-dark-aqua-1"
}; };
const tabColors = {
green: "text-light-green-1 dark:text-dark-green-1",
yellow: "text-light-yellow-1 dark:text-dark-yellow-1",
blue: "text-light-blue-1 dark:text-dark-blue-1",
purple: "text-light-purple-1 dark:text-dark-purple-1",
aqua: "text-light-aqua-1 dark:text-dark-aqua-1"
};
// Individual tab links // Individual tab links
function MenuTab({ tab, activeTab, setActiveTab }) { function MenuTab({ tab, activeTab, setActiveTab }) {
return ( return (
@@ -55,7 +63,7 @@ function MenuTab({ tab, activeTab, setActiveTab }) {
absolute inset-x-0 absolute inset-x-0
lg:bottom-0.5 md:bottom-0.5 sm:bottom-0.5 lg:bottom-0.5 md:bottom-0.5 sm:bottom-0.5
lg:h-1.5 md:h-1.5 sm:h-1 lg:h-1.5 md:h-1.5 sm:h-1
${tabColors[tab.color]} ${tabLineColors[tab.color]}
`} `}
style={{ marginLeft: "0.75em", marginRight: "0.75em", borderRadius: 9999 }} style={{ marginLeft: "0.75em", marginRight: "0.75em", borderRadius: 9999 }}
transition={{ type: "spring", bounce: 0.2, duration: 0.6 }} transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
@@ -90,8 +98,22 @@ function TabMenu({ tabs, activeTab, setActiveTab }) {
); );
} }
// CollapsibleTab component
function CollapsibleTab({ tab }) { function CollapsibleTab({ tab }) {
return (
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.2 }}
>
<Link href={`/${tab.id}`} passHref>
<motion.a
className={`text-lg font-bold ${tabColors[tab.color]} px-4 py-2 focus:outline-none`}>
{tab.label}
</motion.a>
</Link>
</motion.div>
);
} }
function CollapsibleTabMenu() { function CollapsibleTabMenu() {
@@ -106,19 +128,28 @@ function CollapsibleTabMenu() {
<button onClick={toggleMenu} className="focus:outline-none"> <button onClick={toggleMenu} className="focus:outline-none">
<FaBars size={24} /> <FaBars size={24} />
</button> </button>
{isOpen && ( <AnimatePresence>
<div className="fixed top-16 right-4 flex flex-col items-center space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md p-4 shadow-lg z-10"> {isOpen && (
{tabs.map((tab) => ( <motion.div
<button className="fixed top-16 right-4 flex flex-col items-center space-y-4 bg-gray-200 dark:bg-gray-800 rounded-md p-4 shadow-lg z-10"
key={tab.id} initial={{ opacity: 0 }}
onClick={() => console.log(`Clicked ${tab.label}`)} // Example onClick function animate={{ opacity: 1 }}
className={`text-lg font-bold text-white ${tabColors[tab.color]} rounded-full px-4 py-2 focus:outline-none`} exit={{ opacity: 0 }}
> >
{tab.label} {tabs.map((tab, index) => (
</button> <motion.div
))} key={tab.id}
</div> initial={{ opacity: 0, y: -20 }}
)} animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.2, delay: index * 0.1 }}
exit={{ opacity: 0, y: -20 }}
>
<CollapsibleTab tab={tab} />
</motion.div>
))}
</motion.div>
)}
</AnimatePresence>
</div> </div>
); );
} }