mirror of
https://github.com/DavidHDev/vue-bits.git
synced 2026-03-07 22:49:31 -07:00
1 line
3.2 KiB
JSON
1 line
3.2 KiB
JSON
{"name":"GlassIcons","title":"GlassIcons","description":"Icon set styled with frosted glass blur.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n <div :class=\"['grid gap-[5em] grid-cols-2 md:grid-cols-3 mx-auto py-[3em] overflow-visible', className]\">\n <button\n v-for=\"(item, index) in items\"\n :key=\"index\"\n type=\"button\"\n :aria-label=\"item.label\"\n :class=\"[\n 'relative bg-transparent outline-none w-[4.5em] h-[4.5em] [perspective:24em] [transform-style:preserve-3d] [-webkit-tap-highlight-color:transparent] group',\n item.customClass\n ]\"\n >\n <span\n class=\"absolute top-0 left-0 w-full h-full rounded-[1.25em] block transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.83,0,0.17,1)] origin-[100%_100%] rotate-[15deg] group-hover:[transform:rotate(25deg)_translate3d(-0.5em,-0.5em,0.5em)]\"\n :style=\"{\n ...getBackgroundStyle(item.color),\n boxShadow: '0.5em -0.5em 0.75em hsla(223, 10%, 10%, 0.15)'\n }\"\n ></span>\n\n <span\n class=\"absolute top-0 left-0 w-full h-full rounded-[1.25em] bg-[hsla(0,0%,100%,0.15)] transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.83,0,0.17,1)] origin-[80%_50%] flex backdrop-blur-[0.75em] [-webkit-backdrop-filter:blur(0.75em)] transform group-hover:[transform:translateZ(2em)]\"\n :style=\"{\n boxShadow: '0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset'\n }\"\n >\n <span class=\"m-auto w-[1.5em] h-[1.5em] flex items-center justify-center\" aria-hidden=\"true\">\n <i :class=\"item.icon\" class=\"text-xl\"></i>\n </span>\n </span>\n\n <span\n class=\"absolute top-full left-0 right-0 text-center whitespace-nowrap leading-[2] text-base opacity-0 transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.83,0,0.17,1)] translate-y-0 group-hover:opacity-100 group-hover:[transform:translateY(20%)]\"\n >\n {{ item.label }}\n </span>\n </button>\n </div>\n</template>\n\n<script setup lang=\"ts\">\ninterface GlassIconsItem {\n icon: string;\n color: string;\n label: string;\n customClass?: string;\n}\n\ninterface Props {\n items: GlassIconsItem[];\n className?: string;\n}\n\nwithDefaults(defineProps<Props>(), {\n items: () => [],\n className: ''\n});\n\nconst gradientMapping: Record<string, string> = {\n blue: 'linear-gradient(hsl(223, 90%, 50%), hsl(208, 90%, 50%))',\n purple: 'linear-gradient(hsl(283, 90%, 50%), hsl(268, 90%, 50%))',\n red: 'linear-gradient(hsl(3, 90%, 50%), hsl(348, 90%, 50%))',\n indigo: 'linear-gradient(hsl(253, 90%, 50%), hsl(238, 90%, 50%))',\n orange: 'linear-gradient(hsl(43, 90%, 50%), hsl(28, 90%, 50%))',\n green: 'linear-gradient(hsl(123, 90%, 40%), hsl(108, 90%, 40%))'\n};\n\nconst getBackgroundStyle = (color: string): Record<string, string> => {\n if (gradientMapping[color]) {\n return { background: gradientMapping[color] };\n }\n return { background: color };\n};\n</script>\n","path":"GlassIcons/GlassIcons.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Components"]} |