gamma-help-box
Version:
Gamma Help Box is a React component that provides a floating help widget for customer support, built with framer-motion for animations.
46 lines (45 loc) • 2.67 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { motion } from 'framer-motion';
import { useState } from 'react';
const containerVariants = {
collapsed: {
width: 120,
height: 40,
transition: {
type: 'spring',
damping: 30,
stiffness: 350,
},
},
expanded: {
width: 300,
height: 320,
transition: {
type: 'spring',
damping: 30,
stiffness: 350,
staggerChildren: 0.1,
delayChildren: 0.2,
},
},
};
const itemVariants = {
collapsed: { opacity: 0, y: 20 },
expanded: {
opacity: 1,
y: 0,
transition: {
type: 'spring',
stiffness: 200,
damping: 15,
},
},
};
const HelpBox = ({ items, title = 'Need Help?' }) => {
const [isExpanded, setIsExpanded] = useState(false);
return (_jsx(motion.div, { initial: false, animate: isExpanded ? 'expanded' : 'collapsed', children: _jsx(motion.div, { className: 'bg-white rounded-xl shadow-lg overflow-hidden border border-gray-200', variants: containerVariants, children: isExpanded ? (_jsxs("div", { className: 'p-4', children: [_jsxs("div", { className: 'flex justify-between items-center mb-4', children: [_jsx(motion.h3, { className: 'text-lg font-semibold text-gray-800', initial: { opacity: 0, y: -10 }, animate: { opacity: 1, y: 0 }, transition: { delay: 0.1 }, children: "Need Help?" }), _jsx(motion.button, { onClick: () => setIsExpanded(false), className: 'text-gray-500 hover:text-gray-700', whileHover: { scale: 1.1 }, whileTap: { scale: 0.95 }, children: "\u2715" })] }), _jsx(motion.div, { className: 'space-y-3 ', children: items?.map((option, index) => (_jsxs(motion.div, { className: 'flex items-center p-3 rounded-lg hover:bg-gray-50 cursor-pointer border border-gray-100', variants: itemVariants, whileHover: { scale: 1.02 }, whileTap: { scale: 0.98 }, custom: index, onClick: option.onPress, children: [_jsx("span", { className: 'text-2xl mr-3', children: option.icon }), _jsxs("div", { children: [_jsx("p", { className: 'font-medium text-gray-800', children: option.title }), _jsx("p", { className: 'text-sm text-gray-500', children: option.description })] })] }, option.title))) })] })) : (_jsx(motion.button, { onClick: () => setIsExpanded(true), className: 'w-full h-full flex items-center justify-center', whileHover: { scale: 1.05 }, whileTap: {
scale: 0.95,
}, children: _jsx("span", { className: 'font-medium text-gray-700', children: title }) })) }) }));
};
export default HelpBox;