Switcher

A component that allows the user to switch between different teams or accounts.

Example

Preview

Code

page.jsx


import {
  Switcher,
  SwitcherContent,
  SwitcherFooter,
  SwitcherGroup,
  SwitcherItem,
  SwitcherSeparator,
  SwitcherTrigger,
} from "@/components/Switcher";
import { ChevronRightMd, ShoppingCart2 } from "@medway-ui/icons";
import { useState } from "react";
 
const switcherData = [
  {
    label: "Medway",
    items: [
      {
        id: "base-extensivo",
        label: "Base | Extensivo",
        icon: "/images/logo-short.svg",
        onClick: () => console.log("Base | Extensivo clicked"),
      },
      {
        id: "r1-extensivo",
        label: "R1 | Extensivo",
        icon: "/images/logo-short.svg",
        onClick: () => console.log("R1 | Extensivo clicked"),
      },
      {
        id: "cursos-livres",
        label: "Cursos Livres",
        icon: "/images/logo-short.svg",
        onClick: () => console.log("Cursos Livres clicked"),
      },
    ],
  },
  {
    label: "Medway+",
    items: [
      {
        id: "temi-papers",
        label: "TEMI Papers",
        icon: "/images/logo-short.svg",
        onClick: () => console.log("TEMI Papers clicked"),
      },
      {
        id: "fundo-olho",
        label: "Fundo de olho",
        icon: "/images/logo-short.svg",
        onClick: () => console.log("Fundo de olho clicked"),
      },
      {
        id: "cosmiatria-academy",
        label: "Cosmiatria Academy",
        icon: "/images/logo-short.svg",
        onClick: () => console.log("Cosmiatria Academy clicked"),
      },
      {
        id: "alem-cirurgia",
        label: "Além da Cirurgia",
        icon: "/images/logo-short.svg",
        onClick: () => console.log("Além da Cirurgia clicked"),
      },
      {
        id: "intensiva-veia",
        label: "Intensiva na veia",
        icon: "/images/logo-short.svg",
        onClick: () => console.log("Intensiva na veia clicked"),
      },
    ],
  },
];
 
const footer = {
  label: "Conheçam mais cursos",
  icon: <ShoppingCart2 />,
};
 
function SwitcherExample() {
  const [selectedCourse, setSelectedCourse] = useState("");
 
  return (
    <Switcher value={selectedCourse} onValueChange={setSelectedCourse}>
      <SwitcherTrigger>
        <div className="flex items-center justify-between gap-8 rounded-md bg-gray-50 p-4 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700">
          <Image
            className="h-full w-full object-contain dark:brightness-0 dark:invert"
            src="/images/logo.svg"
            alt="medway"
            width={108}
            height={22}
          />
          <ChevronRightMd />
        </div>
      </SwitcherTrigger>
 
      <SwitcherContent align="center" side="right">
        {switcherData.map((group, groupIndex) => (
          <div key={groupIndex}>
            <SwitcherGroup label={group.label}>
              {group.items.map((item) => (
                <SwitcherItem
                  key={item.id}
                  value={item.id}
                  onClick={() => {
                    window.open(item.url, "_blank");
                  }}
                  icon={item.icon}
                >
                  {item.label}
                </SwitcherItem>
              ))}
            </SwitcherGroup>
          </div>
        ))}
 
        <SwitcherSeparator />
        <SwitcherFooter
          onClick={() => console.log("footer clicked")}
          icon={footer.icon}
        >
          {footer.label}
        </SwitcherFooter>
      </SwitcherContent>
    </Switcher>
  );
}

API

Switcher

Property	Type	Possible values	Default	Description
children	React.ReactNode	-	-	The content of the switcher (trigger and content components).
value	string	-	-	Optional controlled value for the selected item.
onValueChange	(value: string) => void	-	-	Optional callback function called when the selected value changes.
open	boolean	true, false	-	Controls the open state of the dropdown (controlled).
defaultOpen	boolean	true, false	false	Whether the dropdown is initially open (uncontrolled).
onOpenChange	(open: boolean) => void	-	-	Callback called when the open state changes.

SwitcherTrigger

Property	Type	Possible values	Default	Description
children	React.ReactNode	-	-	The trigger element that opens the switcher dropdown when clicked.
asChild	boolean	true, false	true	When true, merges with the immediate child element instead of rendering a button.

SwitcherContent

Property	Type	Possible values	Default	Description
children	React.ReactNode	-	-	The content to display inside the dropdown (groups, items, separators, footer).
align	”start” \| “center” \| “end"	"start”, “center”, “end"	"center”	Alignment of the dropdown relative to the trigger element.
side	”top” \| “right” \| “bottom” \| “left"	"top”, “right”, “bottom”, “left"	"right”	Side where the dropdown should appear relative to the trigger element.

SwitcherGroup

Property	Type	Possible values	Default	Description
children	React.ReactNode	-	-	The items belonging to this group.
label	string	-	-	Optional label displayed as the group header.

SwitcherItem

Property	Type	Possible values	Default	Description
children	React.ReactNode	-	-	The content of the item (usually text label).
value	string	-	-	Optional value for the item. When provided, item becomes selectable.
onClick	() => void	-	-	Optional callback function called when the item is clicked.
icon	string \| React.ReactNode	-	-	Optional icon to display. Can be an image URL (string) or React element.

SwitcherFooter

Property	Type	Possible values	Default	Description
children	React.ReactNode	-	-	The content of the footer item (usually text label).
onClick	() => void	-	-	Optional callback function called when the footer is clicked.
icon	React.ReactNode	-	-	Optional icon to display in the footer.

SwitcherSeparator

This component has no props. It renders a visual separator between groups or sections.