jacques-blom

import {Button} from '@chakra-ui/button'
import {Input} from '@chakra-ui/input'
import {Box, Divider, Heading, VStack} from '@chakra-ui/layout'
import React, {useState} from 'react'
import {
    atom,
    atomFamily,
    DefaultValue,
    useRecoilCallback,
    useRecoilState,

jacques-blom

import {Button} from '@chakra-ui/button'
import {Input} from '@chakra-ui/input'
import {Box, Divider, Heading, VStack} from '@chakra-ui/layout'
import React, {useState} from 'react'
import {atom, atomFamily, useRecoilCallback, useRecoilState, useRecoilValue, useResetRecoilState} from 'recoil'

type ItemType = {
    label: string
    checked: boolean
}

jacques-blom

import {Button} from '@chakra-ui/button'
import {Input} from '@chakra-ui/input'
import {Box, Divider, Heading, VStack} from '@chakra-ui/layout'
import produce from 'immer'
import React, {useState} from 'react'
import {atom, useRecoilState, useResetRecoilState} from 'recoil'

type ItemType = {
    label: string
    checked: boolean

jacques-blom

import {Box, Text, VStack} from '@chakra-ui/layout'
import {Skeleton} from '@chakra-ui/skeleton'

export const ImageInfo = () => {
    return (
        <VStack spacing={2} alignItems="flex-start" width="100%">
            <Info label="Author" value="Value goes here" />
            <Info label="Image URL" value="Value goes here" />
        </VStack>
    )

jacques-blom

import {Box, Spinner} from '@chakra-ui/react'
import {getBorderColor} from '../../util'

export const RectangleLoading = ({selected}: {selected: boolean}) => {
    return (
        <Box
            position="absolute"
            border={`1px solid ${getBorderColor(selected)}`}
            transition="0.1s border-color ease-in-out"
            width="100%"

jacques-blom

export const getWeather = (zipCode: string) => {
    return new Promise<number>((resolve) => {
        setTimeout(() => {
            if (!getWeatherCache[zipCode]) {
                getWeatherCache[zipCode] = randomIntBetween(5, 35)
            } else {
                getWeatherCache[zipCode] += randomIntBetween(-1, 2)
            }

            resolve(getWeatherCache[zipCode])

jacques-blom

import {Container, Heading, Text} from '@chakra-ui/layout'
import {Select} from '@chakra-ui/select'
import {atom, useRecoilState} from 'recoil'

const userIdState = atom<number | undefined>({
    key: 'userId',
    default: undefined,
})

export const Async = () => {

jacques-blom

import {InputGroup, InputRightElement, NumberInput, NumberInputField, Text, VStack} from '@chakra-ui/react'

export const EditProperties = () => {
    return (
        <Card>
            <Section heading="Position">
                <Property label="Top" value={1} onChange={(top) => {}} />
                <Property label="Left" value={1} onChange={(left) => {}} />
            </Section>
        </Card>

jacques-blom

import {createContext, useState} from 'react'
import {Element, Rectangle} from './components/Rectangle/Rectangle'
import {PageContainer} from './PageContainer'
import {Toolbar} from './Toolbar'

type ElementsContextType = {
    elements: Element[]
    addElement: () => void
    setElement: SetElement
}

jacques-blom

import {
    Box,
    FormControl,
    FormLabel,
    Heading,
    HStack,
    Icon,
    NumberInput,
    NumberInputField,
    Switch,