Dynamic tagname React

Card.tsx

import React from 'react'

type Props = React.HTMLAttributes<HTMLElement> & {
  as?: 'div' | 'article' | 'section'
}

export const Card: React.FC<Props> = ({
  children,
  as: Component = 'div',
  className,
  ...restProps
}) => {
  return (
    <Component
      className={className + ' bg-white p-4 rounded-lg shadow'}
      {...restProps}
    >
      {children}
    </Component>
  )
}