Tabs

::tabs
  ::div{label="PostgreSQL" icon="lucide:database"}
  ### PostgreSQL column types

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

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

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

  const table = mysqlTable('table', {
    int: int('int')
  });
  ```
  ::
  ::div{label="SQLite"}
  ### SQLite column types

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

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

  // you can customize integer mode to be 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="Card Tab"}
  ### This is a card-style tab
  ::
  ::div{label="Tab 2" icon="lucide:atom"}
  This is Tab #2
  ::
  ```ts [Code Tab]
  console.log('Hello World!');
  ```
::

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

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

::tabs{variant="combobox" search-placeholder="Search database..." search-empty="No database found."}
  ::div{label="PostgreSQL"}
  ### PostgreSQL column types

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

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

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

  const table = mysqlTable('table', {
    int: int('int')
  });
  ```
  ::
  ::div{label="SQLite"}
  ### SQLite column types

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

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

  // you can customize integer mode to be number, boolean, timestamp, timestamp_ms
  integer('id', { mode: 'number' });
  integer('id', { mode: 'boolean' });
  integer('id', { mode: 'timestamp_ms' });
  integer('id', { mode: 'timestamp' }); // Date
  ```
  ::
::

#### Scope 1
::tabs{variant="card" sync="your-scope-name"}
  ::div{label="Card Tab"}
  ### This is a card-style tab
  ::
  ```ts [Code Tab]
  console.log('Hello World!');
  ```
::
::tabs{variant="card" sync="your-scope-name"}
  ::div{label="Card Tab"}
  ### This is a card-style tab
  ::
  ::div{label="Tab 2" icon="lucide:atom"}
  This is Tab #2
  ::
  ```ts [Code Tab]
  console.log('Hello World!');
  ```
::

#### Scope 2
::tabs{variant="line" sync="scope2"}
  ::div{label="Card Tab"}
  ### This is a card-style tab
  ::
  ::div{label="Tab 2" icon="lucide:atom"}
  This is Tab #2
  ::
  ```ts [Code Tab]
  console.log('Hello World!');
  ```
::
::tabs{variant="separate" sync="scope2"}
  ::div{label="Card Tab"}
  ### This is a card-style tab
  ::
  ::div{label="Tab 2" icon="lucide:atom"}
  This is Tab #2
  ::
  ```ts [Code Tab]
  console.log('Hello World!');
  ```
::