Workspace Switcher
Selecteur d'espace de travail segmente pour basculer entre les vues du canvas et les contextes operationnels. Installez Workspace Switcher depuis le registre VLLNT UI avec la CLI shadcn.
Selecteur d'espace de travail segmente pour basculer entre les vues du canvas et les contextes operationnels. Fait partie de la famille navigation dans VLLNT UI, il est publie comme entree de registre lisible par machine — copiez la source directement dans votre application avec la CLI shadcn et possedez-la, sans dependance d'execution a une bibliotheque de composants.
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.
Installation
Ajoutez Workspace Switcher a votre projet avec la CLI shadcn. La source arrive dans votre code, prete a etre adaptee :
pnpm dlx shadcn@latest add https://ui.vllnt.ai/r/workspace-switcher.jsonSource
"use client";
import { useMemo, useState } from "react";
import { cn } from "../../lib/utils";
export type WorkspaceOption = {
description?: string;
id: string;
label: string;
};
export type WorkspaceSwitcherProps = Omit<
React.ComponentPropsWithoutRef<"div">,
"defaultValue" | "onChange"
> & {
defaultValue?: string;
onValueChange?: (value: string) => void;
value?: string;
workspaces: WorkspaceOption[];
};
const WorkspaceSwitcher = ({
className,
defaultValue,
onValueChange,
ref,
value,
workspaces,
...props
}: WorkspaceSwitcherProps & { ref?: React.Ref<HTMLDivElement> }) => {
const fallbackValue = defaultValue ?? workspaces[0]?.id ?? "";
const [internalValue, setInternalValue] = useState(fallbackValue);
const currentValue = value ?? internalValue;
const currentWorkspace = useMemo(
() => workspaces.find((workspace) => workspace.id === currentValue),
[currentValue, workspaces],
);
function handleSelect(nextValue: string) {
if (value === undefined) {
setInternalValue(nextValue);
}
onValueChange?.(nextValue);
}
return (
<div
className={cn(
"inline-flex min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/50 p-1",
className,
)}
ref={ref}
role="radiogroup"
{...props}
>
{workspaces.map((workspace) => {
const isActive = workspace.id === currentValue;
return (
<button
aria-checked={isActive}
className={cn(
"rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
isActive
? "bg-background text-foreground shadow-sm"
: "text-muted-foreground hover:text-foreground",
)}
key={workspace.id}
onClick={() => {
handleSelect(workspace.id);
}}
role="radio"
title={workspace.description}
type="button"
>
{workspace.label}
</button>
);
})}
{currentWorkspace?.description ? (
<span className="hidden pl-2 pr-1 text-xs text-muted-foreground md:inline">
{currentWorkspace.description}
</span>
) : null}
</div>
);
};
WorkspaceSwitcher.displayName = "WorkspaceSwitcher";
export { WorkspaceSwitcher };
Stories
Explorez chaque variante et etat dans le Storybook interactif :
Apercu
Basculez entre clair et sombre pour inspecter l'apercu Storybook integre.