Todos os componentes

Tools Tab

Tools Tab é um componente de navegação para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

UI Layouts MIT navigation

O que é

Tools Tab é um componente de navegação para React e Tailwind CSS, da biblioteca UI Layouts, com licença MIT. Copia e cola no teu projeto.

Como usar

Abre o componente no catálogo, carrega em copiar, e cola no teu projeto. O prompt copiado leva o código e as regras para o teu agente o reproduzir sem alterar nada.

Abrir no catálogo

Cinco cópias grátis por mês. Sem cartão.

Não precisa de pacotes além do que o projeto já tem

Licença

Este componente vem de UI Layouts e é redistribuído sob a licença MIT, que permite uso comercial. O aviso de copyright viaja com o código.

Tools Tab

./registry/components/tabs/tools-tab.tsx
// thanks to maximeheckel

import { TabsBtn, TabsContent, TabsProvider } from '@/components/ui/tab';
import Image from 'next/image';
import React, { useState } from 'react';

function Tab() {
  return (
    <div className='border bg-white/10 dark:bg-black/40 backdrop-blur-xs rounded-md p-4  relative'>
      <TabsProvider defaultValue={'design'}>
        <div className='flex justify-center mt-2'>
          <div className='flex items-center w-fit dark:bg-[#1d2025] bg-neutral-200 p-1 dark:text-white text-black rounded-md border'>
            <TabsBtn value='design'>
              <span className='relative z-2 uppercase'>design</span>
            </TabsBtn>
            <TabsBtn value='collaborate'>
              <span className='relative z-2 uppercase'>collaborate</span>
            </TabsBtn>
            <TabsBtn value='share'>
              <span className='relative z-2 uppercase'>share</span>
            </TabsBtn>
            <TabsBtn value='publish'>
              <span className='relative z-2 uppercase'>publish</span>
            </TabsBtn>
          </div>
        </div>

        <TabsContent value='design'>
          <div className='w-full'>
            <Image
              src={
                'https://images.unsplash.com/photo-1506097425191-7ad538b29cef?q=80&w=1000&auto=format&fit=crop'
              }
              width={1000}
              height={1000}
              alt='preview_img'
              className='w-[850px] object-cover h-full mx-auto rounded-md'
            />
          </div>
        </TabsContent>
        <TabsContent value='collaborate'>
          <div className='w-full'>
            <Image
              src={
                'https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=1000&auto=format&fit=crop'
              }
              width={1000}
              height={1000}
              alt='preview_img'
              className='w-[850px] object-cover h-full mx-auto rounded-md'
            />
          </div>
        </TabsContent>
        <TabsContent value='share'>
          <div className='w-full'>
            <Image
              src={
                'https://images.unsplash.com/photo-1665470909901-162912ec16f7?q=80&w=1000&auto=format&fit=crop'
              }
              width={1000}
              height={1000}
              alt='preview_img'
              className='w-[850px] object-cover h-full mx-auto rounded-md'
            />
          </div>
        </TabsContent>
        <TabsContent value='publish'>
          <div className='w-full'>
            <Image
              src={
                'https://images.unsplash.com/photo-1694022861804-840f61d1c452?q=80&w=1000&auto=format&fit=crop'
              }
              width={1000}
              height={1000}
              alt='preview_img'
              className='w-[850px] object-cover h-full mx-auto rounded-md'
            />
          </div>
        </TabsContent>
      </TabsProvider>
    </div>
  );
}

export default Tab;

Componentes parecidos