Card

import { Component, signal } from '@angular/core';
import { lucideCheck, lucideChevronDown } from '@ng-icons/lucide';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import {
  HlmCardContentDirective,
  HlmCardDescriptionDirective,
  HlmCardDirective,
  HlmCardFooterDirective,
  HlmCardHeaderDirective,
  HlmCardTitleDirective,
} from '@spartan-ng/ui-card-helm';
import { BrnCommandImports } from '@spartan-ng/ui-command-brain';
import { HlmCommandImports } from '@spartan-ng/ui-command-helm';
import { HlmIconComponent, provideIcons } from '@spartan-ng/ui-icon-helm';
import { HlmInputDirective } from '@spartan-ng/ui-input-helm';
import { HlmLabelDirective } from '@spartan-ng/ui-label-helm';
import { HlmPopoverContentDirective } from '@spartan-ng/ui-popover-helm';
import {
  BrnPopoverComponent,
  BrnPopoverContentDirective,
  BrnPopoverTriggerDirective,
} from '@spartan-ng/ui-popover-brain';

type Framework = { label: string; value: string };

@Component({
  selector: 'spartan-card-preview',
  standalone: true,
  imports: [
    BrnCommandImports,
    HlmCommandImports,
    HlmIconComponent,
    BrnPopoverComponent,
    BrnPopoverTriggerDirective,
    BrnPopoverContentDirective,
    HlmPopoverContentDirective,
    HlmCardDirective,
    HlmCardHeaderDirective,
    HlmCardTitleDirective,
    HlmCardDescriptionDirective,
    HlmCardContentDirective,
    HlmLabelDirective,
    HlmInputDirective,
    HlmCardFooterDirective,
    HlmButtonDirective,
  ],
  providers: [provideIcons({ lucideCheck, lucideChevronDown })],
  template: `
      <section class="w-80" hlmCard>
          <div hlmCardHeader>
              <h3 hlmCardTitle>Create new project</h3>
              <p hlmCardDescription>Deploy your new project in one-click.</p>
          </div>
          <p hlmCardContent>
              <label class="block" hlmLabel>
                  Name
                  <input class="mt-1.5 w-full" placeholder="Name of your project" hlmInput />
              </label>

              <label class="my-4 mb-1.5 block" hlmLabel>
                  Framework

                  <brn-popover [state]="state()" (stateChanged)="stateChanged($event)" sideOffset="5" closeDelay="100">
                      <button
                              class="w-full mt-1.5 justify-between"
                              id="edit-profile"
                              variant="outline"
                              brnPopoverTrigger
                              (click)="state.set('open')"
                              hlmBtn
                      >
                          {{ currentFramework() ? currentFramework()?.label : 'Select' }}
                          <hlm-icon size="sm" name="lucideChevronDown" />
                      </button>
                      <brn-cmd *brnPopoverContent="let ctx" hlmPopoverContent hlm class="w-[270px] p-0">
                          <div *brnCmdEmpty hlmCmdEmpty>No results found.</div>
                          <brn-cmd-list hlm>
                              <brn-cmd-group hlm>
                                  @for (framework of frameworks;track framework) {
                                      <button brnCmdItem [value]="framework.value"
                                              (selected)="commandSelected(framework)" hlm>
                                          <hlm-icon
                                                  [class.opacity-0]="currentFramework()?.value !== framework.value"
                                                  name="lucideCheck"
                                                  hlmCmdIcon
                                          />
                                          {{ framework.label }}
                                      </button>
                                  }
                              </brn-cmd-group>
                          </brn-cmd-list>
                      </brn-cmd>
                  </brn-popover>
              </label>
          </p>
          <div hlmCardFooter class="justify-between">
              <button hlmBtn variant="ghost">Cancel</button>
              <button hlmBtn>Create</button>
          </div>
      </section>
  `,
})
export class CardPreviewComponent {
  public frameworks = [
    {
      label: 'AnalogJs',
      value: 'analogjs'
    },
    {
      label: 'Angular',
      value: 'angular'
    },
    {
      label: 'Vue',
      value: 'vue'
    },
    {
      label: 'Nuxt',
      value: 'nuxt'
    },
    {
      label: 'React',
      value: 'react'
    },
    {
      label: 'NextJs',
      value: 'nextjs'
    }
  ];

  public currentFramework = signal<Framework | undefined>(undefined);
  public state = signal<'closed' | 'open'>('closed');

  stateChanged(state: 'open' | 'closed') {
    this.state.set(state);
  }

  commandSelected(framework: Framework) {
    this.state.set('closed');
    if (this.currentFramework()?.value === framework.value) {
      this.currentFramework.set(undefined);
    } else {
      this.currentFramework.set(framework);
    }
  }
}

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideBell, lucideCheck } from '@ng-icons/lucide';
import { HlmButtonDirective } from '@spartan-ng/ui-button-helm';
import {
    HlmCardContentDirective,
    HlmCardDescriptionDirective,
    HlmCardDirective,
    HlmCardFooterDirective,
    HlmCardHeaderDirective,
    HlmCardTitleDirective,
} from '@spartan-ng/ui-card-helm';
import { HlmIconComponent } from '@spartan-ng/ui-icon-helm';
import { HlmSwitchComponent } from '@spartan-ng/ui-switch-helm';

@Component({
    selector: 'spartan-card-notifications',
    standalone: true,
    imports: [
        HlmButtonDirective,
        HlmCardContentDirective,
        HlmCardDescriptionDirective,
        HlmCardDirective,
        HlmCardFooterDirective,
        HlmCardHeaderDirective,
        HlmCardTitleDirective,
        HlmIconComponent,
        HlmSwitchComponent,
    ],
    providers: [provideIcons({ lucideCheck, lucideBell })],
    template: `
        <section hlmCard>
            <div hlmCardHeader>
                <h3 hlmCardTitle>Notifications</h3>
                <p hlmCardDescription>You have 3 unread notifications</p>
            </div>
            <div hlmCardContent class="grid gap-4">
                <div class="flex items-center p-4 border border-border space-x-4 rounded-md">
                    <hlm-icon size="lg" name="lucideBell" />
                    <div class="flex-1 space-y-1">
                        <p class="text-sm font-medium leading-none">Push Notifications</p>
                        <p class="text-sm text-muted-foreground">Send notifications to device.</p>
                    </div>
                    <hlm-switch class="ml-4" aria-label="Enable notifications" />
                </div>
                <div>
                    @for (notification of notifications; track notification.id) {
                        <div class="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0">
                            <span class="flex w-2 h-2 rounded-full translate-y-1 bg-sky-500"></span>
                            <div class="space-y-1">
                                <p class="text-sm font-medium leading-none">{{ notification.title }}</p>
                                <p class="text-sm text-muted-foreground">{{ notification.description }}</p>
                            </div>
                        </div>
                    }
                </div>
            </div>
            <div hlmCardFooter class="justify-between">
                <button class="w-full" hlmBtn>
                    <hlm-icon size="sm" class="mr-2" name="lucideCheck" />
                    Mark all as read
                </button>
            </div>
        </section>
    `,
})
export class CardNotificationsComponent {
    protected notifications = [
        {
            id: 1,
            title: 'Your call has been confirmed.',
            description: '1 hour ago',
        },
        {
            id: 2,
            title: 'You have a new message!',
            description: '1 hour ago',
        },
        {
            id: 3,
            title: 'Your subscription is expiring soon!',
            description: '2 hours ago',
        },
    ];
}