{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slice-accordion",
  "type": "registry:block",
  "title": "Slice accordion",
  "description": "Slice accordion",
  "files": [
    {
      "path": "components/usages/sliceaccordionusage.tsx",
      "content": "import SliceAccordion from \"@/registry/open-source/slice-accordion\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<SliceAccordion />\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:block",
      "target": "~/example.tsx"
    },
    {
      "path": "components/usages/sliceaccordionusage.tsx",
      "content": "import SliceAccordion from \"@/registry/open-source/slice-accordion\";\r\n\r\nexport default function Usage() {\r\n\treturn (\r\n\t\t<div className=\"h-screen w-full flex items-center justify-center relative overflow-hidden bg-background\">\r\n\t\t\t<SliceAccordion />\r\n\t\t</div>\r\n\t);\r\n}\r\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/open-source/slice-accordion.tsx",
      "content": "import { useState } from \"react\";\r\n\r\ninterface OptionData {\r\n\tid: number;\r\n\tbackground: string;\r\n\ticon: string;\r\n\tmain: string;\r\n\tsub: string;\r\n\tdefaultColor: string;\r\n}\r\n\r\n// .options-container {\r\n//       display: flex;\r\n//       flex-direction: row;\r\n//       justify-content: center;\r\n//       align-items: center;\r\n//       overflow: hidden;\r\n//       height: 100vh;\r\n//       font-family: 'Roboto', sans-serif;\r\n//       transition: 0.25s;\r\n//       background: #f5f5f5;\r\n//     }\r\n\r\n//     .options-wrapper {\r\n//       display: flex;\r\n//       flex-direction: row;\r\n//       align-items: stretch;\r\n//       overflow: hidden;\r\n//       min-width: 600px;\r\n//       max-width: 900px;\r\n//       width: calc(100% - 100px);\r\n//       height: 400px;\r\n//     }\r\n\r\n//     .option-item {\r\n//       position: relative;\r\n//       overflow: hidden;\r\n//       min-width: 60px;\r\n//       margin: 10px;\r\n//       background-size: auto 120%;\r\n//       background-position: center;\r\n//       cursor: pointer;\r\n//       transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\r\n//       border-radius: 30px;\r\n//       grow: 1;\r\n//     }\r\n\r\n//     .option-item.active {\r\n//       grow: 10000;\r\n//       transform: scale(1);\r\n//       max-width: 600px;\r\n//       margin: 0px;\r\n//       border-radius: 40px;\r\n//       background-size: auto 100%;\r\n//     }\r\n\r\n//     .option-item.active .option-shadow {\r\n//       box-shadow: none;\r\n//     }\r\n\r\n//     .option-item:not(.active) .option-shadow {\r\n//       bottom: -40px;\r\n//       box-shadow: none;\r\n//     }\r\n\r\n//     .option-item.active .option-label {\r\n//       bottom: 20px;\r\n//       left: 20px;\r\n//     }\r\n\r\n//     .option-item:not(.active) .option-label {\r\n//       bottom: 10px;\r\n//       left: 10px;\r\n//     }\r\n\r\n//     .option-item.active .option-info > div {\r\n//       left: 0px;\r\n//       opacity: 1;\r\n//     }\r\n\r\n//     .option-item:not(.active) .option-info > div {\r\n//       left: 20px;\r\n//       opacity: 0;\r\n//     }\r\n\r\n//     .option-shadow {\r\n//       position: absolute;\r\n//       bottom: 0px;\r\n//       left: 0px;\r\n//       right: 0px;\r\n//       height: 120px;\r\n//       transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\r\n//     }\r\n\r\n//     .option-label {\r\n//       display: flex;\r\n//       position: absolute;\r\n//       right: 0px;\r\n//       height: 40px;\r\n//       transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);\r\n//     }\r\n\r\n//     .option-icon {\r\n//       display: flex;\r\n//       flex-direction: row;\r\n//       justify-content: center;\r\n//       align-items: center;\r\n//       min-width: 40px;\r\n//       max-width: 40px;\r\n//       height: 40px;\r\n//       border-radius: 100%;\r\n//       background-color: white;\r\n//     }\r\n\r\n//     .option-info {\r\n//       display: flex;\r\n//       flex-direction: column;\r\n//       justify-content: center;\r\n//       margin-left: 10px;\r\n//       color: white;\r\n//       white-space: pre;\r\n//     }\r\n\r\n//     .option-info > div {\r\n//       position: relative;\r\n//       transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity 0.5s ease-out;\r\n//     }\r\n\r\n//     .option-main {\r\n//       font-weight: bold;\r\n//       font-size: 1.2rem;\r\n//     }\r\n\r\n//     .option-sub {\r\n//       transition-delay: 0.1s;\r\n//     }\r\n\r\n//     .inactive-options {\r\n//       display: none;\r\n//     }\r\n\r\n//     /* Tablet and Mobile Responsive Styles */\r\n//     @media screen and (max-width: 1024px) {\r\n//       .options-container {\r\n//         padding: 20px;\r\n//         height: auto;\r\n//         min-height: 100vh;\r\n//         flex-direction: column;\r\n//       }\r\n\r\n//       .options-wrapper {\r\n//         display: flex;\r\n//         flex-direction: column;\r\n//         min-width: auto;\r\n//         max-width: none;\r\n//         width: 100%;\r\n//         height: auto;\r\n//         align-items: center;\r\n//       }\r\n\r\n//       /* Active option takes full width and proper height */\r\n//       .option-item.active {\r\n//         display: block;\r\n//         width: 100%;\r\n//         max-width: 500px;\r\n//         height: 300px;\r\n//         margin: 0 0 30px 0;\r\n//         border-radius: 25px;\r\n//         background-size: cover;\r\n//         grow: 0;\r\n//         transform: none;\r\n//       }\r\n\r\n//       /* Ensure content is in bottom left */\r\n//       .option-item.active .option-label {\r\n//         bottom: 25px;\r\n//         left: 25px;\r\n//         right: auto;\r\n//         height: 40px;\r\n//       }\r\n\r\n//       .option-item.active .option-info > div {\r\n//         left: 0px;\r\n//         opacity: 1;\r\n//       }\r\n\r\n//       /* Hide inactive options from normal flow and show as icons */\r\n//       .option-item:not(.active) {\r\n//         display: none;\r\n//       }\r\n\r\n//       /* Show inactive options as circular icons */\r\n//       .inactive-options {\r\n//         display: flex;\r\n//         justify-content: center;\r\n//         flex-wrap: wrap;\r\n//         gap: 15px;\r\n//         width: 100%;\r\n//         max-width: 500px;\r\n//       }\r\n\r\n//       .inactive-option {\r\n//         width: 70px;\r\n//         height: 70px;\r\n//         border-radius: 50%;\r\n//         background-size: cover;\r\n//         background-position: center;\r\n//         position: relative;\r\n//         cursor: pointer;\r\n//         transition: transform 0.3s ease;\r\n//         overflow: hidden;\r\n//       }\r\n\r\n//       .inactive-option::before {\r\n//         content: '';\r\n//         position: absolute;\r\n//         top: 0;\r\n//         left: 0;\r\n//         right: 0;\r\n//         bottom: 0;\r\n//         background: rgba(0, 0, 0, 0.3);\r\n//         border-radius: 50%;\r\n//       }\r\n\r\n//       .inactive-option-inner {\r\n//         position: absolute;\r\n//         top: 50%;\r\n//         left: 50%;\r\n//         transform: translate(-50%, -50%);\r\n//         background: white;\r\n//         width: 40px;\r\n//         height: 40px;\r\n//         border-radius: 50%;\r\n//         display: flex;\r\n//         align-items: center;\r\n//         justify-content: center;\r\n//         font-size: 18px;\r\n//         z-index: 1;\r\n//       }\r\n//     }\r\n\r\n//     /* Mobile specific adjustments */\r\n//     @media screen and (max-width: 768px) {\r\n//       .option-item.active {\r\n//         height: 250px;\r\n//         border-radius: 20px;\r\n//         max-width: 400px;\r\n//       }\r\n\r\n//       .option-item.active .option-label {\r\n//         bottom: 20px;\r\n//         left: 20px;\r\n//       }\r\n\r\n//       .inactive-option {\r\n//         width: 60px;\r\n//         height: 60px;\r\n//       }\r\n\r\n//       .inactive-option-inner {\r\n//         width: 35px;\r\n//         height: 35px;\r\n//         font-size: 16px;\r\n//       }\r\n//     }\r\n\r\n//     /* Small mobile adjustments */\r\n//     @media screen and (max-width: 480px) {\r\n//       .option-item.active {\r\n//         height: 220px;\r\n//         border-radius: 18px;\r\n//       }\r\n\r\n//       .option-item.active .option-label {\r\n//         bottom: 18px;\r\n//         left: 18px;\r\n//       }\r\n\r\n//       .option-main {\r\n//         font-size: 1.1rem;\r\n//       }\r\n\r\n//       .inactive-option {\r\n//         width: 50px;\r\n//         height: 50px;\r\n//       }\r\n\r\n//       .inactive-option-inner {\r\n//         width: 30px;\r\n//         height: 30px;\r\n//         font-size: 14px;\r\n//       }\r\n//     }\r\n\r\nconst SliceAccordion = () => {\r\n\tconst [activeOption, setActiveOption] = useState<number>(0);\r\n\r\n\tconst optionsData: OptionData[] = [\r\n\t\t{\r\n\t\t\tid: 0,\r\n\t\t\tbackground: \"/itjustworks.jpg\",\r\n\t\t\ticon: \"fas fa-glasses\",\r\n\t\t\tmain: \"cool cat\",\r\n\t\t\tsub: \"living the sunglasses life\",\r\n\t\t\tdefaultColor: \"#ED5565\",\r\n\t\t},\r\n\t\t{\r\n\t\t\tid: 1,\r\n\t\t\tbackground: \"/itjustworks.jpg\",\r\n\t\t\ticon: \"fas fa-sun\",\r\n\t\t\tmain: \"poolside vibes\",\r\n\t\t\tsub: \"summer hat game strong\",\r\n\t\t\tdefaultColor: \"#FC6E51\",\r\n\t\t},\r\n\t\t{\r\n\t\t\tid: 2,\r\n\t\t\tbackground: \"/itjustworks.jpg\",\r\n\t\t\ticon: \"fas fa-box\",\r\n\t\t\tmain: \"box explorer\",\r\n\t\t\tsub: \"if i fits, i sits\",\r\n\t\t\tdefaultColor: \"#FFCE54\",\r\n\t\t},\r\n\t\t{\r\n\t\t\tid: 3,\r\n\t\t\tbackground: \"/itjustworks.jpg\",\r\n\t\t\ticon: \"fas fa-cookie-bite\",\r\n\t\t\tmain: \"snack time\",\r\n\t\t\tsub: \"nom nom nom\",\r\n\t\t\tdefaultColor: \"#2ECC71\",\r\n\t\t},\r\n\t\t{\r\n\t\t\tid: 4,\r\n\t\t\tbackground: \"/itjustworks.jpg\",\r\n\t\t\ticon: \"fas fa-star\",\r\n\t\t\tmain: \"cosmic kitty\",\r\n\t\t\tsub: \"exploring the universe\",\r\n\t\t\tdefaultColor: \"#5D9CEC\",\r\n\t\t},\r\n\t];\r\n\r\n\tconst handleOptionClick = (optionId: number) => {\r\n\t\tsetActiveOption(optionId);\r\n\t};\r\n\treturn (\r\n\t\t<div className=\"options-container\">\r\n\t\t\t<div className=\"options-wrapper\">\r\n\t\t\t\t{optionsData.map((option) => (\r\n\t\t\t\t\t<div\r\n\t\t\t\t\t\tkey={option.id}\r\n\t\t\t\t\t\tclassName={`option-item ${activeOption === option.id ? \"active\" : \"\"}`}\r\n\t\t\t\t\t\tstyle={\r\n\t\t\t\t\t\t\t{\r\n\t\t\t\t\t\t\t\tbackgroundImage: `url(${option.background})`,\r\n\t\t\t\t\t\t\t\tbackgroundSize:\r\n\t\t\t\t\t\t\t\t\toption.id === 1 || option.id === 2 || option.id === 4\r\n\t\t\t\t\t\t\t\t\t\t? \"cover\"\r\n\t\t\t\t\t\t\t\t\t\t: undefined,\r\n\t\t\t\t\t\t\t\t\"--defaultBackground\": option.defaultColor,\r\n\t\t\t\t\t\t\t} as React.CSSProperties\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t\tonClick={() => handleOptionClick(option.id)}\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<div className=\"option-shadow\"></div>\r\n\t\t\t\t\t\t<div className=\"option-label\">\r\n\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\tclassName=\"option-icon\"\r\n\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\tcolor: \"#C0C0C0\",\r\n\t\t\t\t\t\t\t\t\ttextShadow:\r\n\t\t\t\t\t\t\t\t\t\t\"0 1px 2px rgba(0,0,0,0.3), 0 0 8px rgba(255,255,255,0.5)\",\r\n\t\t\t\t\t\t\t\t\tfilter: \"drop-shadow(0 0 2px rgba(255,255,255,0.8))\",\r\n\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<i className={option.icon}></i>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<div className=\"option-info\">\r\n\t\t\t\t\t\t\t\t<div className=\"option-main font-mono\">\r\n\t\t\t\t\t\t\t\t\t{option.main}\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t<div className=\"option-sub font-mono\">{option.sub}</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t))}\r\n\r\n\t\t\t\t<div className=\"inactive-options\">\r\n\t\t\t\t\t{optionsData.map(\r\n\t\t\t\t\t\t(option) =>\r\n\t\t\t\t\t\t\toption.id !== activeOption && (\r\n\t\t\t\t\t\t\t\t<div\r\n\t\t\t\t\t\t\t\t\tkey={option.id}\r\n\t\t\t\t\t\t\t\t\tclassName=\"inactive-option\"\r\n\t\t\t\t\t\t\t\t\tstyle={{\r\n\t\t\t\t\t\t\t\t\t\tbackgroundImage: `url(${option.background})`,\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t\tonClick={() => handleOptionClick(option.id)}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<div className=\"inactive-option-inner\">\r\n\t\t\t\t\t\t\t\t\t\t<i\r\n\t\t\t\t\t\t\t\t\t\t\tclassName={option.icon}\r\n\t\t\t\t\t\t\t\t\t\t\tstyle={{ color: option.defaultColor }}\r\n\t\t\t\t\t\t\t\t\t\t></i>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t)\r\n\t\t\t\t\t)}\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t);\r\n};\r\n\r\nexport default SliceAccordion;\r\n",
      "type": "registry:ui"
    }
  ]
}