zedcode/bs-manager
1
0
Fork 0
mirror of https://github.com/Zagrios/bs-manager.git synced 2026-07-03 14:08:25 +02:00
Code Issues Packages Projects Releases Wiki Activity

add linked unlinked maps indication

Browse Source
This commit is contained in:
MathieuG-P
2022-11-24 01:18:08 +01:00
parent 46f5f9486c
commit 8372d3bed9
9 changed files with 128 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/shared/bsm-button.component.tsx
+1 -1
View File
@@ -45,7 +45,7 @@ export function BsmButton({className, style, imgClassName, iconClassName, icon,
const renderTypeColor = (() => {
if(typeColor === "primary"){ return ""; }
if(!typeColor){ return `bg-light-main-color-2 dark:bg-main-color-2 ${!withBar && "hover:bg-light-main-color-3 dark:hover:bg-main-color-3"}`; }
if(!typeColor){ return `bg-light-main-color-2 dark:bg-main-color-2 ${!withBar && "hover:brightness-125"}`; }
if(typeColor === "cancel"){ return "bg-gray-500"; }
if(typeColor === "error"){ return "bg-red-500"; }
if(typeColor === "success"){ return "bg-green-500"; }
src/renderer/components/shared/tab-nav-bar.component.tsx
+22 -9
View File
@@ -1,17 +1,23 @@
import { useState } from "react";
import { DetailedHTMLProps, Fragment, useState } from "react";
import { useThemeColor } from "renderer/hooks/use-theme-color.hook";
import { useTranslation } from "renderer/hooks/use-translation.hook";
export function TabNavBar(props: {tabsText: string[], onTabChange: (index: number) => void, className?: string}) {
type Props = {
tabsText: string[],
onTabChange: (index: number) => void,
className?: string,
renderTab?: (props: DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, text: string) => JSX.Element
}
export function TabNavBar(props: Props) {
const [currentTabIndex, setCurrentTabIndex] = useState(0);
const t = useTranslation();
const secondColor = useThemeColor("second-color");
const selectYear = (tab: string) => {
const newIndex = props.tabsText.indexOf(tab);
setCurrentTabIndex(newIndex);
props.onTabChange(newIndex);
const selectTab = (index: number) => {
setCurrentTabIndex(index);
props.onTabChange(index);
}
return (
@@ -21,9 +27,16 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: (index: numbe
<span className="absolute h-full block bg-current transition-transform duration-300 shadow-center shadow-current" style={{transform: `translate(${currentTabIndex * 100}%, 0)`, width: `calc(100% / ${props.tabsText.length})`}}/>
</div>
<ul className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
{ props.tabsText.map((y, index) =>
<li className="px-4 h-full text-center text-gray-800 dark:text-gray-200 text-lg font-bold hover:backdrop-brightness-75" key={index} onClick={() => selectYear(y)}>{t(y)}</li>
)}
{props.tabsText.map((text, index) => (
props.renderTab ? (
<Fragment key={text}>
{props.renderTab({onClick: () => selectTab(index)}, t(text))}
</Fragment>
) : (
<li className="px-4 h-full text-center text-gray-800 dark:text-gray-200 text-lg font-bold hover:backdrop-brightness-75" key={text} onClick={() => selectTab(index)}>{t(text)}</li>
)
))}
</ul>
</nav>
)