Skip to main content

version-switcher

React Functional Component: VersionSwitcher​

This code defines a React functional component named VersionSwitcher that allows users to select from a list of documentation versions via a dropdown menu.

Component Overview​

Purpose​

The VersionSwitcher provides a user-friendly interface for switching between different documentation versions. It displays the currently selected version and updates the selection dynamically when the user chooses another version from the dropdown.

Props​

  • versions (string[]): An array of available documentation versions (e.g., ["1.0", "2.0", "3.0"]).
  • defaultVersion (string): The default version to display when the component is first rendered.

State Management​

The component uses React's state hook:

  • selectedVersion: Tracks the currently selected version. It is initialized with defaultVersion and updated whenever a user selects a different version.

Key Features​

  1. Sidebar Menu Integration

    • The component is wrapped in a SidebarMenu structure using SidebarMenu and SidebarMenuItem components, indicating its placement within a sidebar.

  2. Dropdown Menu

    • Trigger (DropdownMenuTrigger): The dropdown menu is triggered by a styled button (SidebarMenuButton) that displays the selected version and an icon (ChevronsUpDown).
    • Content (DropdownMenuContent): The dropdown menu lists all available versions, allowing the user to select one.

  3. Dynamic Version Selection

    • The list of versions (versions) is rendered as DropdownMenuItem components.
    • Clicking a version updates selectedVersion via the onSelect handler.
    • The currently selected version is visually indicated with a checkmark (Check icon).

Detailed Explanation​

Trigger Button​

The dropdown trigger button is styled and displays:

  1. A graphical icon (GalleryVerticalEnd).
  2. The text "Documentation" with the current version displayed below it (v{selectedVersion}).
  3. An arrow icon (ChevronsUpDown) indicating the dropdown functionality.
  • Each version in versions is rendered as a DropdownMenuItem.
  • Clicking an item:
    • Calls onSelect, which updates the selectedVersion state.
    • Displays a checkmark (Check) next to the currently selected version for visual feedback.

Styling​

  • Classes: A variety of classes are applied to ensure responsive, accessible, and visually appealing styling:
    • data-[state=open] modifiers dynamically style the button when the dropdown is open.
    • bg-sidebar-primary and other text-sidebar-* classes define colors and layouts consistent with a sidebar theme.
    • w-[--radix-dropdown-menu-trigger-width] ensures the dropdown menu matches the trigger button's width.

How It Works​

  1. Initial State:

    • The component renders with defaultVersion as the selected version.

  2. User Interaction:

    • When the user clicks the dropdown trigger:
      • The menu expands, displaying all available versions (versions).
    • Selecting a version:
      • Updates selectedVersion with the selected version.
      • Displays the checkmark next to the chosen version.
      • The button updates to show the newly selected version.

Usage Example​

<VersionSwitcher
  versions={["1.0", "2.0", "3.0"]}
  defaultVersion="2.0"
/>
  • Initially displays "Documentation v2.0."
  • When the user selects another version (e.g., v1.0), it updates to "Documentation v1.0."

Key Benefits​

1. Enhanced User Experience​

Provides an intuitive, interactive interface for selecting documentation versions, making navigation seamless.

2. Dynamic State Management​

Updates the selected version dynamically, ensuring the displayed version always reflects user choices.

3. Modular Integration​

The component integrates into a sidebar structure, maintaining consistency with the application's layout.