| 85 | ] |
| 86 | |
| 87 | function SetupGuide() { |
| 88 | const [isOpen, setIsOpen] = useState(false) |
| 89 | |
| 90 | return ( |
| 91 | <div className="max-w-md mx-auto"> |
| 92 | <button |
| 93 | onClick={() => { |
| 94 | if (!isOpen) { |
| 95 | posthog.capture(AnalyticsEvent.FREEBUFF_HOME_INSTALL_GUIDE_EXPANDED) |
| 96 | } |
| 97 | setIsOpen(!isOpen) |
| 98 | }} |
| 99 | aria-expanded={isOpen} |
| 100 | className="flex items-center gap-2 mx-auto text-sm text-zinc-400 hover:text-acid-matrix transition-colors duration-200 cursor-pointer group" |
| 101 | > |
| 102 | <span>Install guide</span> |
| 103 | <motion.span |
| 104 | animate={{ rotate: isOpen ? 180 : 0 }} |
| 105 | transition={{ duration: 0.25 }} |
| 106 | > |
| 107 | <ChevronDown className="h-3.5 w-3.5" /> |
| 108 | </motion.span> |
| 109 | </button> |
| 110 | |
| 111 | <AnimatePresence initial={false}> |
| 112 | {isOpen && ( |
| 113 | <motion.div |
| 114 | initial={{ height: 0, opacity: 0 }} |
| 115 | animate={{ height: 'auto', opacity: 1 }} |
| 116 | exit={{ height: 0, opacity: 0 }} |
| 117 | transition={{ duration: 0.3, ease: 'easeInOut' }} |
| 118 | className="overflow-hidden" |
| 119 | > |
| 120 | <div className="mt-4 bg-zinc-900/60 border border-zinc-800 rounded-xl p-5 text-left"> |
| 121 | <ol className="space-y-4"> |
| 122 | {setupSteps.map((step, i) => ( |
| 123 | <li key={i} className="flex gap-3"> |
| 124 | <span className="flex-shrink-0 w-6 h-6 rounded-full bg-acid-matrix/10 border border-acid-matrix/30 flex items-center justify-center text-xs font-mono text-acid-matrix"> |
| 125 | {i + 1} |
| 126 | </span> |
| 127 | <div className="flex-1 min-w-0"> |
| 128 | <p className="text-sm font-medium text-white/90"> |
| 129 | {step.label} |
| 130 | </p> |
| 131 | {'description' in step && step.description && ( |
| 132 | <p className="text-xs text-zinc-500 mt-0.5"> |
| 133 | {step.description} |
| 134 | </p> |
| 135 | )} |
| 136 | {'command' in step && step.command && ( |
| 137 | <div className="mt-1.5 flex items-center gap-2 bg-zinc-800/60 border border-zinc-700/40 rounded-md px-3 py-1.5 hover:border-acid-matrix/30 transition-colors duration-200"> |
| 138 | <code className="font-mono text-xs text-white/80 flex-1 select-all"> |
| 139 | {step.command} |
| 140 | </code> |
| 141 | <CopyButton value={step.command} /> |
| 142 | </div> |
| 143 | )} |
| 144 | </div> |