3pp-mirror/rallly
1
0
Fork 0
mirror of https://github.com/lukevella/rallly.git synced 2025-07-26 04:37:34 +02:00
Code Issues Projects Releases Packages Wiki Activity

♻️ Improve page tabs implementation (#1841)

Browse source
This commit is contained in:
Luke Vella 2025-07-18 16:39:50 +01:00 • committed by GitHub
parent 87ac6132f6
commit 9e45d2a2a9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 10 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

27
apps/web/src/app/components/page-tabs.tsx
View file

@ -1,5 +1,4 @@
"use client"; "use client";
import { cn } from "@rallly/ui";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@rallly/ui/page-tabs"; import { Tabs, TabsContent, TabsList, TabsTrigger } from "@rallly/ui/page-tabs";
import { useRouter, useSearchParams } from "next/navigation"; import { useRouter, useSearchParams } from "next/navigation";
import React from "react"; import React from "react";
@ -15,34 +14,22 @@ export function PageTabs({
}) { }) {
const searchParams = useSearchParams(); const searchParams = useSearchParams();
const router = useRouter(); const router = useRouter();
const [isPending, startTransition] = React.useTransition();
const [tab, setTab] = React.useState(value); const [tab, setTab] = React.useState(value);
const handleTabChange = React.useCallback( const handleTabChange = React.useCallback(
(value: string) => { (value: string) => {
const params = new URLSearchParams(searchParams); const params = new URLSearchParams(searchParams);
params.set(name, value); params.set(name, value);
params.delete("page"); params.delete("page");
setTab(value); setTab(value);
startTransition(() => { const newUrl = `?${params.toString()}`;
const newUrl = `?${params.toString()}`; router.replace(newUrl, { scroll: false });
router.replace(newUrl, { scroll: false });
});
}, },
[router, searchParams, name], [router, searchParams, name],
); );
return ( return (
<Tabs <Tabs className="group" value={tab} onValueChange={handleTabChange}>
className={cn(
"transition-opacity",
isPending ? "pointer-events-none opacity-50 delay-200" : "",
)}
value={tab}
onValueChange={handleTabChange}
>
{children} {children}
</Tabs> </Tabs>
); );
@ -58,7 +45,13 @@ export function PageTabsContent({
children: React.ReactNode; children: React.ReactNode;
}) { }) {
return ( return (
<TabsContent tabIndex={-1} value={value}> <TabsContent
tabIndex={-1}
forceMount={true}
key={value}
className="transition-opacity data-[state=inactive]:pointer-events-none data-[state=inactive]:opacity-50 data-[state=inactive]:delay-200"
value={value}
>
{children} {children}
</TabsContent> </TabsContent>
); );