foldbank-mock/web/app/components/RecurringCol.tsx

import styles from './recurringCol.module.css'
import Calendar from './Calendar'
import { AiOutlinePlus } from 'react-icons/ai';
import { VscDebugRestart } from 'react-icons/vsc';
import React from 'react'
import Paid from './Paid'
import Upcoming from './Upcoming'


export default function RecurringCol() {
  return (
    <div className={styles.main}>
      <div className={styles.topDiv}>
        <div className={styles.titleDiv}>
          <div className={styles.titleLeft}>
            <div className={styles.restart}>
              <VscDebugRestart />
            </div>
            <div className={styles.titleText}>Recurring Payments</div>
          </div>
          <AiOutlinePlus
            size={20}
            className={styles.plus}
          />
        </div>
        <Calendar />
      </div>
      <div className={styles.postCalendar}>
        <Paid />
        <Upcoming />
      </div>
    </div>
  )
}