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

auto tabs only on profile

Browse Source
This commit is contained in:
Alejandro Gomez 2023-02-14 00:30:50 +01:00 committed by Kieran
parent 0379e41f3b
commit f590fd6081
No known key found for this signature in database
GPG Key ID: DE71CEB3925BE941
2 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,6 +17,7 @@ interface TabsProps {
interface TabElementProps extends Omit<TabsProps, "tabs"> { interface TabElementProps extends Omit<TabsProps, "tabs"> {
t: Tab; t: Tab;
autoWidth?: boolean;
} }
function clamp(n: number, min: number, max: number) { function clamp(n: number, min: number, max: number) {
@ -29,10 +30,10 @@ function clamp(n: number, min: number, max: number) {
return n; return n;
} }
export const TabElement = ({ t, tab, setTab }: TabElementProps) => { export const TabElement = ({ autoWidth, t, tab, setTab }: TabElementProps) => {
const style = useMemo(() => { const style = useMemo(() => {
return { minWidth: `${clamp(t.text.length, 3, 8) * 14}px` } as CSSProperties; return autoWidth ? ({ minWidth: `${clamp(t.text.length, 3, 8) * 16}px` } as CSSProperties) : {};
}, [t.text]); }, [t.text, autoWidth]);
return ( return (
<div <div
className={`tab ${tab.value === t.value ? "active" : ""} ${t.disabled ? "disabled" : ""}`} className={`tab ${tab.value === t.value ? "active" : ""} ${t.disabled ? "disabled" : ""}`}

2
packages/app/src/Pages/ProfilePage.tsx
View File

@ -301,7 +301,7 @@ export default function ProfilePage() {
} }
function renderTab(v: Tab) { function renderTab(v: Tab) {
return <TabElement key={v.value} t={v} tab={tab} setTab={setTab} />; return <TabElement autoWidth={true} key={v.value} t={v} tab={tab} setTab={setTab} />;
} }
const w = window.document.querySelector(".page")?.clientWidth; const w = window.document.querySelector(".page")?.clientWidth;