Card

import { Component } from '@angular/core';
import { provideIcons } from '@ng-icons/core';
import { lucideCheck, lucideChevronDown } from '@ng-icons/lucide';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmCardImports } from '@spartan-ng/helm/card';
import { HlmInputImports } from '@spartan-ng/helm/input';
import { HlmLabelImports } from '@spartan-ng/helm/label';

@Component({
	selector: 'spartan-card-preview',
	imports: [HlmCardImports, HlmLabelImports, HlmInputImports, HlmButtonImports],
	providers: [provideIcons({ lucideCheck, lucideChevronDown })],
	host: {
		class: 'contents',
	},
	template: `
		<section class="w-full max-w-sm" hlmCard>
			<div hlmCardHeader>
				<h3 hlmCardTitle>Login to your account</h3>
				<p hlmCardDescription>Enter your email below to login to your account</p>

				<div hlmCardAction>
					<button hlmBtn variant="link">Sign Up</button>
				</div>
			</div>

			<div hlmCardContent>
				<form>
					<div class="flex flex-col gap-6">
						<div class="grid gap-2">
							<label hlmLabel for="email">Email</label>
							<input type="email" id="email" placeholder="m@example.com" required hlmInput />
						</div>

						<div class="grid gap-2">
							<div class="flex items-center">
								<label hlmLabel for="password">Password</label>
								<a href="#" class="ml-auto inline-block text-sm underline-offset-4 hover:underline">
									Forgot your password?
								</a>
							</div>
							<input type="password" id="password" hlmInput />
						</div>
					</div>
				</form>
			</div>

			<div hlmCardFooter class="flex-col gap-2">
				<button hlmBtn type="submit" class="w-full">Login</button>
				<button hlmBtn variant="outline" class="w-full">Login with Google</button>
			</div>
		</section>
	`,
})
export class CardPreview {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmCardImports } from '@spartan-ng/helm/card';

@Component({
	selector: 'spartan-card-size-preview',
	imports: [HlmCardImports, HlmButtonImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-card size="sm" class="mx-auto w-full max-w-sm">
			<hlm-card-header>
				<h3 hlmCardTitle>Small Card</h3>
				<p hlmCardDescription>This card uses the small size variant.</p>
			</hlm-card-header>
			<div hlmCardContent>
				<p>The card component supports a size prop that can be set to "sm" for a more compact appearance.</p>
			</div>
			<hlm-card-footer>
				<button hlmBtn variant="outline" size="sm" class="w-full">Action</button>
			</hlm-card-footer>
		</hlm-card>
	`,
})
export class CardSizePreview {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmBadgeImports } from '@spartan-ng/helm/badge';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmCardImports } from '@spartan-ng/helm/card';

@Component({
	selector: 'spartan-card-image-preview',
	imports: [HlmCardImports, HlmButtonImports, HlmBadgeImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<hlm-card class="relative mx-auto w-full max-w-sm pt-0">
			<div class="bg-primary absolute inset-0 z-30 aspect-video opacity-50 mix-blend-color"></div>
			<img
				src="https://images.unsplash.com/photo-1604076850742-4c7221f3101b?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
				alt="Event cover"
				class="relative z-20 aspect-video w-full object-cover brightness-60 grayscale dark:brightness-40"
			/>
			<hlm-card-header>
				<div hlmCardAction>
					<span hlmBadge variant="secondary">Featured</span>
				</div>
				<h3 hlmCardTitle>Design systems meetup</h3>
				<p hlmCardDescription>A practical talk on component APIs, accessibility, and shipping faster.</p>
			</hlm-card-header>
			<hlm-card-footer>
				<button hlmBtn class="w-full">View Event</button>
			</hlm-card-footer>
		</hlm-card>
	`,
})
export class CardImagePreview {}