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.
9 lines (8 loc) • 2.77 kB
JavaScript
// @ts-nocheck
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../../lib/utils"; // Optional: For class merging utility
export const GlassFolder = ({ icon, className }) => {
return (_jsx("section", { className: cn("relative group flex flex-col items-center justify-center", className), children: _jsxs("div", { className: "relative w-60 h-40 cursor-pointer origin-bottom [perspective:1500px] z-10", children: [_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%);]" }), _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)]" }), _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)]" }), _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)]" }), _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: _jsx("div", { className: "text-foreground text-4xl", children: icon }) })] }) }));
};
export default GlassFolder;