From 3d9d60e8feee1fc6669a15bbd0c250d540d6d8d7 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <sinclair@daommo.com>
Date: Tue, 31 May 2022 17:13:54 -0700
Subject: [PATCH] refactor Row, Col to accept all div props

---
 web/components/layout/col.tsx | 12 +++---------
 web/components/layout/row.tsx | 11 +++--------
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/web/components/layout/col.tsx b/web/components/layout/col.tsx
index 74fad186..99bb2d7d 100644
--- a/web/components/layout/col.tsx
+++ b/web/components/layout/col.tsx
@@ -1,16 +1,10 @@
 import clsx from 'clsx'
-import { CSSProperties, Ref, ReactNode } from 'react'
 
-export function Col(props: {
-  children?: ReactNode
-  className?: string
-  style?: CSSProperties
-  ref?: Ref<HTMLDivElement>
-}) {
-  const { children, className, style, ref } = props
+export function Col(props: JSX.IntrinsicElements['div']) {
+  const { children, className, ...rest } = props
 
   return (
-    <div className={clsx(className, 'flex flex-col')} style={style} ref={ref}>
+    <div className={clsx(className, 'flex flex-col')} {...rest}>
       {children}
     </div>
   )
diff --git a/web/components/layout/row.tsx b/web/components/layout/row.tsx
index 1c69c252..ceb2183c 100644
--- a/web/components/layout/row.tsx
+++ b/web/components/layout/row.tsx
@@ -1,15 +1,10 @@
 import clsx from 'clsx'
-import { ReactNode } from 'react'
 
-export function Row(props: {
-  children?: ReactNode
-  className?: string
-  id?: string
-}) {
-  const { children, className, id } = props
+export function Row(props: JSX.IntrinsicElements['div']) {
+  const { children, className, ...rest } = props
 
   return (
-    <div className={clsx(className, 'flex flex-row')} id={id}>
+    <div className={clsx(className, 'flex flex-row')} {...rest}>
       {children}
     </div>
   )