diff --git a/src/components/sections/hero/HeroVideoExpand.tsx b/src/components/sections/hero/HeroVideoExpand.tsx index e0e7f08..989907e 100644 --- a/src/components/sections/hero/HeroVideoExpand.tsx +++ b/src/components/sections/hero/HeroVideoExpand.tsx @@ -1,145 +1,107 @@ -import { useEffect, useRef, useState } from "react"; -import { AnimatePresence, motion, useScroll, useTransform } from "motion/react"; -import ImageOrVideo from "@/components/ui/ImageOrVideo"; -import AutoFillText from "@/components/ui/AutoFillText"; -import { useButtonClick } from "@/hooks/useButtonClick"; +import React, { useRef, useEffect, useState } from 'react'; +import { motion } from 'framer-motion'; +import { cn } from '@/utils/cn'; // Assuming this utility exists -const StaggerText = ({ text }: { text: string }) => ( - - {[...text].map((char, index) => ( - - {char} - - ))} - -); - -type HeroVideoExpandProps = { +interface HeroVideoExpandProps { title: string; - primaryButton: { text: string; href: string }; - secondaryButton: { text: string; href: string }; + description: string; + videoSrc: string; + thumbnailSrc?: string; + primaryButton?: { text: string; href: string }; + secondaryButton?: { text: string; href: string }; onComplete?: () => void; -} & ({ imageSrc: string; videoSrc?: never } | { videoSrc: string; imageSrc?: never }); + className?: string; +} const HeroVideoExpand = ({ title, + description, videoSrc, - imageSrc, + thumbnailSrc, primaryButton, secondaryButton, onComplete, + className, }: HeroVideoExpandProps) => { - const [showLoader, setShowLoader] = useState(true); - const [expanded, setExpanded] = useState(false); - const handlePrimaryClick = useButtonClick(primaryButton.href); - const handleSecondaryClick = useButtonClick(secondaryButton.href); + const videoRef = useRef(null); + const [isPlaying, setIsPlaying] = useState(false); + const [hasPlayedOnce, setHasPlayedOnce] = useState(false); - const sectionRef = useRef(null); - const { scrollYProgress } = useScroll({ - target: sectionRef, - offset: ["start start", "end start"], - }); - const videoY = useTransform(scrollYProgress, [0, 1], ["0px", "150px"]); - const videoScale = useTransform(scrollYProgress, [0, 1], [1, 1.1]); + const handlePlayClick = () => { + if (videoRef.current) { + videoRef.current.play(); + setIsPlaying(true); + setHasPlayedOnce(true); + } + }; useEffect(() => { - const expandTimer = setTimeout(() => setExpanded(true), 600); - const hideTimer = setTimeout(() => { - setShowLoader(false); - onComplete?.(); - }, 1500); - return () => { - clearTimeout(expandTimer); - clearTimeout(hideTimer); - }; - }, []); + const video = videoRef.current; + if (video) { + const handleEnded = () => { + setIsPlaying(false); + if (onComplete) { + onComplete(); + } + }; + video.addEventListener('ended', handleEnded); + return () => { + video.removeEventListener('ended', handleEnded); + }; + } + }, [onComplete]); return ( - <> - - {showLoader && ( - - - - - - )} - - -
- - - - -
- -
-
- - {title} - - -
- - - - - - - - - - -
+
+
-
- + {!hasPlayedOnce && ( + + )} + + )} + ); }; diff --git a/src/utils/resolve-icon.tsx b/src/utils/resolve-icon.tsx index 531a078..b09fb4a 100644 --- a/src/utils/resolve-icon.tsx +++ b/src/utils/resolve-icon.tsx @@ -1,21 +1,187 @@ -import { resolveIcon } from "./resolve-icon"; -import type { IconInput } from "./resolve-icon"; +import { + Activity, + ArrowRight, + Calculator, + Calendar, + Camera, + CheckCircle, + ChevronDown, + ChevronRight, + Circle, + Cloud, + Code, + CreditCard, + Database, + Diamond, + DollarSign, + Droplet, + Eye, + FileText, + Fingerprint, + FlaskConical, + Flower, + Footprints, + GalleryVertical, + Gem, + Gift, + Globe, + Hammer, + HardHat, + Heart, + HelpCircle, + Home, + Image, + Info, + Key, + Laptop, + LayoutGrid, + Leaf, + Lightbulb, + Link, + Loader, + Lock, + LucideIcon, + Mail, + MapPin, + Megaphone, + Menu, + MessageSquare, + Mic, + Minus, + Monitor, + Moon, + Mountain, + Package, + Pencil, + Phone, + PieChart, + Pin, + Play, + Plus, + Rocket, + Rss, + Scissors, + Search, + Send, + Settings, + Shield, + ShoppingCart, + Sparkle, + Sprout, + Star, + Sun, + Tablet, + Tag, + Target, + Terminal, + ThumbsUp, + TreeDeciduous, + TrendingUp, + Truck, + User, + Utensils, + Video, + Wallet, + Wand, + Wifi, + X, + Zap, +} from 'lucide-react'; -const DynamicIcon = ({ - icon, - size, - className, - strokeWidth, -}: { - icon: IconInput; - size?: number; - className?: string; - strokeWidth?: number; -}) => { - const Icon = resolveIcon(icon); - return ; -}; - -export default DynamicIcon; -export { resolveIcon }; -export type { IconInput }; +// eslint-disable-next-line react-refresh/only-export-components +export function resolveIcon(iconName: string | LucideIcon): LucideIcon { + if (typeof iconName === 'string') { + switch (iconName) { + case 'Activity': return Activity; + case 'ArrowRight': return ArrowRight; + case 'Calculator': return Calculator; + case 'Calendar': return Calendar; + case 'Camera': return Camera; + case 'CheckCircle': return CheckCircle; + case 'ChevronDown': return ChevronDown; + case 'ChevronRight': return ChevronRight; + case 'Circle': return Circle; + case 'Cloud': return Cloud; + case 'Code': return Code; + case 'CreditCard': return CreditCard; + case 'Database': return Database; + case 'Diamond': return Diamond; + case 'DollarSign': return DollarSign; + case 'Droplet': return Droplet; + case 'Eye': return Eye; + case 'FileText': return FileText; + case 'Fingerprint': return Fingerprint; + case 'FlaskConical': return FlaskConical; + case 'Flower': return Flower; + case 'Footprints': return Footprints; + case 'GalleryVertical': return GalleryVertical; + case 'Gem': return Gem; + case 'Gift': return Gift; + case 'Globe': return Globe; + case 'Hammer': return Hammer; + case 'HardHat': return HardHat; + case 'Heart': return Heart; + case 'HelpCircle': return HelpCircle; + case 'Home': return Home; + case 'Image': return Image; + case 'Info': return Info; + case 'Key': return Key; + case 'Laptop': return Laptop; + case 'LayoutGrid': return LayoutGrid; + case 'Leaf': return Leaf; + case 'Lightbulb': return Lightbulb; + case 'Link': return Link; + case 'Loader': return Loader; + case 'Lock': return Lock; + case 'Mail': return Mail; + case 'MapPin': return MapPin; + case 'Megaphone': return Megaphone; + case 'Menu': return Menu; + case 'MessageSquare': return MessageSquare; + case 'Mic': return Mic; + case 'Minus': return Minus; + case 'Monitor': return Monitor; + case 'Moon': return Moon; + case 'Mountain': return Mountain; + case 'Package': return Package; + case 'Pencil': return Pencil; + case 'Phone': return Phone; + case 'PieChart': return PieChart; + case 'Pin': return Pin; + case 'Play': return Play; + case 'Plus': return Plus; + case 'Rocket': return Rocket; + case 'Rss': return Rss; + case 'Scissors': return Scissors; + case 'Search': return Search; + case 'Send': return Send; + case 'Settings': return Settings; + case 'Shield': return Shield; + case 'ShoppingCart': return ShoppingCart; + case 'Sparkle': return Sparkle; + case 'Sprout': return Sprout; + case 'Star': return Star; + case 'Sun': return Sun; + case 'Tablet': return Tablet; + case 'Tag': return Tag; + case 'Target': return Target; + case 'Terminal': return Terminal; + case 'ThumbsUp': return ThumbsUp; + case 'TreeDeciduous': return TreeDeciduous; + case 'TrendingUp': return TrendingUp; + case 'Truck': return Truck; + case 'User': return User; + case 'Utensils': return Utensils; + case 'Video': return Video; + case 'Wallet': return Wallet; + case 'Wand': return Wand; + case 'Wifi': return Wifi; + case 'X': return X; + case 'Zap': return Zap; + default: + // console.warn(`Icon "${iconName}" not found, falling back to Circle.`); + return Circle; + } + } + return iconName; +}