---

components/FormErrorMessage.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { CloseIcon } from '@chakra-ui/icons'
+import { Flex, Text } from '@chakra-ui/react'
+
+interface Props {
+  message: string
+}
+
+export const FormErrorMessage: React.FC<Props> = (props) => {
+  const { message } = props 
+  return (
+    <Flex alignItems='center' color='red' mt={4} fontSize='0.875rem' >
+      <CloseIcon color='red' mr={2.5} fontSize='0.725rem'/>
+      <Text color='red'>{message}</Text>
+    </Flex>
+  )
+}

components/FormSuccessMessage.tsx

@@ -0,0 +1,17 @@
+'use client'
+import { CheckIcon } from '@chakra-ui/icons'
+import { Flex, Text } from '@chakra-ui/react'
+
+interface Props {
+  message: string
+}
+
+export const FormSuccessMessage: React.FC<Props> = (props) => {
+  const { message } = props 
+  return (
+    <Flex alignItems='center' color='green-500' mt={4} fontSize='0.875rem'>
+      <CheckIcon color='green.700' fontSize='0.875rem' mr={2} />
+      <Text color='green'>{message}</Text>
+    </Flex>
+  )
+}

components/InputField.tsx

@@ -0,0 +1,18 @@
+'use client'
+import { FormControl, FormErrorMessage, FormLabel, Input, InputProps } from '@chakra-ui/react'
+import { useField } from 'formik'
+
+type Props = React.InputHTMLAttributes<HTMLInputElement> & InputProps & { name: string, label: string, isTextArea?: boolean } 
+
+export const InputField: React.FC<Props> = ({size: _, isTextArea=false, ...props}) => {
+  const [field, { error }] = useField(props)
+  const { label, placeholder } = props
+
+  return (
+    <FormControl isInvalid={!!error}>
+      <FormLabel htmlFor={field.name}>{label}</FormLabel>
+      <Input {...field} {...props} id={field.name} placeholder={placeholder} />
+      {error ? <FormErrorMessage>{error}</FormErrorMessage> : null}
+    </FormControl>
+  )
+}

components/RefetchButton.tsx

@@ -0,0 +1,10 @@
+'use client'
+import { Button, PropsOf } from '@chakra-ui/react'
+import { useRouter } from 'next/navigation'
+
+export const RefetchButton: React.FC<PropsOf<typeof Button>> = (props) => {
+  const router = useRouter()
+  return (
+    <Button onClick={() => { router.refresh() }} {...props}>Refetch</Button>
+  )
+}

components/TextareaField.tsx

@@ -0,0 +1,36 @@
+'use client'
+import { FormControl, FormErrorMessage, FormLabel, Textarea } from '@chakra-ui/react'
+import autosize from 'autosize'
+import { useField } from 'formik'
+import { useRef, useEffect } from 'react'
+
+type Props = React.TextareaHTMLAttributes<HTMLTextAreaElement> & { name: string, label: string }
+
+export const TextareaField: React.FC<Props> = (props) => {
+  const [field, { error }] = useField(props)
+  const { label, placeholder } = props
+
+  // https://github.com/chakra-ui/chakra-ui/issues/670
+  const ref: any = useRef(null)
+  useEffect(() => {
+    const current = ref.current
+    autosize(current)
+    return () => {
+      autosize.destroy(current)
+    }
+  }, [])
+
+  return (
+    <FormControl isInvalid={!!error}>
+      <FormLabel htmlFor={field.name}>{label}</FormLabel>
+      <Textarea
+        {...field}
+        {...props}
+        ref={ref}
+        id={field.name}
+        placeholder={placeholder}
+      />
+      {error ? <FormErrorMessage>{error}</FormErrorMessage> : null}
+    </FormControl>
+  )
+}

components/Wrapper.tsx

@@ -0,0 +1,14 @@
+import { Box } from '@chakra-ui/react'
+
+interface Props {
+  children: React.ReactNode
+  variant?: 'small' | 'regular'
+}
+
+export const Wrapper: React.FC<Props> = ({ children, variant = 'regular' }) => {
+  return (
+    <Box w='100%' maxW={variant == 'small' ? 400 : 800} mt={8} mx='auto'>
+      {children}
+    </Box>
+  )
+}

components/index.ts

@@ -0,0 +1,6 @@
+export * from './Wrapper'
+export * from './InputField'
+export * from './TextareaField'
+export * from './RefetchButton'
+export * from './FormSuccessMessage'
+export * from './FormErrorMessage'