Kieran/snort
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

djust tabs

Browse Source
This commit is contained in:
Alejandro Gomez 2023-02-13 23:18:09 +01:00 committed by Kieran
parent 82045d5f67
commit a63701f7d0
No known key found for this signature in database
GPG Key ID: DE71CEB3925BE941
1 changed files with 14 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/app/src/Element/Tabs.tsx
View File

@ -1,4 +1,5 @@
import "./Tabs.css"; import "./Tabs.css";
import { useMemo } from "react";
import useHorizontalScroll from "Hooks/useHorizontalScroll"; import useHorizontalScroll from "Hooks/useHorizontalScroll";
import { CSSProperties } from "react"; import { CSSProperties } from "react";
@ -18,8 +19,20 @@ interface TabElementProps extends Omit<TabsProps, "tabs"> {
t: Tab; t: Tab;
} }
function clamp(n: number, min: number, max: number) {
if (n < min) {
return min;
}
if (n > max) {
return max;
}
return n;
}
export const TabElement = ({ t, tab, setTab }: TabElementProps) => { export const TabElement = ({ t, tab, setTab }: TabElementProps) => {
const style = { minWidth: `${t.text.length * 0.6}em` } as CSSProperties; const style = useMemo(() => {
return { minWidth: `${clamp(t.text.length, 2, 7)}em` } as CSSProperties;
}, [t.text]);
return ( return (
<div <div
className={`tab ${tab.value === t.value ? "active" : ""} ${t.disabled ? "disabled" : ""}`} className={`tab ${tab.value === t.value ? "active" : ""} ${t.disabled ? "disabled" : ""}`}