{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tools-tab",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/tabs/tools-tab.tsx",
      "content": "// thanks to maximeheckel\n\nimport { TabsBtn, TabsContent, TabsProvider } from '@/components/ui/tab';\nimport Image from 'next/image';\nimport React, { useState } from 'react';\n\nfunction Tab() {\n  return (\n    <div className='border bg-white/10 dark:bg-black/40 backdrop-blur-xs rounded-md p-4  relative'>\n      <TabsProvider defaultValue={'design'}>\n        <div className='flex justify-center mt-2'>\n          <div className='flex items-center w-fit dark:bg-[#1d2025] bg-neutral-200 p-1 dark:text-white text-black rounded-md border'>\n            <TabsBtn value='design'>\n              <span className='relative z-2 uppercase'>design</span>\n            </TabsBtn>\n            <TabsBtn value='collaborate'>\n              <span className='relative z-2 uppercase'>collaborate</span>\n            </TabsBtn>\n            <TabsBtn value='share'>\n              <span className='relative z-2 uppercase'>share</span>\n            </TabsBtn>\n            <TabsBtn value='publish'>\n              <span className='relative z-2 uppercase'>publish</span>\n            </TabsBtn>\n          </div>\n        </div>\n\n        <TabsContent value='design'>\n          <div className='w-full'>\n            <Image\n              src={\n                'https://images.unsplash.com/photo-1506097425191-7ad538b29cef?q=80&w=1000&auto=format&fit=crop'\n              }\n              width={1000}\n              height={1000}\n              alt='preview_img'\n              className='w-[850px] object-cover h-full mx-auto rounded-md'\n            />\n          </div>\n        </TabsContent>\n        <TabsContent value='collaborate'>\n          <div className='w-full'>\n            <Image\n              src={\n                'https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=1000&auto=format&fit=crop'\n              }\n              width={1000}\n              height={1000}\n              alt='preview_img'\n              className='w-[850px] object-cover h-full mx-auto rounded-md'\n            />\n          </div>\n        </TabsContent>\n        <TabsContent value='share'>\n          <div className='w-full'>\n            <Image\n              src={\n                'https://images.unsplash.com/photo-1665470909901-162912ec16f7?q=80&w=1000&auto=format&fit=crop'\n              }\n              width={1000}\n              height={1000}\n              alt='preview_img'\n              className='w-[850px] object-cover h-full mx-auto rounded-md'\n            />\n          </div>\n        </TabsContent>\n        <TabsContent value='publish'>\n          <div className='w-full'>\n            <Image\n              src={\n                'https://images.unsplash.com/photo-1694022861804-840f61d1c452?q=80&w=1000&auto=format&fit=crop'\n              }\n              width={1000}\n              height={1000}\n              alt='preview_img'\n              className='w-[850px] object-cover h-full mx-auto rounded-md'\n            />\n          </div>\n        </TabsContent>\n      </TabsProvider>\n    </div>\n  );\n}\n\nexport default Tab;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}