First blog ever!

export default function App({ isRow, children }: AppProps) {
    const [a, setA] = useState<string>("");
    const state = useZustandStore((state) => state.state);
    const updateState = useZustandStore((state) => state.updatedState);
    const btnRef = useRef<HTMLButtonElement>();
    return (
        <button
            ref={btnRef}
            className={cn(
                "flex",
                {
                    "flex-row": isRow,
                    "flex-column": isColumn
                }
            )}
            onClick={updatedState}
        >
            Click me! State = {}
            <ComponentWithState a={a} />
            {children}
        </button>
    );
}

<script lang="ts">
    import { state } from "$lib/store";
 
    export let isRow: boolean;
 
    let a = "";
 
    let btn: HTMLButtonElement;
 
    function updateState() {
        state.update((st) => /* update here */);
    }
</script>
 
<button
    bind:self={btn}
    class="flex"
    class:flex-row={isRow}
    class:flex-column={!isRow}
    on:click|once={updateState}
>
    Click me! State = {$state}
    <ComponentWithState {a} />
    <slot name="child1" />
</button>
 
<style lang="scss">
    /* if you don't use tailwind, use non-conflicted styles here */
</style>