Update components for better SSR support

Author: adamgraham

src/components/AppFooter.tsx

@@ -4,7 +4,7 @@ import Link from './Link';
 import Logo, { type LogoProps } from './Logo';
 import type { LinkType, ThemeToken } from '../types';
 
-export interface AppFooterProps {
+export type AppFooterProps = {
   bordered?: boolean;
   className?: string;
   copyright?: React.ReactNode;
@@ -18,7 +18,7 @@ export interface AppFooterProps {
   sticky?: boolean;
   theme?: ThemeToken;
   transparent?: boolean;
-}
+} & Omit<React.ComponentPropsWithRef<'footer'>, 'children'>;
 
 export default function AppFooter({
   bordered = false,
@@ -39,6 +39,7 @@ export default function AppFooter({
   sticky = false,
   theme,
   transparent = false,
+  ...rest
 }: AppFooterProps) {
   return (
     <footer
@@ -52,6 +53,7 @@ export default function AppFooter({
         className,
       )}
       data-theme={theme}
+      {...rest}
     >
       <div className="container">
         <div className="row align-center my-lg">

src/components/AppHeader.tsx

@@ -16,7 +16,7 @@ export type AppHeaderProps = {
   sticky?: boolean;
   theme?: ThemeToken;
   transparent?: boolean;
-} & React.ComponentPropsWithRef<'header'>;
+} & Omit<React.ComponentPropsWithRef<'header'>, 'children'>;
 
 export default function AppHeader({
   bordered = false,
@@ -33,7 +33,6 @@ export default function AppHeader({
 }: AppHeaderProps) {
   return (
     <header
-      {...rest}
       className={classNames(
         'app-header',
         {
@@ -44,6 +43,7 @@ export default function AppHeader({
         className,
       )}
       data-theme={theme}
+      {...rest}
     >
       <Container fluid={fluid}>
         <Row className="flex-nowrap">

src/components/AppStoreBadge.tsx

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import React, { useLayoutEffect, useState } from 'react';
+import React from 'react';
 import type { PolymorphicProps } from '../types';
 
 export type BaseAppStoreBadgeProps = {
@@ -29,19 +29,7 @@ export default function AppStoreBadge<T extends React.ElementType = 'a'>({
   ...rest
 }: AppStoreBadgeProps<T>) {
   const Element = as ?? 'a';
-
-  let shortCode = (locale = locale.toLowerCase());
-  const expeptionLocale = ['zh-cn', 'zh-tw'];
-  if (expeptionLocale.indexOf(locale) === -1) {
-    shortCode = locale.split(/[_-]/)[0];
-  }
-
-  const [image, setImage] = useState(getImage(locale, shortCode, variant));
-
-  useLayoutEffect(() => {
-    setImage(getImage(locale, shortCode, variant));
-  }, [locale, shortCode, variant]);
-
+  const image = getImage(platform, locale, variant);
   return (
     <Element
       {...rest}
@@ -55,29 +43,42 @@ export default function AppStoreBadge<T extends React.ElementType = 'a'>({
       }}
     >
       <img
-        alt={alt || image[platform].alt}
-        src={image[platform].src}
+        alt={alt || image?.alt}
+        src={image?.src}
         style={{
           width: '100%',
           height: '100%',
         }}
-        onError={() => {
-          setImage(getImage('en-us', shortCode, variant));
-        }}
       />
     </Element>
   );
 }
 
-function getImage(locale: string, code = locale, variant = 'black') {
-  return {
-    ios: {
-      src: `https://toolbox.marketingtools.apple.com/api/v2/badges/download-on-the-app-store/${variant}/${locale}`,
-      alt: 'Download on the App Store',
-    },
-    android: {
-      src: `https://raw.github.com/yjb94/google-play-badge-svg/master/img/${code}_get.svg?sanitize=true`,
-      alt: 'Get it on Google Play',
-    },
-  };
+function getImage(
+  platform: 'ios' | 'android',
+  locale: string,
+  variant = 'black',
+) {
+  switch (platform) {
+    case 'ios':
+      return {
+        src: `https://toolbox.marketingtools.apple.com/api/v2/badges/download-on-the-app-store/${variant}/${locale}`,
+        alt: 'Download on the App Store',
+      };
+    case 'android':
+      const shortCode = getShortCode(locale);
+      return {
+        src: `https://raw.github.com/yjb94/google-play-badge-svg/master/img/${shortCode}_get.svg?sanitize=true`,
+        alt: 'Get it on Google Play',
+      };
+  }
+}
+
+function getShortCode(locale: string) {
+  let shortCode = locale.toLowerCase();
+  const expeptionLocale = ['zh-cn', 'zh-tw'];
+  if (expeptionLocale.indexOf(locale) === -1) {
+    shortCode = locale.split(/[_-]/)[0];
+  }
+  return shortCode;
 }

src/components/ClickableDiv.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { keyboardEventHandler } from '../utils';

src/components/CodeBlock.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useEffect, useRef } from 'react';
 import { highlightElement } from '../utils/syntax';

src/components/ContactForm.tsx

@@ -1,10 +1,12 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 
 export type ContactFormProps = {
   className?: string;
   onSubmit?: React.FormEventHandler<HTMLFormElement>;
-} & React.ComponentPropsWithRef<'form'>;
+} & Omit<React.ComponentPropsWithRef<'form'>, 'children'>;
 
 export default React.forwardRef(function ContactForm(
   { className, onSubmit = () => {}, ...rest }: ContactFormProps,

src/components/CookieConsent.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCookies } from 'react-cookie';
 import classNames from 'classnames';
 import React from 'react';

src/components/EmbeddedVideo.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useRef } from 'react';
 import LoadingSpinner from './LoadingSpinner';

src/components/Icon.tsx

@@ -37,6 +37,7 @@ export default function Icon<T extends React.ElementType = 'i'>({
   variant = 'rounded',
   ...rest
 }: IconProps<T>) {
+  icon = icon ?? (children as string);
   const Element = as ?? 'i';
   const isTokenSize =
     typeof size === 'string' &&
@@ -52,8 +53,8 @@ export default function Icon<T extends React.ElementType = 'i'>({
     <Element
       {...rest}
       className={classNames(
+        'icon',
         {
-          icon: true,
           [`icon--${shape}`]: shape,
           [`icon--${size}`]: isTokenSize,
           [`text-${color}`]: isTokenColor,

src/components/ImageGallery.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useCallback, useState } from 'react';
 import Lightbox, { type LightboxProps } from './Lightbox';
@@ -15,7 +17,7 @@ export interface ImageGalleryProps {
   columns?: number;
   disableLightbox?: boolean;
   fullWidthFirstItem?: boolean;
-  images?: Image[];
+  images: Image[];
   lightboxProps?: LightboxProps;
   maxWidth?: number;
   minWidth?: number;

src/components/Input.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useRef, useState } from 'react';
 import Icon, { type IconProps } from './Icon';
@@ -12,7 +14,7 @@ export type InputProps = {
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
   onFocus?: React.FocusEventHandler<HTMLInputElement>;
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-} & Omit<React.ComponentPropsWithoutRef<'input'>, 'size'>;
+} & Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'children'>;
 
 export default function Input({
   className,

src/components/Lightbox.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useCallback } from 'react';
 import Button from './Button';

src/components/NavBar.tsx

@@ -13,7 +13,7 @@ export type NavBarProps = {
   onLinkClick?: (link: LinkTypeWithIcon) => void;
   spacing?: PaddingToken;
   variant?: 'button' | 'link';
-} & React.ComponentProps<'nav'>;
+} & Omit<React.ComponentProps<'nav'>, 'children'>;
 
 export default function NavBar({
   className,

src/components/NavMenu.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import Button from './Button';

src/components/Overlay.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import ClickableDiv from './ClickableDiv';

src/components/Pagination.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useMemo } from 'react';
 import Button from './Button';

src/components/ProgressiveImage.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useRef } from 'react';
 import LoadingSpinner from './LoadingSpinner';

src/components/ReactPortal.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 

src/components/SearchInput.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useCallback } from 'react';
 import Input, { type InputProps } from './Input';

src/components/Thumbnail.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React, { useEffect, useMemo, useState } from 'react';
 import ProgressiveImage, { type ProgressiveImageProps } from './ProgressiveImage'; // prettier-ignore

src/hoc/withScrollToTop.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect } from 'react';
 import { getDisplayName, scrollToTop } from '../utils';
 

src/hoc/withSyntaxHighlighting.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect } from 'react';
 import { getDisplayName, highlightAll } from '../utils';
 

src/hoc/withThemedFavicon.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React from 'react';
 import { useThemedFavicon } from '../hooks';
 import { getDisplayName } from '../utils';

src/hoc/withTransition.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import classNames from 'classnames';
 import React from 'react';
 import { useMounted } from '../hooks';

src/hooks/useBodyOverflow.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect } from 'react';
 import { getScrollbarWidth } from '../utils';
 

src/hooks/useBreakpoint.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useMediaQuery } from './useMediaQuery';
 import { BreakpointMinWidth, BreakpointMaxWidth } from '../enums';
 import type { BreakpointToken } from '../types';

src/hooks/useElementSize.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useLayoutEffect, useState } from 'react';
 import type { Size } from '../types';
 

src/hooks/useKeyboardEvent.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect } from 'react';
 import { nativeKeyboardEventHandler } from '../utils';
 

src/hooks/useLoaded.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 import { bindEvent, unbindEvent } from '../utils';
 

src/hooks/useLocalStorage.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 export function useLocalStorage<T>(

src/hooks/useMediaQuery.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 import { bindEvent, unbindEvent } from '../utils';
 

src/hooks/useMounted.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 export function useMounted() {

src/hooks/usePagination.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useState } from 'react';
 
 export type PaginationState<T> = {

src/hooks/useSearch.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useCallback, useEffect, useState } from 'react';
 
 export type SearchState<T> = {

src/hooks/useSmoothDamp.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useEffect, useRef, useState } from 'react';
 import { smoothdamp } from '../utils';
 

src/hooks/useTheme.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { createContext, useCallback } from 'react';
 import { useLocalStorage } from './useLocalStorage';
 import type { BaseThemeToken } from '../types';

src/hooks/useThemedFavicon.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import { useState } from 'react';
 import { useMediaQuery } from './useMediaQuery';
 

src/utils/events.ts

@@ -1,3 +1,5 @@
+'use client';
+
 export function bindEvent(
   element: EventTarget,
   eventName: string,