Function CliInstallation

src/components/code/CliInstallation.jsx:30–339

({ deps })

const CLI_LABEL_MAP = { shadcn: 'shadcn', jsrepo: 'jsrepo' };

const CliInstallation = ({ deps }) => {
  const { category, subcategory } = useActiveRoute();
  const { languagePreset, stylePreset } = useOptions() || {};

  const {
    installMode: mode,
    setInstallMode: setMode,
    cliTool: cliLib,
    setCliTool: setCliLib,
    packageManager: pkg,
    setPackageManager: setPkg
  } = useInstallation();

  const commands = useMemo(
    () => generateCliCommands(languagePreset, stylePreset, category, subcategory, deps),
    [languagePreset, stylePreset, category, subcategory, deps]
  );

  const hasManual = !!commands?.manual;

  useEffect(() => {
    if (!hasManual && mode === 'manual') {
      setMode('cli');
    }
  }, [hasManual, mode, setMode]);



  const [copied, setCopied] = useState(false);
  const codeRef = useRef(null);
  const [scrollMeta, setScrollMeta] = useState({ w: 0, l: 0, show: false });
  const [dragging, setDragging] = useState(false);
  const trackRef = useRef(null);
  const dragOffsetRef = useRef(0);
  const trackWidthRef = useRef(0);
  const thumbWidthRef = useRef(0);

  const currentCommand = useMemo(() => {
    if (!commands) return '';
    if (mode === 'manual') return commands.manual?.[pkg] || '';
    const key = pkg === 'npm' ? 'npx' : pkg;
    return cliLib === 'jsrepo' ? commands.jsrepo[key] : commands.shadcn[key];
  }, [commands, mode, pkg, cliLib]);

  const updateScrollMeta = useCallback(() => {
    const el = codeRef.current;
    if (!el) return;
    const { scrollWidth, clientWidth, scrollLeft } = el;
    if (scrollWidth <= clientWidth) {
      if (scrollMeta.show) setScrollMeta({ w: 0, l: 0, show: false });
      return;
    }
    const ratio = clientWidth / scrollWidth;
    const thumbWidth = Math.max(24, clientWidth * ratio);
    const maxTrack = clientWidth - thumbWidth;
    const thumbLeft = (scrollLeft / (scrollWidth - clientWidth)) * maxTrack;
    setScrollMeta({ w: thumbWidth, l: thumbLeft, show: true });
    trackWidthRef.current = clientWidth;