109 lines
3.6 KiB
TypeScript
109 lines
3.6 KiB
TypeScript
|
import {
|
||
|
|
DropdownMenu,
|
||
|
|
DropdownMenuContent,
|
||
|
|
DropdownMenuGroup,
|
||
|
|
DropdownMenuItem,
|
||
|
|
DropdownMenuLabel,
|
||
|
|
DropdownMenuSeparator,
|
||
|
|
DropdownMenuTrigger,
|
||
|
|
} from "@repo/shadcn-ui/components";
|
||
|
|
import { cn } from "@repo/shadcn-ui/lib/utils";
|
||
|
|
import { CheckIcon, ChevronDownIcon } from "lucide-react";
|
||
|
|
import * as React from "react";
|
||
|
|
|
||
|
|
interface Company {
|
||
|
|
id: string;
|
||
|
|
name: string;
|
||
|
|
taxName: string;
|
||
|
|
initials: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
const companies: Company[] = [
|
||
|
|
{ id: "company-1", name: "Mi Empresa", taxName: "Mi Empresa S.L.", initials: "ME" },
|
||
|
|
{ id: "company-2", name: "Comercial Norte", taxName: "Comercial Norte S.L.", initials: "CN" },
|
||
|
|
{
|
||
|
|
id: "company-3",
|
||
|
|
name: "Servicios Globales",
|
||
|
|
taxName: "Servicios Globales S.L.",
|
||
|
|
initials: "SG",
|
||
|
|
},
|
||
|
|
];
|
||
|
|
|
||
|
|
interface AppCompanySwitcherProps {
|
||
|
|
className?: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const AppCompanySwitcher = ({ className }: AppCompanySwitcherProps) => {
|
||
|
|
const [selectedCompany, setSelectedCompany] = React.useState<Company>(companies[0]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={cn("w-full", className)}>
|
||
|
|
<DropdownMenu>
|
||
|
|
<DropdownMenuTrigger
|
||
|
|
render={
|
||
|
|
<button
|
||
|
|
className={cn(
|
||
|
|
"flex h-14 w-full items-center gap-3 rounded-none px-3 text-left hover:bg-muted transition-colors",
|
||
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
||
|
|
)}
|
||
|
|
type="button"
|
||
|
|
>
|
||
|
|
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-blue-600 text-sm font-semibold text-white">
|
||
|
|
{selectedCompany.initials}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span className="min-w-0 flex-1 group-data-[collapsible=icon]:hidden">
|
||
|
|
<span className="block truncate text-sm font-semibold leading-5 text-foreground">
|
||
|
|
{selectedCompany.name}
|
||
|
|
</span>
|
||
|
|
<span className="block truncate text-xs text-muted-foreground">
|
||
|
|
{selectedCompany.taxName}
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<ChevronDownIcon
|
||
|
|
aria-hidden="true"
|
||
|
|
className="size-4 shrink-0 text-muted-foreground group-data-[collapsible=icon]:hidden"
|
||
|
|
/>
|
||
|
|
</button>
|
||
|
|
}
|
||
|
|
/>
|
||
|
|
|
||
|
|
<DropdownMenuContent align="start" className="w-64" side="bottom">
|
||
|
|
<DropdownMenuGroup>
|
||
|
|
<DropdownMenuLabel>Empresa activa</DropdownMenuLabel>
|
||
|
|
<DropdownMenuSeparator />
|
||
|
|
|
||
|
|
{companies.map((company) => {
|
||
|
|
const isSelected = company.id === selectedCompany.id;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<DropdownMenuItem
|
||
|
|
className="gap-3 py-2"
|
||
|
|
key={company.id}
|
||
|
|
onSelect={() => setSelectedCompany(company)}
|
||
|
|
>
|
||
|
|
<span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted text-xs font-semibold text-foreground">
|
||
|
|
{company.initials}
|
||
|
|
</span>
|
||
|
|
|
||
|
|
<span className="min-w-0 flex-1">
|
||
|
|
<span className="block truncate font-medium">{company.name}</span>
|
||
|
|
<span className="block truncate text-xs text-muted-foreground">
|
||
|
|
{company.taxName}
|
||
|
|
</span>
|
||
|
|
</span>
|
||
|
|
|
||
|
|
{isSelected ? (
|
||
|
|
<CheckIcon aria-hidden="true" className="size-4 text-blue-600" />
|
||
|
|
) : null}
|
||
|
|
</DropdownMenuItem>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</DropdownMenuGroup>
|
||
|
|
</DropdownMenuContent>
|
||
|
|
</DropdownMenu>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|