Tabs

import {Tabs, TabsContent, TabsList, TabsTrigger} from '@stroeer-labs/design-library/react';

export function TabsDemo() {
    return (
        <div className="space-y-8">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Default</p>
                <Tabs defaultValue="account" className="w-80">
                    <TabsList aria-label="Account settings">
                        <TabsTrigger value="account">Account</TabsTrigger>
                        <TabsTrigger value="password">Password</TabsTrigger>
                    </TabsList>
                    <TabsContent value="account" className="text-sm text-muted-foreground">
                        Make changes to your account here.
                    </TabsContent>
                    <TabsContent value="password" className="text-sm text-muted-foreground">
                        Change your password here.
                    </TabsContent>
                </Tabs>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Line variant</p>
                <Tabs defaultValue="overview" className="w-80">
                    <TabsList variant="line" aria-label="Project sections">
                        <TabsTrigger value="overview">Overview</TabsTrigger>
                        <TabsTrigger value="activity">Activity</TabsTrigger>
                        <TabsTrigger value="settings">Settings</TabsTrigger>
                    </TabsList>
                    <TabsContent value="overview" className="text-sm text-muted-foreground">
                        Project overview.
                    </TabsContent>
                    <TabsContent value="activity" className="text-sm text-muted-foreground">
                        Recent activity.
                    </TabsContent>
                    <TabsContent value="settings" className="text-sm text-muted-foreground">
                        Project settings.
                    </TabsContent>
                </Tabs>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Vertical</p>
                <Tabs defaultValue="general" orientation="vertical" className="w-80">
                    <TabsList aria-label="Settings">
                        <TabsTrigger value="general">General</TabsTrigger>
                        <TabsTrigger value="security">Security</TabsTrigger>
                        <TabsTrigger value="advanced" disabled>
                            Advanced
                        </TabsTrigger>
                    </TabsList>
                    <TabsContent value="general" className="text-sm text-muted-foreground">
                        General settings.
                    </TabsContent>
                    <TabsContent value="security" className="text-sm text-muted-foreground">
                        Security settings.
                    </TabsContent>
                </Tabs>
            </div>
        </div>
    );
}

import '@angular/compiler';
import {Component} from '@angular/core';
import {HlmTabsImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-tabs-demo',
    standalone: true,
    imports: [HlmTabsImports],
    template: `
    <div class="space-y-8">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Default</p>
        <hlm-tabs tab="account" class="w-80">
          <hlm-tabs-list aria-label="Account settings">
            <button hlmTabsTrigger="account">Account</button>
            <button hlmTabsTrigger="password">Password</button>
          </hlm-tabs-list>
          <div hlmTabsContent="account" class="text-sm text-muted-foreground">Make changes to your account here.</div>
          <div hlmTabsContent="password" class="text-sm text-muted-foreground">Change your password here.</div>
        </hlm-tabs>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Line variant</p>
        <hlm-tabs tab="overview" class="w-80">
          <hlm-tabs-list variant="line" aria-label="Project sections">
            <button hlmTabsTrigger="overview">Overview</button>
            <button hlmTabsTrigger="activity">Activity</button>
            <button hlmTabsTrigger="settings">Settings</button>
          </hlm-tabs-list>
          <div hlmTabsContent="overview" class="text-sm text-muted-foreground">Project overview.</div>
          <div hlmTabsContent="activity" class="text-sm text-muted-foreground">Recent activity.</div>
          <div hlmTabsContent="settings" class="text-sm text-muted-foreground">Project settings.</div>
        </hlm-tabs>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Vertical</p>
        <hlm-tabs tab="general" orientation="vertical" class="w-80">
          <hlm-tabs-list aria-label="Settings">
            <button hlmTabsTrigger="general">General</button>
            <button hlmTabsTrigger="security">Security</button>
            <button hlmTabsTrigger="advanced" disabled>Advanced</button>
          </hlm-tabs-list>
          <div hlmTabsContent="general" class="text-sm text-muted-foreground">General settings.</div>
          <div hlmTabsContent="security" class="text-sm text-muted-foreground">Security settings.</div>
        </hlm-tabs>
      </div>
    </div>
  `,
})
export class TabsDemoComponent {}