diff --git a/app/components/landing/CliCommand.tsx b/app/components/landing/CliCommand.tsx new file mode 100644 index 0000000..23ce999 --- /dev/null +++ b/app/components/landing/CliCommand.tsx @@ -0,0 +1,102 @@ +'use client'; + +import * as React from 'react'; +import { CopyButton } from '@/components/animate-ui/components/buttons/copy'; +import { cn } from '@/lib/utils'; +import { motion, AnimatePresence } from 'motion/react'; + +interface CliCommandProps { + className?: string; +} + +export function CliCommand({ className }: CliCommandProps) { + const [step, setStep] = React.useState<1 | 2>(1); + const timerRef = React.useRef(null); + + const commandText = step === 1 ? 'npm i create-flutterinit' : 'npx create-flutterinit'; + + const resetToStepOne = React.useCallback(() => { + setStep(1); + }, []); + + const startResetTimer = React.useCallback(() => { + if (timerRef.current) { + clearTimeout(timerRef.current); + } + timerRef.current = setTimeout(resetToStepOne, 8000); // Reset to step 1 after 8 seconds + }, [resetToStepOne]); + + React.useEffect(() => { + return () => { + if (timerRef.current) { + clearTimeout(timerRef.current); + } + }; + }, []); + + const handleCopiedChange = React.useCallback((copied: boolean) => { + if (copied) { + if (step === 1) { + setStep(2); + } + startResetTimer(); + } + }, [step, startResetTimer]); + + return ( +
+ {/* Terminal Icon */} + + + + + + {/* CLI Tag */} + + CLI + + + {/* Command Text with Animation */} +
+ + + {commandText} + + +
+ + {/* Separator */} +
+ + {/* Copy Button */} + +
+ ); +} + + diff --git a/app/components/landing/Footer.tsx b/app/components/landing/Footer.tsx index 2855c1a..9edb2c0 100644 --- a/app/components/landing/Footer.tsx +++ b/app/components/landing/Footer.tsx @@ -32,7 +32,7 @@ export function Footer() { }; return ( -