refactor Row, Col to accept all div props

web/components/layout/col.tsx

@@ -1,16 +1,10 @@
 import clsx from 'clsx'
-import { CSSProperties, Ref, ReactNode } from 'react'
 
-export function Col(props: {
+export function Col(props: JSX.IntrinsicElements['div']) {
-  children?: ReactNode
+  const { children, className, ...rest } = props
-  className?: string
-  style?: CSSProperties
-  ref?: Ref<HTMLDivElement>
-}) {
-  const { children, className, style, ref } = props
 
   return (
-    <div className={clsx(className, 'flex flex-col')} style={style} ref={ref}>
+    <div className={clsx(className, 'flex flex-col')} {...rest}>
       {children}
     </div>
   )

web/components/layout/row.tsx

@@ -1,15 +1,10 @@
 import clsx from 'clsx'
-import { ReactNode } from 'react'
 
-export function Row(props: {
+export function Row(props: JSX.IntrinsicElements['div']) {
-  children?: ReactNode
+  const { children, className, ...rest } = props
-  className?: string
-  id?: string
-}) {
-  const { children, className, id } = props
 
   return (
-    <div className={clsx(className, 'flex flex-row')} id={id}>
+    <div className={clsx(className, 'flex flex-row')} {...rest}>
       {children}
     </div>
   )