dees-catalog/ts_web/elements/00group-appui/dees-appui-tabs/dees-appui-tabs.demo.ts

import { html, cssManager } from '@design.estate/dees-element';
import * as interfaces from '../../interfaces/index.js';

export const demoFunc = () => {
  const horizontalTabs: interfaces.IMenuItem[] = [
    { key: 'Home', iconName: 'lucide:home', action: () => console.log('Home clicked') },
    { key: 'Analytics Dashboard', iconName: 'lucide:lineChart', action: () => console.log('Analytics clicked') },
    { key: 'Reports', iconName: 'lucide:fileText', action: () => console.log('Reports clicked') },
    { key: 'User Settings', iconName: 'lucide:settings', action: () => console.log('Settings clicked') },
    { key: 'Help', iconName: 'lucide:helpCircle', action: () => console.log('Help clicked') },
  ];

  const verticalTabs: interfaces.IMenuItem[] = [
    { key: 'Profile', iconName: 'lucide:user', action: () => console.log('Profile clicked') },
    { key: 'Security', iconName: 'lucide:shield', action: () => console.log('Security clicked') },
    { key: 'Notifications', iconName: 'lucide:bell', action: () => console.log('Notifications clicked') },
    { key: 'Integrations', iconName: 'lucide:link', action: () => console.log('Integrations clicked') },
    { key: 'Advanced', iconName: 'lucide:code', action: () => console.log('Advanced clicked') },
  ];

  const noIndicatorTabs: interfaces.IMenuItem[] = [
    { key: 'All', action: () => console.log('All clicked') },
    { key: 'Active', action: () => console.log('Active clicked') },
    { key: 'Completed', action: () => console.log('Completed clicked') },
    { key: 'Archived', action: () => console.log('Archived clicked') },
  ];

  const demoContent = (text: string) => html`
    <div style="padding: 24px; color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};">
      ${text}
    </div>
  `;

  return html`
    <style>
      .demo-container {
        display: flex;
        flex-direction: column;
        gap: 32px;
        padding: 48px;
        background: ${cssManager.bdTheme('#f8f9fa', '#0a0a0a')};
        min-height: 100vh;
      }

      .section {
        background: ${cssManager.bdTheme('#ffffff', '#18181b')};
        border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
        border-radius: 8px;
        padding: 24px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      }

      .section-title {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 16px;
        color: ${cssManager.bdTheme('#09090b', '#fafafa')};
      }

      .two-column {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: 24px;
        align-items: start;
      }
    </style>
    <div class="demo-container">
      <div class="section">
        <div class="section-title">Horizontal Tabs with Animated Indicator</div>
        <dees-appui-tabs .tabs=${horizontalTabs}></dees-appui-tabs>
        ${demoContent('Select a tab to see the smooth sliding animation of the indicator. The indicator automatically adjusts its width to match the tab content with minimal padding.')}
      </div>

      <div class="section">
        <div class="section-title">Vertical Tabs Layout</div>
        <div class="two-column">
          <dees-appui-tabs .tabStyle=${'vertical'} .tabs=${verticalTabs}></dees-appui-tabs>
          ${demoContent('Vertical tabs work great for settings pages and navigation menus. The animated indicator smoothly transitions between selections.')}
        </div>
      </div>

      <div class="section">
        <div class="section-title">Without Indicator</div>
        <dees-appui-tabs .showTabIndicator=${false} .tabs=${noIndicatorTabs}></dees-appui-tabs>
        ${demoContent('Tabs can also be used without the animated indicator by setting showTabIndicator to false.')}
      </div>
    </div>
  `;
};