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.
10 lines • 3.03 kB
JavaScript
;
"use client";
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const utils_1 = require("@/components/lib/utils"); // Optional: For class merging utility
const GlassFolder = ({ icon, className }) => {
return ((0, jsx_runtime_1.jsx)("section", { className: (0, utils_1.cn)("relative group flex flex-col items-center justify-center", className), children: (0, jsx_runtime_1.jsxs)("div", { className: "relative w-60 h-40 cursor-pointer origin-bottom [perspective:1500px] z-10", children: [(0, jsx_runtime_1.jsx)("div", { className: "bg-primarylw/30 backdrop-blur-md w-full h-full origin-top rounded-2xl rounded-tl-none \r\n group-hover:shadow-[0_20px_40px_rgba(0,0,0,.2)] transition-all ease duration-300 relative \r\n after:absolute after:content-[''] after:bottom-[99%] after:left-0 after:w-20 after:h-4 after:bg-primarylw/30 after:backdrop-blur-md after:rounded-t-2xl \r\n before:absolute before:content-[''] before:-top-[15px] before:left-[75.5px] before:w-4 before:h-4 before:bg-primarylw/30 before:backdrop-blur-md before:[clip-path:polygon(0_35%,0%_100%,50%_100%);]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-1 bg-[color-mix(in_srgb,var(--primarylw)_10%,transparent)] backdrop-blur-md rounded-2xl transition-all ease duration-300 origin-bottom select-none group-hover:[transform:rotateX(-20deg)]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-1 bg-[color-mix(in_srgb,var(--primarylw)_10%,transparent)] backdrop-blur-md rounded-2xl transition-all ease duration-300 origin-bottom group-hover:[transform:rotateX(-30deg)]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-1 bg-[color-mix(in_srgb,var(--primarylw)_10%,transparent)] backdrop-blur-md rounded-2xl transition-all ease duration-300 origin-bottom group-hover:[transform:rotateX(-38deg)]" }), (0, jsx_runtime_1.jsx)("div", { className: "absolute bottom-0 bg-[color-mix(in_srgb,var(--primarylw)_20%,transparent)] backdrop-blur-md w-full h-[156px] rounded-2xl rounded-tr-none \r\n after:absolute after:content-[''] after:bottom-[99%] after:right-0 after:w-[146px] after:h-[16px] after:bg-[color-mix(in_srgb,var(--primarylw)_20%,transparent)] after:backdrop-blur-md after:rounded-t-2xl \r\n before:absolute before:content-[''] before:-top-[10px] before:right-[142px] before:size-3 before:bg-[color-mix(in_srgb,var(--primarylw)_20%,transparent)] before:backdrop-blur-md before:[clip-path:polygon(100%_14%,50%_100%,100%_100%);] \r\n transition-all ease duration-300 origin-bottom flex items-center justify-center \r\n group-hover:shadow-[inset_0_20px_40px_rgba(100,149,237,0.4),inset_0_-20px_40px_rgba(65,105,225,0.3)] \r\n group-hover:[transform:rotateX(-46deg)_translateY(1px)]", children: (0, jsx_runtime_1.jsx)("div", { className: "text-foreground text-4xl", children: icon }) })] }) }));
};
exports.default = GlassFolder;
//# sourceMappingURL=glass-folder.js.map