import type { ReactNode } from 'react' import { Fragment } from 'react' import { Badge } from '@/components/ui/badge' import { Card, CardContent } from '@/components/ui/card' import { MotionPreset } from '@/components/ui/motion-preset' import { PrimaryGrowButton } from '@/components/ui/grow-button' import GrowLogo from '@/assets/svg/grow-logo' import { cn } from '@/lib/utils' type RowData = { name: string isKey?: boolean icon?: ReactNode isHighlighted?: boolean columnData: (string | ReactNode)[] }[] const CompareUILib = ({ rowdata }: { rowdata: RowData }) => { return (

Comparison

Why we stand out

See what sets Grow apart - powerful tools, real-time insights, and seamless integrations smarter marketing decisions.

Get Started - Free

{/* Header Row */} {rowdata.map((row, colIndex) => (

{row.isKey ? (

{row.name}

) : (

{row.icon &&

{row.icon}

}

{row.name}

)}

))} {/* Data Rows */} {rowdata[0].columnData.map((_, rowIndex) => ( {rowdata.map((col, colIndex) => (

0 && colIndex < rowdata.length, 'border-b': col.isHighlighted || rowIndex !== col.columnData.length - 1, 'h-19 border-b-0 pb-4': !col.isHighlighted && rowIndex === col.columnData.length - 1, 'rounded-b-md pb-0!': col.isHighlighted && rowIndex === col.columnData.length - 1 })} >

{col.isKey ? ( <> {rowIndex + 1}. {col.columnData[rowIndex]} ) : ( col.columnData[rowIndex] )}

))} ))}

) } export default CompareUILib

Shadcn Compare

Compare 1