Function ShadcnCommand

packages/dev/s2-docs/src/ShadcnCommand.tsx:10–101

({
  type,
  component,
  preRef
}: {
  type?: 'vanilla' | 'tailwind' | 'hooks';
  component?: string;
  preRef?: RefObject<HTMLPreElement | null>;
})

import {useLocalStorage} from './useLocalStorage';

export function ShadcnCommand({
  type,
  component,
  preRef
}: {
  type?: 'vanilla' | 'tailwind' | 'hooks';
  component?: string;
  preRef?: RefObject<HTMLPreElement | null>;
}) {
  let [packageManager, setPackageManager] = useLocalStorage('packageManager', 'npm');
  let command = packageManager;
  if (packageManager === 'npm') {
    command = 'npx';
  } else if (packageManager === 'pnpm') {
    command = 'pnpm dlx';
  }

  let onSelectionChange = (value: Key) => {
    setPackageManager(String(value));
  };

  let [storedType, setStoredType] = useLocalStorage('style', type || 'Vanilla CSS');
  let shadcnType =
    type === 'hooks'
      ? 'hooks'
      : type === 'vanilla' || storedType === 'Vanilla CSS'
        ? 'css'
        : 'tailwind';
  let componentName = component ? '-' + component.toLowerCase() : '';
  let specifier =
    process.env.DOCS_ENV === 'prod'
      ? `@react-aria/${shadcnType}${componentName}`
      : `${getBaseUrl('react-aria')}/registry/${shadcnType}${componentName}.json`;

  let cmd = `${command} shadcn@latest add ${specifier}`;

  return (
    <div
      className={style({
        backgroundColor: 'layer-1',
        borderRadius: 'xl',
        padding: 16,
        display: 'flex',
        flexDirection: 'column',
        gap: 16
      })}>
      <div
        className={style({
          display: 'flex',
          flexWrap: 'wrap',
          gap: 16
        })}>
        <SegmentedControl
          aria-label="Package manager"
          selectedKey={packageManager}
          onSelectionChange={onSelectionChange}>
          <SegmentedControlItem id="npm">npm</SegmentedControlItem>
          <SegmentedControlItem id="yarn">yarn</SegmentedControlItem>