lightswind
Version:
A collection of beautifully crafted React Components, Blocks & Templates for Modern Developers. Create stunning web applications effortlessly by using our 160+ professional and animated react components.
15 lines • 2.66 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = StackList;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const framer_motion_1 = require("framer-motion");
const lucide_react_1 = require("lucide-react");
function StackList({ items, initialVisible = 1, className = "", }) {
const [expanded, setExpanded] = (0, react_1.useState)(false);
const visibleItems = expanded ? items : items.slice(0, initialVisible);
return ((0, jsx_runtime_1.jsxs)("div", { className: `bg-transparent text-foreground mx-auto
overflow-hidden ${className}`, children: [(0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-4 relative", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { initial: false, children: visibleItems.map((item, index) => ((0, jsx_runtime_1.jsxs)(framer_motion_1.motion.div, { initial: { opacity: 0, y: 20, scale: 0.95 }, animate: { opacity: 1, y: 0, scale: 1 }, exit: { opacity: 0, y: -20, scale: 0.95 }, transition: { duration: 0.3, delay: index * 0.05 }, className: "flex items-center gap-4 p-4 bg-white dark:bg-neutral-900 border border-gray-200 dark:border-neutral-700 rounded-2xl shadow-sm", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-12 h-12 bg-background rounded-xl \r\n flex items-center justify-center text-foreground", children: item.icon }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs xl:text-sm font-semibold text-gray-900 dark:text-white", children: item.title }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs xl:text-sm text-gray-500 dark:text-gray-400", children: item.subtitle })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs xl:text-sm text-gray-400", children: item.date })] }, item.title + index))) }) }), items.length > initialVisible && ((0, jsx_runtime_1.jsxs)("button", { onClick: () => setExpanded((prev) => !prev), className: "mt-4 mx-auto flex items-center justify-center gap-2 px-4 py-2\r\n border border-gray-300 dark:border-gray-700 rounded-full \r\n text-xs xl:text-sm font-medium text-gray-600 dark:text-gray-300 transition \r\n hover:bg-gray-100 dark:hover:bg-neutral-800", children: [(0, jsx_runtime_1.jsx)("span", { children: expanded ? "Hide" : "Show All" }), (0, jsx_runtime_1.jsx)(framer_motion_1.motion.div, { animate: { rotate: expanded ? 180 : 0 }, transition: { duration: 0.3 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { className: "w-4 h-4" }) })] }))] }));
}
//# sourceMappingURL=stack-list.js.map