{"version":1,"id":"app-folders","framework":"next","kind":"block","files":[{"path":"src/blocks/gfa/app-folders.tsx","content":"\"use client\";\n\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { cn } from \"@/lib/utils\";\n\nexport type AppFolderIcon = {\n  src: string;\n  alt?: string;\n};\n\nexport type AppFolderProps = {\n  title: string;\n  count: number;\n  countLabel?: string;\n  href?: string;\n  icons?: AppFolderIcon[];\n  className?: string;\n};\n\n/** Mac App Store artwork (Apple CDN). */\nexport const MAC_APP_ICONS = {\n  pages:\n    \"https://is1-ssl.mzstatic.com/image/thumb/Purple221/v4/ab/38/be/ab38bece-90e5-a842-a091-b06d104e8b86/AppIcon-0-0-1x_U007epad-0-0-0-1-0-0-sRGB-0-0-85-220-0.png/512x512bb.jpg\",\n  numbers:\n    \"https://is1-ssl.mzstatic.com/image/thumb/Purple221/v4/3b/49/77/3b497790-0cb5-1ea3-37c3-83086adbfe3c/AppIcon-0-0-1x_U007epad-0-0-0-1-0-0-0-0-85-220-0.png/512x512bb.jpg\",\n  keynote:\n    \"https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/20/a6/27/20a62723-90b8-3bcc-b1aa-1ad19e039652/AppIcon-0-0-1x_U007epad-0-0-0-1-0-0-sRGB-0-0-85-220-0.png/512x512bb.jpg\",\n  finalCutPro:\n    \"https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/9d/95/ff/9d95ff81-dd3d-9075-149f-c6e2a4773ca0/AppIcon-0-85-220-0-6-0-0-2x-sRGB-0-0.png/512x512bb.png\",\n  garageBand:\n    \"https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/16/f6/b4/16f6b421-fcde-6356-4bde-616a6477bf7f/AppIcon-0-1x_U007epad-0-0-0-1-0-0-sRGB-85-220-0.png/512x512bb.jpg\",\n  logicPro:\n    \"https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/e1/c6/ad/e1c6ad4e-9edb-ad53-56fd-ed33ca82c3b9/AppIcon-0-85-220-0-6-0-0-2x-0-0-0-0-0.png/512x512bb.png\",\n  iMovie:\n    \"https://is1-ssl.mzstatic.com/image/thumb/Purple221/v4/62/16/21/621621f2-83f1-15c8-49e4-1b8fe602731f/iMovieAppIcon-0-85-220-0-6-0-0-2x-sRGB-0-0.png/512x512bb.png\",\n  pixelmatorPro:\n    \"https://is1-ssl.mzstatic.com/image/thumb/Purple211/v4/a1/e9/19/a1e91908-afba-6b30-d789-b03300253ab2/AppIcon-0-0-85-220-0-0-5-0-2x-0-0-0.png/512x512bb.png\",\n} as const;\n\nconst DEFAULT_ICONS: AppFolderIcon[] = [\n  { src: MAC_APP_ICONS.pages, alt: \"Pages\" },\n  { src: MAC_APP_ICONS.numbers, alt: \"Numbers\" },\n  { src: MAC_APP_ICONS.keynote, alt: \"Keynote\" },\n];\n\nexport function AppFolder({\n  title,\n  count,\n  countLabel,\n  href = \"#\",\n  icons = DEFAULT_ICONS,\n  className,\n}: AppFolderProps) {\n  const shown = icons.slice(0, 3);\n  const appsLabel =\n    countLabel ?? (count === 1 ? \"1 app\" : `${count} apps`);\n\n  return (\n    <Link\n      href={href}\n      aria-label={`${title}, ${appsLabel}`}\n      data-slot=\"app-folder\"\n      className={cn(\"group relative block w-full max-w-[17.5rem]\", className)}\n    >\n      <div className=\"relative\">\n        <div className=\"absolute -top-3 left-5 h-6 w-24 rounded-t-xl border border-b-0 border-zinc-200 bg-zinc-100 transition-transform duration-300 group-hover:-translate-y-0.5 dark:border-zinc-700 dark:bg-zinc-800\" />\n\n        <div\n          className={cn(\n            \"relative aspect-[4/3] w-full overflow-hidden rounded-2xl rounded-tl-xl\",\n            \"border border-zinc-200 bg-gradient-to-br from-zinc-100/90 to-zinc-200/80\",\n            \"transition-shadow duration-300 group-hover:shadow-xl\",\n            \"dark:border-zinc-700 dark:from-zinc-800/90 dark:to-zinc-900\",\n          )}\n        >\n          <div className=\"absolute inset-x-0 top-[42%] flex -translate-y-1/2 items-center justify-center\">\n            <div className=\"relative size-24\">\n              {shown[0] ? (\n                <div className=\"absolute inset-0 z-10 flex items-center justify-center transition-all duration-500 ease-out\">\n                  <div className=\"-translate-x-10 -translate-y-1 -rotate-[14deg] transition-all duration-500 ease-out group-hover:-translate-x-16 group-hover:-translate-y-2 group-hover:-rotate-[20deg]\">\n                    <FolderAppIcon icon={shown[0]} />\n                  </div>\n                </div>\n              ) : null}\n              {shown[1] ? (\n                <div className=\"absolute inset-0 z-20 flex items-center justify-center transition-all duration-500 ease-out\">\n                  <div className=\"translate-y-1 rotate-0 transition-all duration-500 ease-out group-hover:-translate-y-2\">\n                    <FolderAppIcon icon={shown[1]} />\n                  </div>\n                </div>\n              ) : null}\n              {shown[2] ? (\n                <div className=\"absolute inset-0 z-10 flex items-center justify-center transition-all duration-500 ease-out\">\n                  <div className=\"translate-x-10 -translate-y-1 rotate-[14deg] transition-all duration-500 ease-out group-hover:translate-x-16 group-hover:-translate-y-2 group-hover:rotate-[20deg]\">\n                    <FolderAppIcon icon={shown[2]} />\n                  </div>\n                </div>\n              ) : null}\n            </div>\n          </div>\n\n          <div className=\"absolute inset-x-0 bottom-0 flex flex-col items-center px-4 pb-5 text-center\">\n            <h2 className=\"text-[17px] font-semibold tracking-tight text-zinc-950 dark:text-zinc-50\">\n              {title}\n            </h2>\n            <span className=\"mt-1 text-[13px] text-zinc-500 dark:text-zinc-400\">\n              {appsLabel}\n            </span>\n          </div>\n        </div>\n      </div>\n    </Link>\n  );\n}\n\nfunction FolderAppIcon({ icon }: { icon: AppFolderIcon }) {\n  return (\n    <div className=\"relative size-20 overflow-hidden rounded-[22%] bg-transparent shadow-xl\">\n      <Image\n        src={icon.src}\n        alt={icon.alt ?? \"\"}\n        fill\n        sizes=\"80px\"\n        className=\"object-contain\"\n      />\n    </div>\n  );\n}\n"}],"meta":{"studioName":"GFA Development & Design Studio","siteUrl":"https://ui.gkhn.dev"}}