Onglets

::tabs
  ::div{label="PostgreSQL" icon="lucide:database"}
  ### Types de colonnes PostgreSQL

  ```ts
  import { integer, pgTable } from 'drizzle-orm/pg-core';

  export const table = pgTable('table', {
    int: integer('int')
  });
  ```
  ::
  ::div{label="MySQL"}
  ### Types de colonnes MySQL

  ```ts
  import { int, mysqlTable } from 'drizzle-orm/mysql-core';

  const table = mysqlTable('table', {
    int: int('int')
  });
  ```
  ::
  ::div{label="SQLite"}
  ### Types de colonnes SQLite

  ```ts
  import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';

  const table = sqliteTable('table', {
    id: integer('id')
  });

  // vous pouvez personnaliser le mode entier pour être number, boolean, timestamp, timestamp_ms
  integer('id', { mode: 'number' });
  integer('id', { mode: 'boolean' });
  integer('id', { mode: 'timestamp_ms' });
  integer('id', { mode: 'timestamp' }); // Date
  ```
  ::
::

::tabs{variant="card"}
  ::div{label="Onglet Carte"}
  ### Ceci est un onglet de style carte
  ::
  ::div{label="Onglet 2" icon="lucide:atom"}
  Ceci est l'Onglet #2
  ::
  ```ts [Onglet Code]
  console.log('Hello World!');
  ```
::

::tabs{variant="line"}
  ::div{label="Aperçu" class="border flex min-h-[200px] w-full justify-center p-10 items-center rounded-lg shadow-xs"}
    :badge[Badge]
  ::
  ::div{label="Code"}
    ```tsx
    import { Badge } from "@/components/ui/badge"

    export function BadgeDemo() {
      return <Badge>Badge</Badge>
    }
    ```
  ::
::

::tabs{variant="combobox" search-placeholder="Rechercher une base de données..." search-empty="Aucune base de données trouvée."}
  ::div{label="PostgreSQL"}
  ### Types de colonnes PostgreSQL

  ```ts
  import { integer, pgTable } from 'drizzle-orm/pg-core';

  export const table = pgTable('table', {
    int: integer('int')
  });
  ```
  ::
  ::div{label="MySQL"}
  ### Types de colonnes MySQL

  ```ts
  import { int, mysqlTable } from 'drizzle-orm/mysql-core';

  const table = mysqlTable('table', {
    int: int('int')
  });
  ```
  ::
  ::div{label="SQLite"}
  ### Types de colonnes SQLite

  ```ts
  import { integer, sqliteTable } from 'drizzle-orm/sqlite-core';

  const table = sqliteTable('table', {
    id: integer('id')
  });

  // vous pouvez personnaliser le mode entier pour être number, boolean, timestamp, timestamp_ms
  integer('id', { mode: 'number' });
  integer('id', { mode: 'boolean' });
  integer('id', { mode: 'timestamp_ms' });
  integer('id', { mode: 'timestamp' }); // Date
  ```
  ::
::

#### Portée 1
::tabs{variant="card" sync="your-scope-name"}
  ::div{label="Onglet Carte"}
  ### Ceci est un onglet de style carte
  ::
  ```ts [Onglet Code]
  console.log('Hello World!');
  ```
::
::tabs{variant="card" sync="your-scope-name"}
  ::div{label="Onglet Carte"}
  ### Ceci est un onglet de style carte
  ::
  ::div{label="Onglet 2" icon="lucide:atom"}
  Ceci est l'Onglet #2
  ::
  ```ts [Onglet Code]
  console.log('Hello World!');
  ```
::

#### Portée 2
::tabs{variant="line" sync="scope2"}
  ::div{label="Onglet Carte"}
  ### Ceci est un onglet de style carte
  ::
  ::div{label="Onglet 2" icon="lucide:atom"}
  Ceci est l'Onglet #2
  ::
  ```ts [Onglet Code]
  console.log('Hello World!');
  ```
::
::tabs{variant="separate" sync="scope2"}
  ::div{label="Onglet Carte"}
  ### Ceci est un onglet de style carte
  ::
  ::div{label="Onglet 2" icon="lucide:atom"}
  Ceci est l'Onglet #2
  ::
  ```ts [Onglet Code]
  console.log('Hello World!');
  ```
::