Function QuickStart

src/components/landingnew/QuickStart/QuickStart.jsx:18–117

()

};

const QuickStart = () => {
  const { cliTool, setCliTool, packageManager, setPackageManager } = useInstallation();
  const [copied, setCopied] = useState(false);
  const [dropOpen, setDropOpen] = useState(false);
  const timerRef = useRef(null);

  const runner = PKG_TO_RUNNER[packageManager] ?? 'npx';
  const command = COMMANDS[cliTool]?.(runner) ?? COMMANDS.shadcn(runner);

  const copy = useCallback(() => {
    navigator.clipboard.writeText(command);
    setCopied(true);
    clearTimeout(timerRef.current);
    timerRef.current = setTimeout(() => setCopied(false), 2000);
  }, [command]);

  return (
    <section className="ln-qs-section">
      <div className="ln-qs-inner">
        <motion.div
          className="ln-qs-header"
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-60px' }}
          transition={{ duration: 0.5, ease: [0.21, 0.47, 0.32, 0.98] }}
        >
          <h2 className="ln-qs-title">Get started in seconds</h2>
        </motion.div>

        <motion.div
          className="ln-qs-terminal-wrap"
          initial={{ opacity: 0, y: 24 }}
          whileInView={{ opacity: 1, y: 0 }}
          viewport={{ once: true, margin: '-60px' }}
          transition={{ duration: 0.5, delay: 0.07, ease: [0.21, 0.47, 0.32, 0.98] }}
        >
          <div className="ln-qs-glow" />
          <div className="ln-qs-terminal">
          {/* tab bar with tool selector + runner dropdown */}
          <div className="ln-qs-tab-bar">
            <div className="ln-qs-tabs">
              {TOOLS.map((t) => (
                <button
                  key={t}
                  className={`ln-qs-tab${cliTool === t ? ' ln-qs-tab--active' : ''}`}
                  onClick={() => setCliTool(t)}
                >
                  {t}
                </button>
              ))}
            </div>

            <div className="ln-qs-tab-bar-right">
              <div className="ln-qs-runner-dropdown">
                <button
                  className="ln-qs-runner-trigger"
                  onClick={() => setDropOpen((v) => !v)}
                >