tabler/preview/pages/tour.astro

---
import CardActions from '@ui/CardActions.astro'
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import Button from '@ui/Button.astro'
import ButtonList from '@ui/ButtonList.astro'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import Badge from '@ui/Badge.astro'
import Icon from '@ui/Icon.astro'
---

<DefaultLayout title="Driver Tour" pageHeader="Driver Tour" pageMenu="plugins.tour" pageLibs={['driver.js']}>
  <div class="row row-cards">
    <div class="col-12">
      <Card>
        <CardHeader title="Product Tour Example">
          <CardActions>
            <Button id="start-tour" text="Start Tour" icon="play" color="primary" element="button" />
          </CardActions>
        </CardHeader>
        <CardBody>
          <p>Click the "Start Tour" button to begin an interactive tour of this page. The tour will guide you through different elements and features.</p>
        </CardBody>
      </Card>
    </div>
    <div class="col-md-6">
      <Card id="tour-card-1">
        <CardHeader title="Welcome Section" />
        <CardBody>
          <p>This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.</p>
          <ButtonList>
            <Button text="Action Button" color="primary" element="button" />
            <Button text="Secondary" element="button" />
          </ButtonList>
        </CardBody>
      </Card>
    </div>

    <div class="col-md-6">
      <Card id="tour-card-2">
        <CardHeader title="Features Section" />
        <CardBody>
          <p>This card shows additional features and demonstrates the tour's ability to navigate between different elements.</p>
          <div class="form-selectgroup">
            <label class="form-selectgroup-item">
              <input type="radio" name="options" value="1" class="form-selectgroup-input" checked />
              <span class="form-selectgroup-label">Option 1</span>
            </label>
            <label class="form-selectgroup-item">
              <input type="radio" name="options" value="2" class="form-selectgroup-input" />
              <span class="form-selectgroup-label">Option 2</span>
            </label>
          </div>
        </CardBody>
      </Card>
    </div>
    <div class="col-12">
      <Card id="tour-card-3">
        <CardHeader title="Navigation Example" />
        <CardBody>
          <p>This is a full-width card that demonstrates how the tour works with larger elements.</p>
          <div class="table-responsive">
            <table class="table table-vcenter">
              <thead>
                <tr>
                  <th>Name</th>
                  <th>Status</th>
                  <th>Role</th>
                  <th class="w-1"></th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>John Doe</td>
                  <td><Badge text="Active" color="success" /></td>
                  <td>Developer</td>
                  <td>
                    <Button text="Edit" size="sm" href="#" />
                  </td>
                </tr>
                <tr>
                  <td>Jane Smith</td>
                  <td><Badge text="Pending" color="warning" /></td>
                  <td>Designer</td>
                  <td>
                    <Button text="Edit" size="sm" href="#" />
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </CardBody>
      </Card>
    </div>

    <div class="col-md-4">
      <Card id="tour-card-4">
        <CardBody class="text-center">
          <div class="mb-3">
            <Icon name="settings" size="48" />
          </div>
          <CardTitle>Settings</CardTitle>
          <p class="text-secondary">Configure your application settings here.</p>
        </CardBody>
      </Card>
    </div>

    <div class="col-md-4">
      <Card id="tour-card-5">
        <CardBody class="text-center">
          <div class="mb-3">
            <Icon name="users" size="48" />
          </div>
          <CardTitle>Users</CardTitle>
          <p class="text-secondary">Manage your team members and permissions.</p>
        </CardBody>
      </Card>
    </div>

    <div class="col-md-4">
      <Card id="tour-card-6">
        <CardBody class="text-center">
          <div class="mb-3">
            <Icon name="chart-bar" size="48" />
          </div>
          <CardTitle>Analytics</CardTitle>
          <p class="text-secondary">View your application statistics and reports.</p>
        </CardBody>
      </Card>
    </div>
  </div>

  <!-- BEGIN TOUR SCRIPT -->
  <script is:inline>
    document.addEventListener('DOMContentLoaded', function () {
      const driverObj = driver.js.driver({
        allowClose: true,
        overlayClickNext: true,
        showButtons: ['next', 'previous', 'close'],
        showProgress: true,
        steps: [
          {
            element: '#start-tour',
            popover: {
              title: 'Welcome to the Tour!',
              description: 'This button starts the interactive tour. Click it to begin exploring the page.',
              side: 'bottom',
              align: 'start',
            },
          },
          {
            element: '#tour-card-1',
            popover: {
              title: 'Welcome Section',
              description: 'This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.',
              side: 'right',
              align: 'start',
            },
          },
          {
            element: '#tour-card-2',
            popover: {
              title: 'Features Section',
              description: "This card shows additional features and demonstrates the tour's ability to navigate between different elements.",
              side: 'left',
              align: 'start',
            },
          },
          {
            element: '#tour-card-3',
            popover: {
              title: 'Data Table',
              description: 'This table shows how Driver.js works with larger elements. You can highlight entire sections of your page.',
              side: 'top',
              align: 'center',
            },
          },
          {
            element: '#tour-card-4',
            popover: {
              title: 'Settings Card',
              description: 'This card demonstrates how the tour works with smaller, centered elements.',
              side: 'top',
              align: 'center',
            },
          },
          {
            element: '#tour-card-5',
            popover: {
              title: 'Users Card',
              description: 'Another example card showing user management features.',
              side: 'top',
              align: 'center',
            },
          },
          {
            element: '#tour-card-6',
            popover: {
              title: 'Analytics Card',
              description: 'The final step of the tour. This card shows analytics features.',
              side: 'top',
              align: 'center',
            },
          },
        ],
      })

      const startButton = document.getElementById('start-tour')
      if (startButton) {
        startButton.addEventListener('click', function () {
          driverObj.drive()
        })
      }
    })
  </script>
  <!-- END TOUR SCRIPT -->
</DefaultLayout>