Add platform status switch

apps/web/src/components/ui/index.ts

@@ -13,6 +13,7 @@ export * from './message';
 export * from './popover';
 export * from './select';
 export * from './separator';
+export * from './switch';
 export * from './table';
 export * from './tabs';
 export * from './textarea';

apps/web/src/components/ui/switch.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { cn } from '../../lib/utils';
+
+export interface SwitchProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  checked: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+}
+
+export const Switch = React.forwardRef<HTMLButtonElement, SwitchProps>(
+  ({ checked, className, disabled, onCheckedChange, ...props }, ref) => (
+    <button
+      aria-checked={checked}
+      className={cn('shSwitch', className)}
+      data-state={checked ? 'checked' : 'unchecked'}
+      disabled={disabled}
+      ref={ref}
+      role="switch"
+      {...props}
+      type="button"
+      onClick={(event) => {
+        props.onClick?.(event);
+        if (!event.defaultPrevented && !disabled) {
+          onCheckedChange?.(!checked);
+        }
+      }}
+    >
+      <span className="shSwitchThumb" />
+    </button>
+  ),
+);
+
+Switch.displayName = 'Switch';