Fundamental reactivity

import { createSignal, createEffect } from 'solid-js'
import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card'
import { TextField, TextFieldLabel, TextFieldRoot } from '@/components/ui/textfield'
import ProbabilityConesChart, { ConeType } from '@/components/charts/ProbabilityCones'

import type { Component } from 'solid-js'
import type { ProcessedData } from '@/libs/stats'

interface CardProps {
  data: ProcessedData | null
}

export const ProbabilityConesCard: Component<CardProps> = (props) => {
  const [coneSize, setConeSize] = createSignal(30)

  // createEffect(() => {
  //   console.log('here', coneSize())
  // })

  return (
    <div class="grid grid-cols-1 2xl:grid-cols-2 gap-6 mt-6">
      <Card>
        <CardHeader class="flex flex-row">
          <CardTitle>Probability Cones</CardTitle>
          <TextFieldRoot class="mt-0">
            <TextFieldLabel for="coneSize">Cone Size</TextFieldLabel>
            <TextField
              id="coneSize"
              class="mt-2"
              type="number"
              min={1}
              value={coneSize()}
              // onInput={(e) => setConeSize(Number((e.target as HTMLInputElement).value))}
              onInput={(e) => {
                console.log('here', coneSize())
                setConeSize(Number((e.target as HTMLInputElement).value))
              }}
            />
          </TextFieldRoot>
        </CardHeader>
        <CardContent>
          <ProbabilityConesChart
            data={props.data}
            coneLength={coneSize()}
          />
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle>Probability Cones</CardTitle>
        </CardHeader>
        <CardContent>
          <ProbabilityConesChart
            data={props.data}
            coneType={ConeType.Linear}
          />
        </CardContent>
      </Card>
    </div>
  )
}

export default ProbabilityConesCard