Progress

import { component$, useStyles$ } from "@builder.io/qwik";
import { Progress } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);

  const progress = 30;

  return (
    <Progress.Root value={progress} class="progress">
      <Progress.Label class="progress-label">Export data {progress}%</Progress.Label>
      <Progress.Track class="progress-track">
        <Progress.Indicator class="progress-indicator" />
      </Progress.Track>
    </Progress.Root>
  );
});

// internal
import styles from "./progress.css?inline";

import { $, component$, useSignal, useStyles$ } from "@builder.io/qwik";
import { Progress } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);

  const fundraisingGoal = 10000;
  const amountRaised = 5000;
  const minGoal = useSignal(2000);

  const space = { margin: "1rem" };

  const incrementMin = $(() => {
    if (minGoal.value < amountRaised) minGoal.value += 500;
  });

  const decrementMin = $(() => {
    if (minGoal.value > 0) minGoal.value -= 500;
  });

  return (
    <div style={{ userSelect: "none", display: "contents" }}>
      <p style={space}>🎗️ Charity Fundraiser</p>

      <div>
        Initial funding:
        <button onClick$={decrementMin} style={space} type="button">
          -
        </button>
        <span>${minGoal.value}</span>
        <button onClick$={incrementMin} style={space} type="button">
          +
        </button>
      </div>

      <div style={space}>Amount raised: ${amountRaised}</div>

      <Progress.Root
        value={amountRaised}
        max={fundraisingGoal}
        min={minGoal.value}
        class="progress"
      >
        <Progress.Label class="progress-label">Fundraising Progress</Progress.Label>
        <Progress.Track class="progress-track">
          <Progress.Indicator class="progress-indicator" />
        </Progress.Track>
      </Progress.Root>

      <p style={space}>Funding goal: ${fundraisingGoal}</p>
    </div>
  );
});

// internal
import styles from "./progress.css?inline";

import { $, component$, useSignal, useStyles$ } from "@builder.io/qwik";
import { Progress } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);

  const initialNumTreats = 25;

  const totalTreats = useSignal(initialNumTreats);
  const treatsEaten = 20;

  const space = { margin: "1rem" };

  const increment = $(() => totalTreats.value++);
  const decrement = $(() => {
    if (totalTreats.value > 20) totalTreats.value--;
  });

  return (
    <>
      <p style={space}>🧁 Tiara's Treats</p>

      <div>
        Total treats:
        <button onClick$={decrement} style={space} type="button">
          -
        </button>
        <span>{totalTreats.value}</span>
        <button onClick$={increment} style={space} type="button">
          +
        </button>
      </div>

      <Progress.Root
        value={Number(treatsEaten)}
        max={Number(totalTreats.value)}
        class="progress"
      >
        <Progress.Label class="progress-label">Treats Progress</Progress.Label>
        <Progress.Track class="progress-track">
          <Progress.Indicator class="progress-indicator" />
        </Progress.Track>
      </Progress.Root>

      <p style={space}>Number of eaten treats: {treatsEaten}</p>
    </>
  );
});

// internal
import styles from "./progress.css?inline";

import { component$, useStyles$ } from "@builder.io/qwik";
import { Progress } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);

  return (
    <Progress.Root value={100} class="progress">
      <Progress.Label class="progress-label">Complete!</Progress.Label>
      <Progress.Track class="progress-track">
        <Progress.Indicator class="progress-indicator" />
      </Progress.Track>
    </Progress.Root>
  );
});

// internal
import styles from "./progress.css?inline";

import { component$, useSignal, useStyles$ } from "@builder.io/qwik";
import { Progress } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);

  const progressSig = useSignal(null);

  return (
    <Progress.Root value={progressSig.value} class="progress">
      <Progress.Label class="progress-label">Loading...</Progress.Label>
      <Progress.Track class="progress-track">
        <Progress.Indicator class="progress-indicator indeterminate" />
      </Progress.Track>
    </Progress.Root>
  );
});

// internal
import styles from "./progress.css?inline";

import { component$, useSignal, useStyles$ } from "@builder.io/qwik";
import { Progress } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);

  const progressSig = useSignal(30);

  return (
    <>
      <Progress.Root bind:value={progressSig} class="progress">
        <Progress.Label class="progress-label">
          Progress: {progressSig.value}%
        </Progress.Label>
        <Progress.Track class="progress-track">
          <Progress.Indicator class="progress-indicator" />
        </Progress.Track>
      </Progress.Root>
      <button onClick$={() => (progressSig.value = 70)} type="button">
        Change progress
      </button>
    </>
  );
});

// internal
import styles from "./progress.css?inline";

import { component$, useSignal, useStyles$ } from "@builder.io/qwik";
import { Progress } from "@kunai-consulting/qwik";

export default component$(() => {
  useStyles$(styles);

  const progress = 30;
  const isRendered = useSignal(false);

  return (
    <>
      <button onClick$={() => (isRendered.value = true)} type="button">
        Render the progress bar
      </button>
      {isRendered.value && (
        <Progress.Root value={progress} class="progress">
          <Progress.Label class="progress-label">Loading {progress}%</Progress.Label>
          <Progress.Track class="progress-track">
            <Progress.Indicator class="progress-indicator" />
          </Progress.Track>
        </Progress.Root>
      )}
    </>
  );
});

// internal
import styles from "./progress.css?inline";