using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new MyComponent();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class MyComponent : IComponentWithID
    {
        public string Identifier => "component1";
        public string ContentHash => "hash_component1";

        public HTMLElement Render()
        {
            return TextBlock("My Component").Render();
        }
    }

    public class ObservableStackExample : IComponent
    {
        public HTMLElement Render()
        {
            // Create an observable list of components.
            var componentList = new ObservableList<IComponentWithID>();

            // Instantiate the ObservableStack with vertical orientation and debounce enabled.
            var observableStack = new ObservableStack(componentList, Stack.Orientation.Vertical, debounce: true)
                                    .AlignItemsCenter()
                                    .JustifyContent(ItemJustify.Center)
                                    .Padding("10px")
                                    .Background("lightgray");

            // Populate the list with components.
            componentList.ReplaceAll(new IComponentWithID[]
            {
                new MyComponent(),
                new MyComponent()
            });

            // Render the ObservableStack.
            return observableStack.Render();
        }
    }
}

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new MyComponent();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class MyComponent : IComponentWithID
    {
        public string Identifier => "component1";
        public string ContentHash => "hash_component1";

        public HTMLElement Render()
        {
            return TextBlock("My Component").Render();
        }
    }

    public class ObservableStackSample : IComponent
    {
        public HTMLElement Render()
        {
            // Create an observable list to hold components.
            var componentList = new ObservableList<IComponentWithID>();

            // Create the ObservableStack with vertical orientation and debounce enabled.
            var obsStack = new ObservableStack(componentList, Stack.Orientation.Vertical, debounce: true)
                            .AlignItemsCenter()
                            .JustifyContent(ItemJustify.Center)
                            .Padding("10px")
                            .Background("lightgray");

            // Populate the observable list with sample components.
            componentList.ReplaceAll(new IComponentWithID[]
            {
                new MyComponent(),
                new MyComponent()
            });

            // Render and append the ObservableStack to the document.
            return obsStack.Render();
        }
    }
}