Empty

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUpRight, lucideFolderCode } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';
import { HlmIcon } from '@spartan-ng/helm/icon';

@Component({
	selector: 'spartan-empty-preview',
	imports: [NgIcon, HlmIcon, HlmButton, HlmEmptyImports],
	providers: [provideIcons({ lucideFolderCode, lucideArrowUpRight })],
	template: `
		<div hlmEmpty>
			<div hlmEmptyHeader>
				<div hlmEmptyMedia variant="icon">
					<ng-icon name="lucideFolderCode" />
				</div>
				<div hlmEmptyTitle>No Projects Yet</div>
				<div hlmEmptyDescription>
					You haven&apos;t created any projects yet. Get started by creating your first project.
				</div>
			</div>
			<div hlmEmptyContent>
				<div class="flex gap-2">
					<button hlmBtn>Create Project</button>
					<button hlmBtn variant="outline">Import Project</button>
				</div>
			</div>
			<button hlmBtn class="text-muted-foreground" variant="link" size="sm">
				Learn More
				<ng-icon hlm name="lucideArrowUpRight" size="sm" />
			</button>
		</div>
	`,
})
export class EmptyPreview {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideCloud } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';

@Component({
	selector: 'spartan-empty-outline',
	imports: [NgIcon, HlmButton, HlmEmptyImports],
	providers: [provideIcons({ lucideCloud })],
	template: `
		<div hlmEmpty class="border border-dashed">
			<div hlmEmptyHeader>
				<div hlmEmptyMedia variant="icon">
					<ng-icon name="lucideCloud" />
				</div>
				<div hlmEmptyTitle>Cloud Storage Empty</div>
				<div hlmEmptyDescription>Upload files to your cloud storage to access them anywhere.</div>
			</div>
			<div hlmEmptyContent>
				<button hlmBtn variant="outline">Upload Files</button>
			</div>
		</div>
	`,
})
export class EmptyOutline {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBell, lucideRefreshCcw } from '@ng-icons/lucide';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';

@Component({
	selector: 'spartan-empty-background',
	imports: [NgIcon, HlmButton, HlmEmptyImports],
	providers: [provideIcons({ lucideBell, lucideRefreshCcw })],
	template: `
		<div hlmEmpty class="from-muted/50 to-background h-full w-full bg-gradient-to-b from-30%">
			<div hlmEmptyHeader>
				<div hlmEmptyMedia variant="icon">
					<ng-icon name="lucideBell" />
				</div>
				<div hlmEmptyTitle>No notifications</div>
				<div hlmEmptyDescription>You're all caught up. New notifications will appear here.</div>
			</div>
			<div hlmEmptyContent>
				<button hlmBtn variant="outline">
					<ng-icon hlm name="lucideRefreshCcw" />
					Refresh
				</button>
			</div>
		</div>
	`,
})
export class EmptyBackground {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideMessageCircle } from '@ng-icons/lucide';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';

@Component({
	selector: 'spartan-empty-avatar',
	imports: [NgIcon, HlmButton, HlmEmptyImports, HlmAvatarImports],
	providers: [provideIcons({ lucideMessageCircle })],
	template: `
		<div hlmEmpty>
			<div hlmEmptyHeader>
				<div hlmEmptyMedia>
					<hlm-avatar class="size-12">
						<img src="/assets/avatar.png" alt="spartan logo. Resembling a spartanic shield" hlmAvatarImage />
						<span class="bg-[#FD005B] text-white" hlmAvatarFallback>RG</span>
					</hlm-avatar>
				</div>
				<div hlmEmptyTitle>User Offline</div>
				<div hlmEmptyDescription>
					This user is currently offline. You can leave a message to notify them or try again later.
				</div>
			</div>
			<div hlmEmptyContent>
				<button hlmBtn size="sm">
					<ng-icon hlm name="lucideMessageCircle" />
					Leave message
				</button>
			</div>
		</div>
	`,
})
export class EmptyAvatar {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucidePlus } from '@ng-icons/lucide';
import { HlmAvatarImports } from '@spartan-ng/helm/avatar';
import { HlmButton } from '@spartan-ng/helm/button';
import { HlmEmptyImports } from '@spartan-ng/helm/empty';

@Component({
	selector: 'spartan-empty-avatar-group',
	imports: [NgIcon, HlmButton, HlmEmptyImports, HlmAvatarImports],
	providers: [provideIcons({ lucidePlus })],
	template: `
		<div hlmEmpty>
			<div hlmEmptyHeader>
				<div hlmEmptyMedia>
					<div
						class="[&>hlm-avatar]:ring-background flex -space-x-2 [&>hlm-avatar]:size-12 [&>hlm-avatar]:ring-2 [&>hlm-avatar]:grayscale"
					>
						<hlm-avatar class="size-12">
							<img src="https://picsum.photos/1000/800?grayscale&random=1" alt="avatar 1" hlmAvatarImage />
							<span class="bg-[#FD005B] text-white" hlmAvatarFallback>A1</span>
						</hlm-avatar>
						<hlm-avatar class="size-12">
							<img src="https://picsum.photos/1000/800?grayscale&random=2" alt="avatar 2" hlmAvatarImage />
							<span class="bg-[#FD005B] text-white" hlmAvatarFallback>A2</span>
						</hlm-avatar>
						<hlm-avatar class="size-12">
							<img src="https://picsum.photos/1000/800?grayscale&random=3" alt="avatar 3" hlmAvatarImage />
							<span class="bg-[#FD005B] text-white" hlmAvatarFallback>A3</span>
						</hlm-avatar>
					</div>
				</div>
				<div hlmEmptyTitle>No Team Members</div>
				<div hlmEmptyDescription>Invite your team to collaborate on this project.</div>
			</div>
			<div hlmEmptyContent>
				<button hlmBtn size="sm">
					<ng-icon hlm name="lucidePlus" />
					Invite Members
				</button>
			</div>
		</div>
	`,
})
export class EmptyAvatarGroup {}