makearmy/le-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

improve utilities workspace navigation

Browse source
This commit is contained in:
makearmy 2026-07-10 17:25:34 -04:00
parent 0855724cb0
commit 305ea41ad3
5 changed files with 71 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

28
app/components/portal/LaserToolkitSwitcher.tsx
View file

@ -4,6 +4,7 @@
import { useMemo } from "react";
import { useSearchParams, useRouter } from "next/navigation";
import { cn } from "@/lib/utils";
import { Calculator, ChevronDown } from "lucide-react";
import { TOOLKIT_TABS } from "@/components/utilities/laser-toolkit/registry";
export default function LaserToolkitSwitcher({ basePath = "/portal/utilities" }: { basePath?: string }) {
@ -34,23 +35,38 @@ export default function LaserToolkitSwitcher({ basePath = "/portal/utilities" }:
const ActiveCmp = active.component;
return (
<div className="space-y-4">
<div className="flex flex-wrap gap-2">
<div className="min-w-0">
<div className="border-b border-border/60 bg-background/30 p-3">
<div className="relative sm:hidden">
<Calculator className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-accent" />
<select
aria-label="Select laser calculator"
value={activeKey}
onChange={(e) => setTab(e.target.value)}
className="h-10 w-full appearance-none rounded-lg border-border/70 bg-card pl-10 pr-9 text-sm"
>
{TOOLKIT_TABS.map((t) => <option key={t.key} value={t.key}>{t.label}</option>)}
</select>
<ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 opacity-50" />
</div>
<div className="hidden flex-wrap gap-1 sm:flex">
{TOOLKIT_TABS.map(t => (
<button
key={t.key}
onClick={() => setTab(t.key)}
className={cn(
"rounded-md border px-3 py-1.5 text-sm",
activeKey === t.key ? "bg-primary text-primary-foreground" : "hover:bg-muted"
"rounded-md border border-transparent px-3 py-1.5 text-xs transition-colors",
activeKey === t.key
? "border-border/60 bg-card text-foreground shadow-sm"
: "text-muted-foreground hover:bg-muted/30 hover:text-foreground"
)}
>
{t.label}
</button>
))}
</div>
</div></div>
<div className="rounded-md border p-4">
<div className="laser-tool-workspace">
<ActiveCmp />
</div>
</div>