Add PropsWithChildren for now

Author: alinnert

package.json

@@ -1,6 +1,6 @@
 {
   "name": "webdevhome.github.io-vite",
-  "version": "2.0.11",
+  "version": "2.0.11.1",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

src/components/App/AppContent.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
-import { FC } from 'react'
+import { FC, PropsWithChildren } from 'react'
 
-export const AppContent: FC = ({ children }) => {
+export const AppContent: FC<PropsWithChildren> = ({ children }) => {
   return (
     <div
       className={classNames(

src/components/Footer/AppFooter.tsx

@@ -1,7 +1,7 @@
-import { FC } from 'react'
+import { FC, PropsWithChildren } from 'react'
 import classNames from 'classnames'
 
-export const AppFooter: FC = ({ children }) => {
+export const AppFooter: FC<PropsWithChildren> = ({ children }) => {
   return (
     <div
       className={classNames(

src/components/Footer/FooterGroupLink.tsx

@@ -1,11 +1,14 @@
 import classNames from 'classnames'
-import { FC } from 'react'
+import { FC, PropsWithChildren } from 'react'
 
 interface Props {
   href: string
 }
 
-export const FooterGroupLink: FC<Props> = ({ href, children }) => {
+export const FooterGroupLink: FC<PropsWithChildren<Props>> = ({
+  href,
+  children,
+}) => {
   return (
     <a
       className={classNames(
@@ -15,7 +18,7 @@ export const FooterGroupLink: FC<Props> = ({ href, children }) => {
         'hover:text-brand-600 hover:dark:text-brand-50',
         'hover:bg-gray-300 dark:hover:bg-gray-500',
         'rounded',
-        'focus:outline outline-1 outline-gray-500 dark:outline-gray-300'
+        'focus:outline outline-1 outline-gray-500 dark:outline-gray-300',
       )}
       href={href}
     >

src/components/Footer/FooterGroupText.tsx

@@ -1,11 +1,14 @@
 import classNames from 'classnames'
-import { FC } from 'react'
+import { FC, PropsWithChildren } from 'react'
 
 interface Props {
   className?: string
 }
 
-export const FooterGroupText: FC<Props> = ({ className = '', children }) => {
+export const FooterGroupText: FC<PropsWithChildren<Props>> = ({
+  className = '',
+  children,
+}) => {
   return (
     <div className={classNames('px-2 py-2 sm:mx-1', 'text-sm', className)}>
       {children}

src/components/Links/LinkAction.tsx

@@ -1,13 +1,13 @@
 import classNames from 'classnames'
-import { FC, MouseEvent } from 'react'
+import { FC, MouseEvent, PropsWithChildren } from 'react'
 
 interface Props {
   className?: string
   hasHover?: boolean
   onClick?: (event: MouseEvent<HTMLDivElement>) => void
 }
 
-export const LinkAction: FC<Props> = ({
+export const LinkAction: FC<PropsWithChildren<Props>> = ({
   children,
   className,
   hasHover = false,

src/components/Links/LinkGroupButton.tsx

@@ -1,11 +1,14 @@
 import classNames from 'classnames'
-import { FC } from 'react'
+import { FC, PropsWithChildren } from 'react'
 
 interface Props {
   onClick?: () => void
 }
 
-export const LinkGroupButton: FC<Props> = ({ children, onClick }) => {
+export const LinkGroupButton: FC<PropsWithChildren<Props>> = ({
+  children,
+  onClick,
+}) => {
   return (
     <button
       className={classNames(

src/components/Search/SearchHint.tsx

@@ -1,11 +1,14 @@
-import { FC, Fragment } from 'react'
+import { FC, Fragment, PropsWithChildren } from 'react'
 import { Kbd } from '../basics/Kbd'
 
 interface Props {
   inputs?: string[]
 }
 
-export const SearchHint: FC<Props> = ({ children, inputs }) => {
+export const SearchHint: FC<PropsWithChildren<Props>> = ({
+  children,
+  inputs,
+}) => {
   return (
     <div className="mt-4">
       {inputs !== undefined && inputs.length > 0 ? (

src/components/Search/SearchHints.tsx

@@ -1,5 +1,5 @@
-import { FC } from 'react'
+import { FC, PropsWithChildren } from 'react'
 
-export const SearchHints: FC = ({ children }) => {
+export const SearchHints: FC<PropsWithChildren> = ({ children }) => {
   return <div className="mx-8 text-lg">{children}</div>
 }

src/components/basics/Kbd.tsx

@@ -1,7 +1,7 @@
 import classNames from 'classnames'
-import { FC } from 'react'
+import { FC, PropsWithChildren } from 'react'
 
-export const Kbd: FC = ({ children }) => {
+export const Kbd: FC<PropsWithChildren> = ({ children }) => {
   return (
     <kbd
       className={classNames(