calvin.erfmann/pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2026-05-30 04:32:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

use new tabs in devices modal

Browse Source
This commit is contained in:
miloschwartz
2026-04-20 20:36:15 -07:00
parent 335de04a4e
commit 2ef7a709d3
3 changed files with 21 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/globals.css
View File

@@ -57,7 +57,7 @@
--accent-foreground: oklch(0.985 0 0); --accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.5382 0.1949 22.216); --destructive: oklch(0.5382 0.1949 22.216);
--destructive-foreground: oklch(0.985 0 0); --destructive-foreground: oklch(0.985 0 0);
--border: oklch(1 0 0 / 18%); --border: oklch(1 0 0 / 15%);
--input: oklch(1 0 0 / 18%); --input: oklch(1 0 0 / 18%);
--ring: oklch(0.646 0.222 41.116); --ring: oklch(0.646 0.222 41.116);
--chart-1: oklch(0.488 0.243 264.376); --chart-1: oklch(0.488 0.243 264.376);

2
src/components/LocaleSwitcherSelect.tsx
View File

@@ -53,7 +53,7 @@ export default function LocaleSwitcherSelect({
)} )}
aria-label={label} aria-label={label}
> >
<Languages className="h-4 w-4" /> <Languages className="text-muted-foreground h-4 w-4" />
<span className="text-left flex-1"> <span className="text-left flex-1">
{selected?.label ?? label} {selected?.label ?? label}
</span> </span>

50
src/components/ViewDevicesDialog.tsx
View File

@@ -27,7 +27,7 @@ import {
TableHeader, TableHeader,
TableRow TableRow
} from "@app/components/ui/table"; } from "@app/components/ui/table";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@app/components/ui/tabs"; import { HorizontalTabs } from "@app/components/HorizontalTabs";
import { Loader2, RefreshCw } from "lucide-react"; import { Loader2, RefreshCw } from "lucide-react";
import moment from "moment"; import moment from "moment";
import { useUserContext } from "@app/hooks/useUserContext"; import { useUserContext } from "@app/hooks/useUserContext";
@@ -58,7 +58,6 @@ export default function ViewDevicesDialog({
const [devices, setDevices] = useState<Device[]>([]); const [devices, setDevices] = useState<Device[]>([]);
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [activeTab, setActiveTab] = useState<"available" | "archived">("available");
const fetchDevices = async () => { const fetchDevices = async () => {
setLoading(true); setLoading(true);
@@ -177,34 +176,21 @@ export default function ViewDevicesDialog({
<Loader2 className="h-6 w-6 animate-spin" /> <Loader2 className="h-6 w-6 animate-spin" />
</div> </div>
) : ( ) : (
<Tabs <HorizontalTabs
value={activeTab} clientSide
onValueChange={(value) => defaultTab={0}
setActiveTab(value as "available" | "archived") items={[
{
title: `${t("available") || "Available"} (${devices.filter((d) => !d.archived).length})`,
href: "#available"
},
{
title: `${t("archived") || "Archived"} (${devices.filter((d) => d.archived).length})`,
href: "#archived"
} }
className="w-full" ]}
> >
<TabsList className="grid w-full grid-cols-2"> <div>
<TabsTrigger value="available">
{t("available") || "Available"} (
{
devices.filter(
(d) => !d.archived
).length
}
)
</TabsTrigger>
<TabsTrigger value="archived">
{t("archived") || "Archived"} (
{
devices.filter(
(d) => d.archived
).length
}
)
</TabsTrigger>
</TabsList>
<TabsContent value="available" className="mt-4">
{devices.filter((d) => !d.archived) {devices.filter((d) => !d.archived)
.length === 0 ? ( .length === 0 ? (
<div className="text-center py-8 text-muted-foreground"> <div className="text-center py-8 text-muted-foreground">
@@ -271,8 +257,8 @@ export default function ViewDevicesDialog({
</Table> </Table>
</div> </div>
)} )}
</TabsContent> </div>
<TabsContent value="archived" className="mt-4"> <div>
{devices.filter((d) => d.archived) {devices.filter((d) => d.archived)
.length === 0 ? ( .length === 0 ? (
<div className="text-center py-8 text-muted-foreground"> <div className="text-center py-8 text-muted-foreground">
@@ -336,8 +322,8 @@ export default function ViewDevicesDialog({
</Table> </Table>
</div> </div>
)} )}
</TabsContent> </div>
</Tabs> </HorizontalTabs>
)} )}
</CredenzaBody> </CredenzaBody>
<CredenzaFooter> <CredenzaFooter>