Function TodoApp

examples/solid/todo/src/components/TodoApp.tsx:15–280

(props: TodoAppProps)

}

export function TodoApp(props: TodoAppProps) {
  const [newTodo, setNewTodo] = createSignal(``)

  // Define a type-safe helper function to get config values
  const getConfigValue = (key: string): string => {
    for (const config of props.configData) {
      if (config.key === key) {
        return config.value
      }
    }
    return ``
  }

  // Define a helper function to update config values
  const setConfigValue = (key: string, value: string): void => {
    for (const config of props.configData) {
      if (config.key === key) {
        props.configCollection.update(config.id, (draft) => {
          draft.value = value
        })
        return
      }
    }

    // If the config doesn't exist yet, create it
    props.configCollection.insert({
      id: Math.round(Math.random() * 1000000),
      key,
      value,
      created_at: new Date(),
      updated_at: new Date(),
    })
  }

  const backgroundColor = getConfigValue(`backgroundColor`)

  // Function to generate a complementary color
  const getComplementaryColor = (hexColor: string): string => {
    // Default to a nice blue if no color is provided
    if (!hexColor) return `#3498db`

    // Remove the hash if it exists
    const color = hexColor.replace(`#`, ``)

    // Convert hex to RGB
    const r = parseInt(color.substr(0, 2), 16)
    const g = parseInt(color.substr(2, 2), 16)
    const b = parseInt(color.substr(4, 2), 16)

    // Calculate complementary color (inverting the RGB values)
    const compR = 255 - r
    const compG = 255 - g
    const compB = 255 - b

    // Convert back to hex
    const compHex =
      `#` +
      ((1 << 24) + (compR << 16) + (compG << 8) + compB).toString(16).slice(1)