decePubClient/Components/Styleguide/FeedbackSection.razor

@* Styleguide: every Feedback component (Components/Daisy/Feedback) with its main variants. *@
<div class="grid gap-8 lg:grid-cols-2">
	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DAlert</h3>
		<DAlert><Icon><i class="ion-md-information-circle text-xl"></i></Icon><ChildContent>Default alert</ChildContent></DAlert>
		@foreach (var (color, icon) in alertColors)
		{
			<DAlert Color="color"><Icon><i class="@icon text-xl"></i></Icon><ChildContent>@color alert</ChildContent></DAlert>
		}
		@foreach (var variant in new[] { DAlertVariant.Soft, DAlertVariant.Outline, DAlertVariant.Dash })
		{
			<div class="grid gap-2 sm:grid-cols-2">
				<DAlert Variant="variant">@variant</DAlert>
				@foreach (var (color, _) in alertColors)
				{
					<DAlert Variant="variant" Color="color">@variant @color</DAlert>
				}
			</div>
		}
		<DAlert Direction="DDirection.Vertical" Color="DAlertColor.Info">
			<Icon><i class="ion-md-information-circle text-xl"></i></Icon>
			<ChildContent>Vertical, with actions</ChildContent>
			<Actions><DButton Size="DSize.Sm">Deny</DButton><DButton Size="DSize.Sm" Color="DColor.Primary">Accept</DButton></Actions>
		</DAlert>
		@if (alertDismissed)
		{
			<DButton Size="DSize.Sm" class="self-start" OnClick="() => alertDismissed = false">Bring the alert back</DButton>
		}
		else
		{
			<DAlert Responsive="true">
				<Icon><i class="ion-md-notifications text-xl"></i></Icon>
				<ChildContent>
					<h4 class="font-bold">Responsive, with a heading</h4>
					<div class="text-xs">Vertical below sm, horizontal above. Dismiss me.</div>
				</ChildContent>
				<Actions><DButton Size="DSize.Sm" OnClick="() => alertDismissed = true">Dismiss</DButton></Actions>
			</DAlert>
		}
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DLoading</h3>
		<div class="flex flex-wrap items-center gap-4">
			@foreach (var variant in Enum.GetValues<DLoadingVariant>())
			{
				<DLoading Variant="variant" Size="DSize.Lg" title="@variant.ToString()" />
			}
		</div>
		<div class="flex flex-wrap items-center gap-4">
			@foreach (var size in new[] { DSize.Xs, DSize.Sm, DSize.Md, DSize.Lg, DSize.Xl })
			{
				<DLoading Variant="DLoadingVariant.Dots" Size="size" />
			}
		</div>
		<div class="flex flex-wrap items-center gap-4">
			@foreach (var color in colors)
			{
				<DLoading Variant="DLoadingVariant.Ring" Color="color" title="@color.ToString()" />
			}
		</div>
		<DButton class="self-start" Disabled="true"><DLoading Size="DSize.Sm" /> Loading in a button</DButton>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DProgress</h3>
		<div class="flex flex-wrap items-center gap-2">
			<DButton Size="DSize.Sm" OnClick="() => progress = Math.Max(0, progress - 10)">−10</DButton>
			<DButton Size="DSize.Sm" OnClick="() => progress = Math.Min(100, progress + 10)">+10</DButton>
			<span class="text-sm">@progress%</span>
		</div>
		<DProgress Value="progress" />
		@for (var i = 0; i < colors.Length; i++)
		{
			<DProgress Value="10 + i * 12" Color="colors[i]" title="@colors[i].ToString()" />
		}
		<p class="text-xs opacity-60">Indeterminate (Value null)</p>
		<DProgress Color="DColor.Primary" />
		<DProgress Value="0.25" Max="1" Color="DColor.Accent" class="w-56" />
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DRadialProgress</h3>
		<div class="flex flex-wrap items-center gap-4">
			<DRadialProgress Value="progress" Color="DColor.Primary" />
			@foreach (var value in new[] { 0, 20, 60, 80, 100 })
			{
				<DRadialProgress Value="value" />
			}
		</div>
		<div class="flex flex-wrap items-center gap-4">
			@foreach (var color in colors)
			{
				<DRadialProgress Value="70" Color="color" Diameter="3.5rem" title="@color.ToString()" />
			}
		</div>
		<div class="flex flex-wrap items-center gap-4">
			<DRadialProgress Value="progress" Diameter="8rem" Thickness="2px" />
			<DRadialProgress Value="progress" Diameter="8rem" Thickness="1.5rem" Color="DColor.Secondary" />
			<DRadialProgress Value="progress" class="border-4 border-primary bg-primary text-primary-content" />
			<DRadialProgress Value="3" Max="4"><i class="ion-md-star text-2xl"></i></DRadialProgress>
		</div>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DSkeleton</h3>
		<div class="flex w-64 flex-col gap-4">
			<div class="flex items-center gap-4">
				<DSkeleton class="h-16 w-16 shrink-0 rounded-full" />
				<div class="flex flex-col gap-4">
					<DSkeleton class="h-4 w-20" />
					<DSkeleton class="h-4 w-28" />
				</div>
			</div>
			<DSkeleton class="h-32 w-full" />
		</div>
		<DSkeleton IsText="true">Loading data, please wait…</DSkeleton>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DToast</h3>
		<p class="text-xs opacity-60">Previews pinned with class="absolute" inside a box</p>
		<div class="relative h-48 overflow-hidden rounded-box border border-base-300">
			<DToast Horizontal="DToastHorizontal.Start" Vertical="DToastVertical.Top" class="absolute">
				<DAlert Color="DAlertColor.Info">Top start</DAlert>
			</DToast>
			<DToast Horizontal="DToastHorizontal.Center" Vertical="DToastVertical.Middle" class="absolute">
				<DAlert Color="DAlertColor.Success">Middle center</DAlert>
			</DToast>
			<DToast class="absolute">
				<DAlert Color="DAlertColor.Warning">Bottom end (default)</DAlert>
				<DAlert Color="DAlertColor.Error">Stacked</DAlert>
			</DToast>
		</div>
		<div class="flex flex-wrap items-center gap-2">
			<div class="join">
				@foreach (var horizontal in Enum.GetValues<DToastHorizontal>())
				{
					<DButton Size="DSize.Sm" class="join-item" Active="toastHorizontal == horizontal" OnClick="() => toastHorizontal = horizontal">@horizontal</DButton>
				}
			</div>
			<div class="join">
				@foreach (var vertical in Enum.GetValues<DToastVertical>())
				{
					<DButton Size="DSize.Sm" class="join-item" Active="toastVertical == vertical" OnClick="() => toastVertical = vertical">@vertical</DButton>
				}
			</div>
			<DButton Size="DSize.Sm" Color="DColor.Primary" OnClick="ShowToast">Show a toast</DButton>
		</div>
		<DToast Horizontal="toastHorizontal" Vertical="toastVertical" class="z-50">
			@foreach (var toast in toasts)
			{
				<DAlert @key="toast.Id" Color="toast.Color">
					<ChildContent>Toast #@toast.Id, gone in 3 s</ChildContent>
					<Actions><DButton Size="DSize.Xs" Variant="DButtonVariant.Ghost" aria-label="Close" OnClick="() => toasts.Remove(toast)"><i class="ion-md-close"></i></DButton></Actions>
				</DAlert>
			}
		</DToast>
	</section>

	<section class="flex flex-col gap-3">
		<h3 class="text-lg font-bold">DTooltip</h3>
		<div class="flex flex-wrap items-center gap-4 py-8">
			@foreach (var placement in Enum.GetValues<DTooltipPlacement>())
			{
				<DTooltip Tip="@placement.ToString()" Placement="placement">
					<DButton Size="DSize.Sm">@placement</DButton>
				</DTooltip>
			}
		</div>
		<div class="flex flex-wrap items-center gap-4 pt-8">
			@foreach (var color in colors)
			{
				<DTooltip Tip="@color.ToString()" Color="color" IsOpen="tooltipsOpen">
					<DButton Size="DSize.Sm" Color="color">@color</DButton>
				</DTooltip>
			}
		</div>
		<label class="flex items-center gap-2 text-sm">
			<input type="checkbox" class="checkbox checkbox-sm" @bind="tooltipsOpen" /> Force the colour tooltips open (IsOpen)
		</label>
		<div class="flex flex-wrap items-center gap-4 pt-10">
			@foreach (var align in Enum.GetValues<DTooltipAlign>())
			{
				<DTooltip Tip="@($"Aligned {align}, a longer tip")" Align="align" IsOpen="true">
					<DButton Size="DSize.Sm" class="w-28">@align</DButton>
				</DTooltip>
			}
		</div>
		<div class="pt-16">
			<DTooltip Color="DColor.Accent">
				<TipContent>
					<div class="flex items-center gap-2"><i class="ion-md-heart text-error"></i> <b>TipContent</b> markup</div>
				</TipContent>
				<ChildContent><DButton Size="DSize.Sm">Hover for markup</DButton></ChildContent>
			</DTooltip>
		</div>
	</section>
</div>

@code {
	static readonly DColor[] colors =
	{
		DColor.Neutral, DColor.Primary, DColor.Secondary, DColor.Accent, DColor.Info, DColor.Success, DColor.Warning, DColor.Error
	};

	static readonly (DAlertColor Color, string Icon)[] alertColors =
	{
		(DAlertColor.Info, "ion-md-information-circle"),
		(DAlertColor.Success, "ion-md-checkmark-circle"),
		(DAlertColor.Warning, "ion-md-warning"),
		(DAlertColor.Error, "ion-md-close-circle")
	};

	static readonly DAlertColor[] toastColors = { DAlertColor.Info, DAlertColor.Success, DAlertColor.Warning, DAlertColor.Error };

	record Toast(int Id, DAlertColor Color);

	readonly List<Toast> toasts = new();
	DToastHorizontal toastHorizontal;
	DToastVertical toastVertical;
	int toastCount;

	bool alertDismissed;
	int progress = 40;
	bool tooltipsOpen;

	// Blazor renders once the handler yields (toast shown) and again when it completes (toast gone).
	async Task ShowToast()
	{
		var toast = new Toast(++toastCount, toastColors[toastCount % toastColors.Length]);
		toasts.Add(toast);
		await Task.Delay(3000);
		toasts.Remove(toast);
	}
}